name: 设计系统开发者 description: 上下文感知路由到Anytype iOS设计系统，包括图标、排版、颜色和间距。用于Figma到代码翻译、设计资产或UI组件工作。

设计系统开发者（智能路由器）

目的

上下文感知路由到Anytype iOS设计系统：图标、排版、颜色、间距。帮助您在Figma到代码翻译中导航。

何时自动激活

处理图标或排版时
关键词：图标、排版、设计系统、figma、颜色、间距
编辑DesignSystem/或Assets.xcassets中的文件
讨论颜色或UI组件时

🚨 关键规则（永远不要违反）

始终使用设计系统常量 - 不要硬编码十六进制颜色、字体大小或资产名称
添加资产后始终运行make generate - 图标和资产必须代码生成
图标按大小组织 - x18、x24、x32、x40（根据上下文使用正确大小）
排版遵循严格映射 - Figma样式名称映射到特定Swift枚举案例
间距公式 - NextElement.Y - (CurrentElement.Y + CurrentElement.Height)

📋 快速参考

图标用法

// 18pt - 工具栏/导航栏图标
Image(asset: .X18.search)

// 24pt - 列表行图标
Image(asset: .X24.camera)

// 32pt - 按钮、主UI（最常见）
Image(asset: .X32.qrCode)

// 40pt - 大型功能
Image(asset: .X40.profile)

添加图标

从Figma导出SVG（“32/qr code” → QRCode.svg）
添加到/Modules/Assets/.../Assets.xcassets/DesignSystem/x32/QRCode.imageset/
运行make generate
使用：Image(asset: .X32.qrCode)

排版用法

// 屏幕标题
AnytypeText("设置", style: .uxTitle1Semibold)

// 节标题
AnytypeText("最近", style: .uxTitle2Semibold)

// 正文文本
Text("描述").anytypeStyle(.bodyRegular)

// 小标签
Text("添加成员").anytypeStyle(.caption1Medium)  // 注意：没有“ux”前缀！

排版映射（Figma → Swift）

内容样式（移除“Content/”前缀）：

“Content/Body/Semibold” → .bodySemibold
“Content/Preview Title 2/Regular” → .previewTitle2Regular

UX样式 - 标题/正文/标注（保留小写“ux”前缀）：

“UX/Title 1/Semibold” → .uxTitle1Semibold
“UX/Body/Regular” → .uxBodyRegular

UX样式 - 标题（删除“ux”前缀 - 例外！）：

“UX/Caption 1/Medium” → .caption1Medium（没有“ux”）
“UX/Caption 2/Regular” → .caption2Regular（没有“ux”）

常见排版样式

使用案例	Figma样式	Swift常量	大小
屏幕标题	UX/Title 1/Semibold	`.uxTitle1Semibold`	28pt
节标题	UX/Title 2/Semibold	`.uxTitle2Semibold`	17pt
正文文本	Content/Body/Regular	`.bodyRegular`	17pt
小标签	UX/Caption 1/Medium	`.caption1Medium`	13pt

颜色用法

// 背景
.background(Color.Shape.transparentSecondary)
.background(Color.Background.primary)

// 文本颜色
.foregroundColor(Color.Text.primary)
.foregroundColor(Color.Text.secondary)

// 控制颜色
.foregroundColor(Color.Control.active)

📏 来自Figma的间距（关键公式）

关键：间距是元素之间的间隙，不是顶部到顶部的距离。

公式：

间距 = NextElement.Y - (CurrentElement.Y + CurrentElement.Height)

示例：

第一个元素：Y=326px，高度=24px → 底部边缘 = 350px
第二个元素：Y=374px
间距 = 374 - 350 = 24px ✅

常见错误：

❌ 错误：374 - 326 = 48px（包括第一个元素的高度！）
✅ 正确：374 - (326 + 24) = 24px（实际间隙）

SwiftUI用法：

Text("标题")
Spacer.fixedHeight(24)  // ✅ 正确间距
Text("功能")

⚠️ 常见错误

排版样式不存在

// ❌ 错误
Text("按钮").anytypeStyle(.uxCaption1Medium)  // 不存在！

// ✅ 正确
Text("按钮").anytypeStyle(.caption1Medium)  // 标题删除“ux”前缀

硬编码颜色

// ❌ 错误
.background(Color(hex: "#FF0000"))

// ✅ 正确
.background(Color.Pure.red)

错误图标大小

// ❌ 错误 - 上采样看起来不好
Image(asset: .X18.qrCode)
    .frame(width: 32, height: 32)

// ✅ 正确 - 使用原生大小
Image(asset: .X32.qrCode)
    .frame(width: 32, height: 32)

间距计算

// ❌ 错误 - 顶部到顶部（包括高度）
间距 = NextElement.Y - CurrentElement.Y

// ✅ 正确 - 实际间隙
间距 = NextElement.Y - (CurrentElement.Y + CurrentElement.Height)

📚 完整文档

完整指南：

设计系统：Anytype/Sources/PresentationLayer/Common/DESIGN_SYSTEM_MAPPING.md
排版：Anytype/Sources/PresentationLayer/Common/TYPOGRAPHY_MAPPING.md

涵盖内容：

完整的排版映射表
所有颜色类别和常量
图标组织和工作流程
圆角标准
尺寸标准（仅限整数）
设计验证工作流程
深色/浅色模式考虑

Figma参考：

排版：https://www.figma.com/file/vgXV7x2v20vJajc7clYJ7a/Typography-Mobile

✅ 设计实现清单

[ ] 所有图标使用.X*常量，没有硬编码资产名称
[ ] 所有排版使用.anytypeStyle()或AnytypeText
[ ] 所有颜色使用Color.*常量，没有十六进制值
[ ] 使用正确公式从Figma提取间距
[ ] 所有尺寸是整数（或如有舍入则记录）
[ ] 添加新资产后运行make generate
[ ] 视觉上验证与Figma设计
[ ] 检查深色/浅色模式外观

🔗 相关技能与文档

code-generation-developer → CODE_GENERATION_GUIDE.md - 添加图标后运行make generate
ios-dev-guidelines → IOS_DEVELOPMENT_GUIDE.md - 设计系统的SwiftUI模式
localization-developer → 排版与本地化文本结合

导航：这是一个智能路由器。对于深层次技术细节，始终参考DESIGN_SYSTEM_MAPPING.md和TYPOGRAPHY_MAPPING.md。