概览
使用 Codex 从 Figma 拉取设计上下文、资源和变体，将它们转换为符合仓库设计系统的代码，然后使用 Playwright 将实现结果与 Figma 参考进行比对，并持续迭代直到视觉效果正确。
适合场景
- 在现有代码库中实现已在 Figma 中设计好的界面或流程
- 希望 Codex 基于结构化设计上下文开展工作的团队
实现一个具备设计系统感知能力的 UI
使用 Figma skill 在当前项目中实现这个 Figma 设计。 要求： - 先对精确的节点或 frame 调用 `get_design_context`。 - 如果响应被截断，使用 `get_metadata` 映射文件，然后仅对所需节点重新调用 `get_design_context`。 - 在开始编码前，对精确变体运行 `get_screenshot`。 - 复用现有的设计系统组件和 tokens。 - 将 Figma 输出转换为此仓库中的工具类和组件模式，而不是另起一套并行系统。 - 尽量精确匹配间距、布局、层级和响应式行为。 - 遵循仓库现有的路由、状态和数据获取模式。 - 让页面在桌面端和移动端都具备响应式表现。 - 如果 Figma 返回 localhost 图片或 SVG 来源，请直接使用它们，不要创建占位内容，也不要添加新的图标包。 验证： - 将完成后的 UI 与 Figma 参考在视觉和行为两方面进行比较。 - 使用 Playwright 检查 UI 是否与参考一致，并根据需要持续迭代，直到匹配为止。
建议推理强度：中
简介
当你已经有一个精确的 Figma 选区时，Codex 可以将它转化为精致的 UI，同时不会忽略项目中已经建立好的模式。
借助 Figma skill，Codex 可以使用 Figma MCP server 拉取结构化设计上下文、变量、资源以及它需要实现的精确变体。
借助 Playwright 交互式 skill，Codex 可以在真实浏览器中打开应用，将实现结果与 Figma 参考进行比较，并反复调整布局或行为，直到结果更接近目标。
设置你的 Figma 项目
你的 Figma 文件越干净，首次实现的效果通常就越好。为了改善交接效果：
- 尽可能使用变量或设计 tokens，尤其是在颜色、排版和间距方面
- 为可复用的 UI 元素创建组件，而不是重复使用分离的图层
- 尽可能使用自动布局，而不是手动定位
- 保持 frame 和图层名称足够清晰，使主界面、状态和变体一目了然
- 尽可能在文件中保留真实图标和图片，这样 Codex 就不需要猜测
这能为 Codex 提供更好的结构，以便将其转换为稳健、可用于生产环境的 UI。
具体明确
你对期望的交互模式和想要的风格描述得越具体，结果通常就越好。
如果某个状态、断点或交互很重要，请明确指出。如果文件中包含多个相近变体，请告诉 Codex 哪一个应被视为事实标准。
你越清楚地说明哪些内容必须严格匹配，以及哪些地方应优先遵循仓库约定，Codex 就越容易做出正确的权衡。
准备设计系统
当目标仓库已经具有清晰的组件层时，Codex 的表现最好。Codex 可以自动使用你现有的组件和设计系统，而不是从头重新创建它们。
如果你认为有必要，请明确告诉 Codex 应复用哪些基础组件、你的 tokens 存放在哪里，以及仓库中按钮、输入框、卡片、排版和图标的规范标准是什么。
将 Figma MCP 输出（通常看起来像 React 加 Tailwind）视为结构参考，而不是最终代码风格。让 Codex 将该输出转换为项目实际使用的工具类、组件封装、颜色系统、排版比例、间距 tokens、路由、状态管理和数据获取模式。
工作流
从一个 Figma 选区开始
复制一个指向你想实现的精确 Figma frame、组件或变体的链接。Figma MCP 流程是基于链接的，因此该链接需要指向你想要的精确节点，而不是附近的父级 frame。
提示 Codex 使用 Figma
Figma 应该驱动第一轮实现。让 Codex 在开始实现之前先遵循 Figma MCP 流程。
可在提示词中包含的内容：
当第一版实现就位后，Codex 会使用 Playwright 在真实浏览器中验证 UI，并收紧任何剩余的视觉或交互不一致之处。