把 Figma 设计落成前端代码
说明如何让 Codex 从 Figma 拉取设计上下文和 assets，并用浏览器验证实现是否贴合参考图。
📖 本篇术语速查表
| 英文 / 缩写 | 中文 | 一句话解释 |
|---|---|---|
| Figma 落码 | figma to code | 把设计稿转成前端代码。 |
| 设计还原 | fidelity | 代码对设计稿的还原度。 |
| 组件复用 | reuse | 落码时复用已有组件而非重造。 |
不想读完？把下面这段提示词丢给 AI 帮你跑完——帮你规划把 Figma 设计稿落成高还原、可复用的前端代码。
你是 Codex Figma 落码规划顾问，帮我把设计稿落成高还原、复用已有组件的前端代码。
【角色】
你知道怎么用 Codex 把 Figma 设计落成前端代码，怎么保证还原度、复用现有组件、避免重造轮子。
【输入】
- 设计稿范围和链接 / 截图：___
- 前端技术栈和现有组件库：___
- 还原度要求（像素级 / 大致）：___
- 响应式 / 多端要求：___
【工作流程】
1. 拆解设计稿为可实现的组件
2. 优先复用现有组件，缺的才新建
3. 落码并标出需视觉对照的部分
4. 给从实现到视觉验收的闭环
【输出规范】
▌一、设计拆解为组件
▌二、可复用 vs 需新建
▌三、落码方案
▌四、视觉验收闭环
【硬约束】
- 优先复用现有组件，不重造
- 视觉还原由人对照设计稿把关
- 响应式断点实际验证
- 改动小步可回滚
- 不臆测未给出的交互，不清先问
- 给的方案具体可执行当你有明确的 Figma frame、component 或 variant 时，Codex 可以从 Figma 拉取结构化设计上下文、assets 和 variants，把它们翻译成符合当前 repo design system 的代码，再用 Playwright 在真实浏览器中对比实现和参考图。
Figma 输出是结构化参考，不是生产代码。Codex 必须把它翻译成当前 repo 的组件、tokens、routing 和 state patterns，并用浏览器截图验证。
官方页面：https://developers.openai.com/codex/use-cases/figma-designs-to-code
适合什么任务
| 场景 | Codex 应该做什么 |
|---|---|
| 已经有 Figma 设计，需要落到现有 codebase | 从 exact node 获取 design context，再按 repo patterns 实现 |
| 团队希望 Codex 使用 structured design context | 通过 Figma MCP 获取变量、assets、variants 和截图 |
| 实现后需要视觉验证 | 用 $playwright 检查 responsive behavior 和真实 browser 效果 |
使用的能力
| 能力 | 用法 | 链接 |
|---|---|---|
figma | 实现 Figma designs，创建 Code Connect mappings，并生成项目专属 design system rules | https://github.com/openai/plugins/tree/main/plugins/figma |
$playwright | 在真实 browser 中检查 responsive behavior，并验证 UI 是否接近 Figma reference | https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive |
相关官方说明：
- Codex skills：https://developers.openai.com/codex/skills
- Model Context Protocol：https://developers.openai.com/codex/mcp
- Figma：https://www.figma.com/
起始提示词
请使用 Figma skill，在当前项目中实现这个 Figma design。
要求：
- 先对准确的 node 或 frame 运行 `get_design_context`。
- 如果响应被截断，先用 `get_metadata` 映射文件，再只用 `get_design_context` 重新获取需要的 nodes。
- 写代码前，先对准确 variant 运行 `get_screenshot`。
- 复用现有 design system components 和 tokens。
- 把 Figma output 翻译成这个 repo 的 utilities 和 component patterns，不要另造一套平行系统。
- 尽量贴近 spacing、layout、hierarchy 和 responsive behavior。
- 尊重 repo 现有 routing、state 和 data-fetch patterns。
- 页面要同时适配 desktop 和 mobile。
- 如果 Figma 返回 localhost image 或 SVG sources，直接使用；缺失素材要标注缺口，不要虚构图片，也不要添加新的 icon packages。
验证：
- 对照 Figma reference 检查最终 UI 的外观和行为。
- 使用 Playwright 检查 UI 是否匹配 reference，并按需要迭代，直到匹配为止。这个 prompt 的重点是 exact node、真实截图、复用现有 design system，以及 Playwright 验证。不要让 Codex 凭感觉重画一套 UI。
准备 Figma 文件
Figma 文件越干净，第一版实现越稳。交接前尽量做到：
- 使用 variables 或 design tokens，尤其是 colors、typography、spacing。
- 可复用 UI 做成 components，不要反复使用 detached layers。
- 尽量使用 auto layout，少用手工定位。
- frame 和 layer name 要能看出 screen、state 和 variants。
- 文件里保留真实 icons 和 images，减少 Codex 猜测。
这些结构能让 Codex 更容易翻译成生产可用的 UI。
说清楚匹配优先级
如果某个 state、breakpoint 或 interaction 重要，直接写出来。文件里有多个相近 variants 时，告诉 Codex 哪一个是 source of truth。
也要说清楚哪里必须严格匹配 Figma，哪里应该服从 repo conventions。比如：
- visual hierarchy 和 spacing 尽量贴近 Figma。
- buttons、inputs、cards、typography、icons 优先使用 repo 已有 primitives。
- routing、state management、data fetching 必须沿用项目现有模式。
准备 Design System
Codex 在目标 repo 已有 component layer 时效果最好。你可以告诉 Codex：
- primitives 在哪里。
- tokens 存在哪里。
- buttons、inputs、cards、typography、icons 的 canonical 用法是什么。
Figma MCP 输出经常看起来像 React + Tailwind，但它应该被当成 structural reference，而不是最终代码风格。让 Codex 把它翻译成项目真实的 utilities、component wrappers、color system、typography scale、spacing tokens、routing、state management 和 data-fetch patterns。
Workflow
从准确的 Figma selection 开始
复制 exact frame、component 或 variant 的链接。Figma MCP flow 是 link-based，链接必须指向你要实现的准确 node，而不是附近的 parent frame。
让 Figma 驱动第一版
实现前，要求 Codex 先走 Figma MCP flow：
get_design_context读取 exact node。- 如果返回被截断，用
get_metadatamap file。 - 再用
get_design_context只抓需要的 nodes。 - 用
get_screenshot获取 exact variant reference。 - 开始编码。
第一版完成后，让 Codex 用 Playwright 在真实浏览器里验证 UI，按 reference 调整 layout 和 behavior，直到结果接近目标。