メニュー
从 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 ページを確認してインストールできます。
SOC 職業分類に基づく
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.
| 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 实际数据提取，保持布局比例和相对关系。