Context-aware routing to the Anytype iOS design system including icons, typography, colors, and spacing. Use when working with Figma-to-code translation, design assets, or UI components.
Context-aware routing to the Anytype iOS design system: icons, typography, colors, spacing. Helps you navigate Figma-to-code translation.
make generate after adding assets - Icons and assets must be code-generatedNextElement.Y - (CurrentElement.Y + CurrentElement.Height)// 18pt - Toolbar/nav bar icons
Image(asset: .X18.search)
// 24pt - List row icons
Image(asset: .X24.camera)
// 32pt - Buttons, main UI (most common)
Image(asset: .X32.qrCode)
// 40pt - Large features
Image(asset: .X40.profile)
QRCode.svg)/Modules/Assets/.../Assets.xcassets/DesignSystem/x32/QRCode.imageset/make generateImage(asset: .X32.qrCode)// Screen titles
AnytypeText("Settings", style: .uxTitle1Semibold)
// Section headers
AnytypeText("Recent", style: .uxTitle2Semibold)
// Body text
Text("Description").anytypeStyle(.bodyRegular)
// Small labels
Text("Add Member").anytypeStyle(.caption1Medium) // Note: no "ux" prefix!
Content Styles (remove "Content/" prefix):
.bodySemibold.previewTitle2RegularUX Styles - Title/Body/Callout (keep "ux" prefix lowercase):
.uxTitle1Semibold.uxBodyRegularUX Styles - Captions (DROP "ux" prefix - EXCEPTION!):
.caption1Medium (no "ux").caption2Regular (no "ux")| Use Case | Figma Style | Swift Constant | Size |
|----------|-------------|----------------|------|
| Screen titles | UX/Title 1/Semibold | .uxTitle1Semibold | 28pt |
| Section headers | UX/Title 2/Semibold | .uxTitle2Semibold | 17pt |
| Body text | Content/Body/Regular | .bodyRegular | 17pt |
| Small labels | UX/Caption 1/Medium | .caption1Medium | 13pt |
// Backgrounds
.background(Color.Shape.transparentSecondary)
.background(Color.Background.primary)
// Text colors
.foregroundColor(Color.Text.primary)
.foregroundColor(Color.Text.secondary)
// Control colors
.foregroundColor(Color.Control.active)
CRITICAL: Spacing is the GAP between elements, not top-to-top distance.
Formula:
Spacing = NextElement.Y - (CurrentElement.Y + CurrentElement.Height)
Example:
Common mistake:
❌ WRONG: 374 - 326 = 48px (includes first element's height!)
✅ CORRECT: 374 - (326 + 24) = 24px (actual gap)
SwiftUI usage:
Text("Title")
Spacer.fixedHeight(24) // ✅ Correct spacing
Text("Feature")
// ❌ WRONG
Text("Button").anytypeStyle(.uxCaption1Medium) // Doesn't exist!
// ✅ CORRECT
Text("Button").anytypeStyle(.caption1Medium) // Captions drop "ux" prefix
// ❌ WRONG
.background(Color(hex: "#FF0000"))
// ✅ CORRECT
.background(Color.Pure.red)
// ❌ WRONG - Upscaling looks bad
Image(asset: .X18.qrCode)
.frame(width: 32, height: 32)
// ✅ CORRECT - Use native size
Image(asset: .X32.qrCode)
.frame(width: 32, height: 32)
// ❌ WRONG - Top-to-top (includes height)
Spacing = NextElement.Y - CurrentElement.Y
// ✅ CORRECT - Actual gap
Spacing = NextElement.Y - (CurrentElement.Y + CurrentElement.Height)
Full Guides:
Anytype/Sources/PresentationLayer/Common/DESIGN_SYSTEM_MAPPING.mdAnytype/Sources/PresentationLayer/Common/TYPOGRAPHY_MAPPING.mdFor comprehensive coverage of:
Figma References:
.X* constants, no hardcoded asset names.anytypeStyle() or AnytypeTextColor.* constants, no hex valuesmake generate after adding new assetsCODE_GENERATION_GUIDE.md - Run make generate after adding iconsIOS_DEVELOPMENT_GUIDE.md - SwiftUI patterns for design systemNavigation: This is a smart router. For deep technical details, always refer to DESIGN_SYSTEM_MAPPING.md and TYPOGRAPHY_MAPPING.md.
npx skills add anyproto/design-system-developer下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer