메뉴
从 figma-ios-preload-data 数据包（design.json）识别标准 UI 组件类型（Selector、Stepper、Toggle、Tag Group 等）， 提取布局模式和通用特征，指导后续状态提取和代码生成。 Use when identifying component type from Figma, or when user mentions Selector、Stepper、Toggle、标准组件、通用组件、组件类型识别。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Entry point for Figma → iOS UIKit/Swift code in this repo. Three-phase workflow: phase 1 runs figma-ios-preload-data to produce a unified data package; phase 2 (this playbook) consumes it via linked specialized skills (MK tokens, iOS 12, node conventions, SnapKit layout) to emit **baseline UI code** — visual/layout fidelity at 100%, data is mock, business logic stubbed behind `// TODO(阶段3): ...` markers. Phase 3 (PRD + API-doc rewrite into production code) is OUT OF SCOPE. Use when generating or refactoring Figma-based iOS UI, Figma to Swift, codegen, or when the user asks which skill applies.
从 Figma 节点自动识别选择交互模式（单选/多选/Toggle），生成选中态变化逻辑（更新数据模型 + 刷新 UI）， 集成 RxSwift 交互模式。Use when generating selection interaction code, or when user mentions 选中态交互、单选、多选、didSelectItem、Toggle。
Apply Figma comments that are pre-matched to nodes by figma-ios-preload-data. Read confidence + parsed tags from comments.json. Iconfont corrections are already written into design.json; color comments stay in comments.json for Phase-2 mapping. Use when generating code from Figma with designer comments.
从 figma-ios-preload-data 数据包（design.json）提取组件各状态的视觉特征（背景色、边框、文字颜色、字体）， 生成带 updateAppearance() 的状态切换代码。 Use when extracting visual states from Figma components, generating selected/unselected/disabled state code, or when user asks about 选中态、状态切换、updateAppearance。
Map Figma colors and fonts from the data package into Swift via configurable JSON maps under .cursor/bindings/. Hit → emit mapped code snippet; miss → UIKit fallback. Use when generating color or font code from design.json.
Reference iOS image assets that figma-ios-preload-data pre-downloaded into the data package. Covers two cases: (1) local imagesets (copy + UIImage(named:)), and (2) server-side images (avatars / covers / category icons / any RECTANGLE filled with IMAGE that has no local imageset) — these MUST use the data package's mock.default_image_url via sd_setImage, never fabricated asset names. Use when wiring any UIImage reference or generating mock data for image fields.
SOC 직업 분류 기준
| name | figma-ios-standard-components |
| description | 从 figma-ios-preload-data 数据包（design.json）识别标准 UI 组件类型（Selector、Stepper、Toggle、Tag Group 等）， 提取布局模式和通用特征，指导后续状态提取和代码生成。 Use when identifying component type from Figma, or when user mentions Selector、Stepper、Toggle、标准组件、通用组件、组件类型识别。 |
数据来源：design.json[node]（VECTOR/INSTANCE/SYMBOL 已展开，fills/strokes/corner_radius/opacity 已规范化）
多个并列节点 + 样式不同 + 等宽 → Selector
多个并列节点 + 样式不同 + 不等宽 → Tag Group
三段式：[减] [值] [加] → Stepper
两种状态（开/关） → Toggle
1. 从 design.json 取出所有子节点（已含 `fills` / `strokes` / `corner_radius` / `opacity` / `vector_geometry`）
2. 对比同类节点的 `fills[].color`（`rgba` 已含 alpha）、`strokes[].color`（**无** `strokes[].visible`：不可见 stroke 阶段 1 已丢弃）、`corner_radius`
3. 验证对称性（Stepper 的减号/加号 fills 应一致）
4. 再生成代码
阶段 2 不再调 Figma REST API；所有字段都在数据包里。旧名
vector_paths/fills[].opacity/strokes[].visible不要再读。
有多个并列同类节点？
└─ 是 → 节点宽度是否相等？
├─ 是 → 样式有差异？ → Selector（单选 or 多选）
└─ 否 → 是否可换行？ → Tag Group
有三个子节点，水平排列，左右对称？
└─ 是 → Stepper
只有两种状态（开/关），有滑块？
└─ 是 → Toggle / Switch
Figma 特征：
分析步骤：
变种：
Figma 特征：
分析步骤：
变种：
关键原则：不要假设固定尺寸，从 design.json[node].frame.absolute 取实际值。
Figma 特征：
分析步骤：
UICollectionView + LeftAlignedFlowLayoutFigma 特征：
实现方式：
UISwitchUIControl + 动画| ❌ 错误（具体值） | ✅ 正确（模式） |
|---|---|
| 按钮宽度 68px | 宽度 = 容器宽度 / 按钮数量 - 间距 |
背景色 #FFF606 alpha 0.1 | 已选中背景 = 主题色 + 低透明度 |
字体 mk_f13_m() | 已选中字体 = 字号 + Medium 字重 |
不硬编码具体实现——从 Figma 实际数据提取，保持布局比例和相对关系。