Claude×Codex×Figma：用设计系统训练 AI，再出可上线界面

按下列步骤跟练；敏感操作默认人工批准。

方法要点

1. 先弄清 Figma 内 AI 能做什么，再决定外挂 Claude / Codex。
2. 组件、变量、样式进 Context，禁止无系统随机屏。
3. 生成 → 质量评审 → 迭代。
4. 控制多工具切换时的上下文浪费。
5. 空态 / 加载 / 错误态必须进验收。

步骤 1 · 盘点设计系统（可粘贴摘要）

列出核心组件名、色板/变量、字号阶梯、栅格；写成 {{DS_SUMMARY}}。
完成标志：一份 ≤1 页的系统摘要，含真实组件名。

步骤 2 · 写清屏幕任务与成功指标

产品、用户任务、成功指标（如完成率相关行为）写入 {{PRODUCT}} / {{SCREEN}} / {{METRICS_OR_USER_JOB}}。
完成标志：一句话能说清「这屏为谁解决什么」。

步骤 3 · 一次要 3 个方向

粘贴下文出屏 Prompt；要求 mobile-first、只用现有组件、AA；并点名空态/加载/错误。
完成标志：3 个方向 + 1 个推荐默认方案。

步骤 4 · 选默认方案并在 Figma 用真组件搭

不要停在对话里的「假高保真」；画布上替换为库内组件。
完成标志：Figma 画布可见真实组件实例。

步骤 5 · 跑评审 Prompt

把屏幕说明贴进评审块：间距/字体、缺失状态、组件误用 → Must / Should / Nice。
完成标志：有按严重度排序的 punch-list。

步骤 6 · 迭代到可开发

标注 token、断点、交互红线；少换模型，避免上下文丢失。
完成标志：工程可按标注开工。

截图位：① 系统摘要/变量 ② 三方向对比 ③ 评审 punch-list。