需求
设计来源
默认选项
为何需要它
具体的画框或组件选区能让实现更有理有据。
Codex 用例
将 Figma 设计转化为代码
借助结构化的设计上下文和视觉检查，将 Figma 选区转化为精致的 UI。
难度 中级
时间周期 1h
使用 Codex 从 Figma 获取设计上下文、资源和变体，将其转化为与代码库设计系统相匹配的代码，然后使用 Playwright 将实现效果与 Figma 参考设计进行比对并不断迭代，直到效果正确无误。
适用场景
- 在现有代码库中实现已在 Figma 中设计好的页面或流程
- 希望 Codex 基于结构化设计上下文开展工作的团队
目录
将 Figma 设计转化为代码
借助结构化的设计上下文和视觉检查，将 Figma 选区转化为精致的 UI。
使用 Codex 从 Figma 获取设计上下文、资源和变体，将其转化为与代码库设计系统相匹配的代码，然后使用 Playwright 将实现效果与 Figma 参考设计进行比对并不断迭代，直到效果正确无误。
中级
1h
技能与插件
- 用代码实现设计，在已发布的组件和源文件之间创建 Code Connect 映射，并为可重复的 Figma 到代码工作生成项目专属的设计系统规则。
- 检查响应式行为，并在真实的浏览器中验证已实现的 UI。
| 技能 | 为什么使用它 |
|---|---|
| Figma | 用代码实现设计，在已发布的组件和源文件之间创建 Code Connect 映射，并为可重复的 Figma 到代码工作生成项目专属的设计系统规则。 |
| Playwright | 检查响应式行为，并在真实的浏览器中验证已实现的 UI。 |
起始提示词
使用 Figma 技能在当前项目中实现该 Figma 设计。要求： - 首先对确切的节点或画框使用 `get_design_context`。 - 如果响应被截断，请使用 `get_metadata` 映射文件，然后仅使用 `get_design_context` 重新获取所需的节点。 - 在开始编写代码之前，针对确切的变体运行 `get_screenshot`。 - 复用现有的设计系统组件和令牌。 - 将 Figma 的输出转化为本代码库的工具类和组件模式，而不是另起炉灶创建一套平行系统。 - 精确匹配间距、布局、层级和响应式行为。 - 遵循代码库的路由、状态管理和数据获取模式。 - 使页面在桌面端和移动端均具备响应式布局。 - 如果 Figma 返回了 localhost 的图像或 SVG 源，请直接使用它们，不要创建占位符或添加新的图标包。 验证： - 将完成的 UI 与 Figma 参考设计进行外观和行为的比对。 - 使用 Playwright 检查 UI 是否与参考设计一致，并根据需要进行迭代，直到完全匹配。
使用 Figma 技能在当前项目中实现该 Figma 设计。要求： - 首先对确切的节点或画框使用 `get_design_context`。 - 如果响应被截断，请使用 `get_metadata` 映射文件，然后仅使用 `get_design_context` 重新获取所需的节点。 - 在开始编写代码之前，针对确切的变体运行 `get_screenshot`。 - 复用现有的设计系统组件和令牌。 - 将 Figma 的输出转化为本代码库的工具类和组件模式，而不是另起炉灶创建一套平行系统。 - 精确匹配间距、布局、层级和响应式行为。 - 遵循代码库的路由、状态管理和数据获取模式。 - 使页面在桌面端和移动端均具备响应式布局。 - 如果 Figma 返回了 localhost 的图像或 SVG 源，请直接使用它们，不要创建占位符或添加新的图标包。 验证： - 将完成的 UI 与 Figma 参考设计进行外观和行为的比对。 - 使用 Playwright 检查 UI 是否与参考设计一致，并根据需要进行迭代，直到完全匹配。
简介
当你拥有确切的 Figma 选区时，Codex 可以将其转化为精致的 UI，同时完美保留项目中已有的模式。
借助 Figma 技能，Codex 可以使用 Figma MCP 服务器提取结构化的设计上下文、变量、资源以及需要实现的确切变体。
借助 Playwright 交互技能，Codex 可以在真实浏览器中打开应用，将实现效果与 Figma 参考设计进行比对，并对布局或行为进行迭代，直到结果更接近目标。
设置你的 Figma 项目
你的 Figma 文件整理得越干净，首次实现的效果就越好。为了优化交接：
- 尽可能使用变量或设计令牌，尤其是颜色、排版和间距方面
- 为可复用的 UI 元素创建组件，而不是重复使用未封装的图层
- 尽可能使用自动布局，而不是手动定位
- 保持画框和图层名称清晰，以便明确区分主屏幕、状态和变体
- 尽可能在文件中保留真实的图标和图像，这样 Codex 就不需要去猜测
这为 Codex 提供了更好的结构，从而将其转化为稳健且可用于生产环境的 UI。
具体明确
你对预期的交互模式和所需样式的描述越具体，最终结果就越好。
如果某个状态、断点或交互很重要，请明确指出。如果文件中包含多个相似的变体，请告诉 Codex 应该将哪一个视为事实标准。
你越是明确指出哪些部分需要精确匹配、哪些部分应遵循代码库的约定，Codex 就越容易做出正确的权衡。
准备设计系统
当目标代码库已经具备清晰的组件层时，Codex 的表现最佳。Codex 可以自动使用你现有的组件和设计系统，而不是从头开始重建。
如果你认为有必要，请向 Codex 指明要复用的基础组件、令牌所在的位置，以及代码库中关于按钮、输入框、卡片、排版和图标的规范标准。
将 Figma MCP 的输出（通常看起来像 React 加 Tailwind）视为结构参考，而不是最终的代码风格。要求 Codex 将该输出转化为项目实际使用的工具函数、组件封装、颜色系统、排版比例、间距令牌、路由、状态管理和数据获取模式。
工作流
从 Figma 选区开始
复制指向你想要实现的确切 Figma 画框、组件或变体的链接。Figma MCP 流程是基于链接的，因此链接需要直接指向你想要的节点，而不是附近的父级画框。
提示 Codex 使用 Figma
Figma 应该主导第一次实现。要求 Codex 在开始实现之前先遵循 Figma MCP 流程。
在你的提示中应包含以下内容：
1. 首先对确切的节点或画框运行 `get_design_context`。 2. 如果响应过大或被截断，请运行 `get_metadata` 映射文件，然后仅对你需要的节点重新运行 `get_design_context`。 3. 针对要实现的确切变体运行 `get_screenshot`。 4. 只有在同时获取了设计上下文和确切的变体之后，才下载所需的资源并开始实现。 5. 将结果转化为代码库的约定：复用现有组件，尽可能用项目的系统替换原始的工具类，并保持间距、层级和响应式行为与设计保持一致。 6. 如果 Figma 返回了 localhost 的图像或 SVG 源，请直接使用。当资源已存在于载荷中时，不要创建占位符或添加新的图标包。
一旦初步实现完成，Codex 将使用 Playwright 在真实的浏览器中验证 UI，并修正任何剩余的视觉或交互差异。
技术栈
需求
默认选项
为何需要它
| 需求 | 默认选项 | 为何需要它 |
|---|---|---|
| 设计来源 | Figma | 具体的画框或组件选区能让实现更有理有据。 |
