Need
设计来源
Default options
Why it's needed
选择具体的画框或组件，可确保实现以实际设计为依据。
Codex use case
将 Figma 设计转化为代码
结合结构化设计上下文和视觉检查，将 Figma 选区转化为精致的 UI。
Difficulty 中级
Time horizon 1 小时
使用 Codex 从 Figma 获取设计上下文、资源和变体，将其转化为符合代码仓库设计系统规范的代码，然后使用 Playwright 将实现与 Figma 参考设计进行比较并反复调整，直至视觉效果符合预期。
最适合
- 在现有代码库中实现 Figma 中已完成设计的屏幕或流程
- 希望 Codex 基于结构化设计上下文开展工作的团队
Contents
将 Figma 设计转化为代码
结合结构化设计上下文和视觉检查，将 Figma 选区转化为精致的 UI。
使用 Codex 从 Figma 获取设计上下文、资源和变体，将其转化为符合代码仓库设计系统规范的代码，然后使用 Playwright 将实现与 Figma 参考设计进行比较并反复调整，直至视觉效果符合预期。
中级
1 小时
技能与插件
- 将设计实现为代码，在已发布组件与源文件之间创建 Code Connect 映射，并生成项目专属的设计系统规则，以便重复开展从 Figma 到代码的实现工作。
- 检查响应式行为，并在真实浏览器中验证已实现的 UI。
| Skill | Why use it |
|---|---|
| Figma | 将设计实现为代码，在已发布组件与源文件之间创建 Code Connect 映射，并生成项目专属的设计系统规则，以便重复开展从 Figma 到代码的实现工作。 |
| Playwright | 检查响应式行为，并在真实浏览器中验证已实现的 UI。 |
入门提示
在当前项目中实现这个 Figma 设计时，请使用 Figma 技能。
要求：
- 首先针对确切的节点或画框运行 `get_design_context`。
- 如果响应被截断，请使用 `get_metadata` 梳理文件结构，然后仅针对所需节点重新运行 `get_design_context`。
- 开始编码前，针对确切的变体运行 `get_screenshot`。
- 复用现有的设计系统组件和 Token。
- 将 Figma 输出转化为此代码仓库所采用的工具类和组件模式，而不是另行构建一套并行系统。
- 让间距、布局、层级和响应式行为尽可能与设计保持一致。
- 遵循代码仓库的路由、状态和数据获取模式。
- 确保页面在桌面端和移动端都能自适应。
- 如果 Figma 返回 localhost 图像源或 SVG 源，请直接使用，不要创建占位内容或添加新的图标包。
验证：
- 从外观和行为两方面，将完成的 UI 与 Figma 参考设计进行比较。
- 使用 Playwright 检查 UI 是否与参考设计一致，并根据需要反复调整，直至匹配。
在当前项目中实现这个 Figma 设计时，请使用 Figma 技能。
要求：
- 首先针对确切的节点或画框运行 `get_design_context`。
- 如果响应被截断，请使用 `get_metadata` 梳理文件结构，然后仅针对所需节点重新运行 `get_design_context`。
- 开始编码前，针对确切的变体运行 `get_screenshot`。
- 复用现有的设计系统组件和 Token。
- 将 Figma 输出转化为此代码仓库所采用的工具类和组件模式，而不是另行构建一套并行系统。
- 让间距、布局、层级和响应式行为尽可能与设计保持一致。
- 遵循代码仓库的路由、状态和数据获取模式。
- 确保页面在桌面端和移动端都能自适应。
- 如果 Figma 返回 localhost 图像源或 SVG 源，请直接使用，不要创建占位内容或添加新的图标包。
验证：
- 从外观和行为两方面，将完成的 UI 与 Figma 参考设计进行比较。
- 使用 Playwright 检查 UI 是否与参考设计一致，并根据需要反复调整，直至匹配。
简介
当您在 Figma 中精确选定内容后，Codex 可以在遵循项目现有模式的同时，将其转化为精致的 UI。
通过 Figma 技能，Codex 可以使用 Figma MCP 服务器获取结构化设计上下文、变量、资源以及需要实现的确切变体。
通过 Playwright 交互式技能，Codex 可以在真实浏览器中打开应用，将实现与 Figma 参考设计进行比较，并反复调整布局或行为，使结果逐步接近目标。
设置 Figma 项目
Figma 文件越整洁，首次实现的效果就越好。为提高设计交接质量：
- 尽可能使用变量或设计 Token，尤其是颜色、排版和间距
- 为可复用的 UI 元素创建组件，而不是重复创建彼此独立的图层
- 尽可能使用自动布局，不要手动定位
- 为画框和图层使用清晰的名称，让人一眼就能识别主要屏幕、状态和变体
- 尽可能在文件中保留实际使用的图标和图像，以免 Codex 需要猜测
这些做法能为 Codex 提供更清晰的结构，使其实现稳健且可用于生产环境的 UI。
具体说明要求
您越具体地说明预期的交互模式和想要的样式，结果就越好。
如果某个状态、断点或交互很重要，请明确指出。如果文件包含多个相近的变体，请告诉 Codex 应以哪一个为准。
您越明确地说明哪些内容必须精确匹配、哪些地方应优先遵循代码仓库规范，Codex 就越容易做出恰当的取舍。
准备设计系统
目标代码仓库已有清晰的组件层时，Codex 的工作效果最佳。Codex 可以自动使用您现有的组件和设计系统，无需从头重新创建。
如果您认为有必要，请向 Codex 说明应复用哪些基础组件、Token 存放在哪里，以及代码仓库对按钮、输入框、卡片、排版和图标分别采用什么规范实现。
Figma MCP 输出通常看起来像 React 与 Tailwind 的组合；请将其视为结构参考，而不是最终的代码风格。请让 Codex 将该输出转化为项目实际采用的工具类、组件封装、颜色系统、排版层级、间距 Token、路由、状态管理和数据获取模式。
工作流程
从 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，并进一步修正仍然存在的视觉或交互差异。
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| 设计来源 | Figma | 选择具体的画框或组件，可确保实现以实际设计为依据。 |
