Codex 官方教程，教你将 Figma 设计转为代码

Codex 最近发布了官方教程，详细说明了如何将 Figma 的设计转化为精致的 UI。

话不多说，下面是需要用到的 Skill、Plugin 以及 Prompt 模板。大家可以直接在项目中使用：

Skill & Plugin

• Figma：通过代码实现设计界面，在已发布的组件与源文件之间建立 Code Connect 映射，并为项目中那些复用率极高的“设计转代码”流水线生成专门的专属规则。
• Playwright：在真实的浏览器中实际校验响应式行为及最终的渲染界面。

Prompt 模板

Implement this Figma design in the current project using the Figma skill.

Requirements:

- Start with `get_design_context` for the exact node or frame.
- If the response is truncated, use `get_metadata` to map the file and then re-fetch only the needed nodes with `get_design_context`.
- Run `get_screenshot` for the exact variant before you start coding.
- Reuse the existing design system components and tokens.
- Translate the Figma output into this repo's utilities and component patterns instead of inventing a parallel system.
- Match spacing, layout, hierarchy, and responsive behavior closely.
- Respect the repo's routing, state, and data-fetch patterns.
- Make the page responsive on desktop and mobile.
- If Figma returns localhost image or SVG sources, use them directly and do not create placeholders or add new icon packages.

Validation:

- Compare the finished UI against the Figma reference for both look and behavior.
- Use Playwright to check that the UI matches the reference and iterate as needed until it does.

<!-- 翻译 -->

使用 Figma Skill 将此 Figma 设计应用到当前项目中。

要求：

- 首先使用 `get_design_context` 获取确切的节点或帧。
- 如果响应被截断，请使用 `get_metadata` 映射文件，然后使用 `get_design_context` 重新获取所需的节点。
- 在开始编写代码之前，请先运行 `get_screenshot` 获取确切的屏幕截图。
- 重用现有的设计系统组件和标记。
- 将 Figma 输出转换为此存储库的实用程序和组件模式，而不是发明一个并行系统。
- 间距、布局、层级和响应行为要紧密匹配。
- 尊重仓库的路由、状态和数据获取模式。
- 使页面在桌面和移动设备上都能响应。
- 如果 Figma 返回本地主机图像或 SVG 源，请直接使用它们，不要创建占位符或添加新的图标包。

验证：

- 将最终的 UI 与 Figma 参考图进行比较，包括外观和行为。
- 使用 Playwright 检查 UI 是否与参考文档匹配，并根据需要进行迭代，直到匹配为止。

说明

这套 Prompt 模板包含的内容其实很简单：

1. 确定 Figma 中的目标元素。
2. 提取上下文。借助 Figma Skill，Codex 会通过 Figma MCP 服务器提取结构化的设计上下文、变量、资源以及组件的不同变体。
3. 检验结果。配合 Playwright 的交互能力，Codex 可以在真实浏览器中打开应用，把实现效果和 Figma 参考稿进行对比，并反复调整布局或行为，直到结果足够接近目标。

为了尽可能还原设计，得到最好的交付效果，除了使用上述技能插件和 Prompt 模板，Codex 还补充了以下注意事项：

1. 规范 Figma 项目

Figma 文件越简洁，首次实现的效果就越好。为了优化最终的交付效果，你可以：

• 尽可能使用变量或设计标记，尤其是在颜色、字体和间距等规范上。
• 尽量创建可重用的 UI 元素组件。
• 尽可能使用自动布局（Auto Layout），而非手动拖拽排版。
• 保持帧和图层名称清晰明了，使主屏幕、状态和变体一目了然。
• 尽可能在文件中保留真实的图标和图像，这能帮 Codex 省掉大量毫无意义的搜索猜测。

2. 给出明确指引

对预期交互模式和想要的风格描述得越具体，结果就会越好。

• 如果某个状态或交互至关重要，一定要明确指出。
• 如果文件包含多个近似变体，告诉 Codex 哪一个才是最终的版本。

你越是明确哪些地方必须完全一致、哪些地方可以按代码库的规范来，Codex 就越容易做出正确的取舍。

3. 规范设计系统

当目标代码库已经有清晰的组件层时，Codex 会自动使用你现有的组件和设计系统，而不是从头造轮子。

如果有必要，你可以明确告诉 Codex

• 要复用哪些基础元素
• 你的设计 token 放在哪里
• 项目中对于按钮、输入框、卡片、文字排版和图标的规范是什么

把 Figma MCP 输出的内容（通常是 React + Tailwind）当作结构参考。这些代码或许不能直接使用，但却是非常好的信息传递方式。直接喂给 Codex，Codex 会把它转成项目实际使用的工具类、组件封装、颜色体系、字体比例、间距标记、路由、状态管理和数据获取方式。

完整工作流

1. 选中 Figma 节点

先把你需要实现的具体的某个目标画板、组件、或是变体对象的链接丢给 Codex。Figma MCP 工作流全靠这个链接指路，所以最好一步到位指向目标节点本身，不要随便丢一个模糊的父级画板链接。

2. 引导 Codex 使用 Figma

整个流程应该由 Figma 把控节奏。

在真正写代码之前，先让 Codex 按顺序调用 Figma MCP 的接口。

你可以把下面的步骤作为提示词的一部分：

1. Run `get_design_context` for the exact node or frame first.
2. If the response is too large or truncated, run `get_metadata` to map the file and then re-run `get_design_context` only for the nodes you need.
3. Run `get_screenshot` for the exact variant being implemented.
4. Only after both the design context and the exact variant are available, download any required assets and start implementation.
5. Translate the result into the repo's conventions: reuse existing components, replace raw utility classes with the project's system when possible, and keep spacing, hierarchy, and responsive behavior aligned with the design.
6. If Figma returns a localhost image or SVG source, use it directly. Do not create placeholders or add a new icon package when the asset is already in the payload.

<!-- 翻译 -->

7. 首先对确切的节点或帧运行 `get_design_context`。
8. 如果响应太大或被截断，请运行 `get_metadata` 来映射文件，然后仅针对所需的节点重新运行 `get_design_context`。
9. 对正在实现的具体变体运行 `get_screenshot`。
10. 只有在设计背景和确切的变体都确定之后，才能下载所需的任何资源并开始实施。
11. 将结果转换为仓库的约定：重用现有组件，尽可能用项目的系统替换原始实用程序类，并保持间距、层次结构和响应行为与设计保持一致。
12. 如果 Figma 返回的是本地图像或 SVG 源文件，请直接使用。如果资源已存在于有效负载中，请勿创建占位符或添加新的图标包。

第一个版本实现之后，Codex 就会使用 Playwright 在真实浏览器中验证 UI，并解决与视觉或交互不匹配问题。

随着 Figma 设计规范的持续优化 and Codex 对设计系统的理解不断加深，未来“设计即代码”会越来越接近现实。

现在，这套官方教程就是你上路最好的起点。