메뉴
Phase 4 visual fidelity check. Read the pre-fetched screenshot.png in the data package, compare it visually against generated code, and emit a difference report. Use after iOS code generation to confirm visual fidelity.
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-screenshot-verification |
| description | Phase 4 visual fidelity check. Read the pre-fetched screenshot.png in the data package, compare it visually against generated code, and emit a difference report. Use after iOS code generation to confirm visual fidelity. |
代码生成完成后必须执行；用户明确写「无需比对」时方可豁免（须在回复注明）。
视觉比对天然存在盲区：截图能验"画得对不对"，但验不出"少画了什么"——少了一整个区块时，剩下的区块视觉上仍可能"看起来挺对"，造成假阳性的"基本对齐"判断。
因此进入视觉比对之前，必须先完成 figma-ios-commercial-delivery §0「节点覆盖率对账」 并满足以下任一：
figma-ios-codegen-workflow §「全量还原原则」「唯一允许的简化场景」三类，且每条已注明依据如果节点覆盖率不达标：
禁止反模式：
{data_dir}/screenshot.png（figma-ios-preload-data 阶段 1 已下载）{data_dir}/design.json（用于核对颜色/字体/尺寸等"事实值"）不再调用 MCP
get_screenshot或自行截图。
| 维度 | 检查要点 | 常见问题 |
|---|---|---|
| 整体布局 | 各区块位置、间距、对齐 | 层级拍平、坐标偏移、漏渲染 |
| 导航栏 | 标题/按钮/高度/背景 | 高度 44 vs 88 弄错 |
| 颜色 | 背景/文字/边框 | 绕过 color_map / 未用 fallback |
| 字体/字重 | 字号、粗细 | Regular/Medium 混淆 |
| 切图 | 位图位置/比例 | imageset 未拷或路径错 |
| iconfont | 图标类型/尺寸/颜色 | 用了错误的 symbol |
| 底部安全区 | 吸底按钮 | 被 Home Indicator 遮挡 |
| 状态切换 | 选中/未选中视觉差异 | 未实现 updateAppearance() |
## 视觉还原比对报告
### ✅ 一致项
- 整体布局：与设计稿一致
- 导航栏：高度用 host.utils.status_bar_nav_height，标题居中
- 颜色：背景 `MKUIStyle.mk_c10()`、文字 `MKUIStyle.mk_c2()`（以 color_map 为准）
- iconfont：查 iconfont_map.json，与稿一致
### ⚠️ 差异项（已处置）
- 「步骤标签」字号：稿 16px，代码生成时取 design.json 实测 14px。已按数据包为准。
- 圆角：图层 1:289 在截图上看似 16，design.json corner_radius=16，已对齐。
### ❌ 无法还原项
- 渐变文字（bg-clip-text + transparent）：UIKit 不原生支持，已用 CAGradientLayer + mask 模拟（轻微差异）
- 服务器下发图片：mock 占位，实际由业务接口注入
| 差异类型 | 处置 |
|---|---|
| 代码 bug（颜色/坐标写错） | 立即修复，重新比对 |
| 数据包字段与截图冲突 | 以数据包为准（已固化优先级），在报告中说明 |
| 技术限制（MeshGradient 等） | 若有切图则用 imageset；无则代码近似 + 报告说明 |
| 动态内容 | 占位 + 注释说明注入点 |
{data_dir}/screenshot.png