原文核对：2026-10-13 · 中文正文 · 英文提示词与演示
场景定位
从 Figma 获取设计上下文、素材和变体，转成符合仓库设计系统的代码，再用 Playwright 对照参考，迭代布局与交互。
- 难度
- 中级
- 时间跨度
- 1 小时
适合用于
- 在现有代码库中实现 Figma 已设计的页面或流程。
- 希望 Codex 使用结构化设计信息的团队。
相关工具
实现设计、建立已发布组件与源码之间的 Code Connect 映射，并生成项目专属设计系统规则。
Figma ↗在真实浏览器中检查响应式行为和实现的 UI。
Playwright ↗起步提示词
英文原文 · 可复制后按实际材料修改
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 选区后，Codex 可以实现精细 UI，同时遵循项目已有模式。
借助 Figma 技能和 Figma MCP 服务，获取结构化设计上下文、变量、素材及应实现的具体变体。
借助 Playwright interactive，在真实浏览器中对照 Figma 参考，持续调整布局或行为。
整理 Figma 项目
文件结构越清楚，首版实现越好。交接前建议：
- 尽可能使用变量或设计 token，尤其是颜色、字体和间距。
- 将可复用 UI 建成组件，避免重复的脱离组件图层。
- 尽量使用自动布局，而非手动定位。
- 清楚命名 frame 和图层，让主页面、状态和变体一目了然。
- 尽可能在文件中保留真实图标和图片，避免 Codex 猜测。
良好的结构有助于转成稳健、可用于生产的 UI。
明确要求
交互模式和期望风格描述得越具体，结果越好。
明确重要状态、断点和交互；多个相近变体并存时，指出以哪个为准。
说明哪些必须精确匹配、哪些优先遵循仓库约定，方便 Codex 正确取舍。
准备设计系统
仓库有清晰组件层时效果更好。Codex 可以直接复用组件和设计系统。
必要时说明基础组件、token 位置，以及按钮、输入框、卡片、字体和图标的标准实现。
Figma MCP 输出常类似 React 加 Tailwind，应视为结构参考。要求将其转成项目实际的工具类、组件封装、色彩、字号和间距体系、路由、状态管理及取数模式。
工作流程
从准确的 Figma 选区开始
复制目标 frame、组件或变体的链接。MCP 流程基于链接，必须指向准确节点，而不是附近的父 frame。
要求 Codex 使用 Figma
让 Figma 驱动首版实现，并要求编码前先遵循 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.首版完成后，用 Playwright 在真实浏览器中验证，并修正剩余的视觉或交互差异。
技术栈
| 需要 | 默认选项 | 用途 |
|---|---|---|
| 设计来源 | FigmaFigma ↗ | 准确的 frame 或组件选区，为实现提供明确依据。 |
展开英文原文对照
Use Codex to pull design context, assets, and variants from Figma, translate them into code that matches the repo's design system, then use Playwright to compare the implementation to the Figma reference and iterate until it looks right.
Introduction
When you have an exact Figma selection, Codex can turn it into polished UI without ignoring the patterns already established in your project.
With the Figma skill, Codex can use the Figma MCP server to pull structured design context, variables, assets, and the exact variant it should implement.
With the Playwright interactive skill, Codex can open the app in a real browser, compare the implementation to the Figma reference, and iterate on layout or behavior until the result is closer to the target.
Set up your Figma project
The cleaner your Figma file is, the better the first implementation will be. To improve the handoff:
- Use variables or design tokens wherever possible, especially for colors, typography, and spacing
- Create components for reusable UI elements instead of repeating detached layers
- Use auto layout as much as possible instead of manual positioning
- Keep frame and layer names clear enough that the main screen, state, and variants are obvious
- Keep real icons and images in the file when possible so Codex does not need to guess
This gives Codex better structure to translate into a robust, production-ready UI.
Be specific
The more specific you are about the expected interaction patterns and the style you want, the better the result will be.
If a state, breakpoint, or interaction matters, call it out. If the file contains multiple close variants, tell Codex which one should be treated as the source of truth.
The more explicit you are about what needs to match exactly and where repo conventions should win, the easier it is for Codex to make the right tradeoffs.
Prepare the design system
Codex works best when the target repo already has a clear component layer. Codex can automatically use your existing component and design system instead of recreating them from scratch.
If you think it’s necessary, specify to Codex which primitives to reuse, where your tokens live, and what the repo considers canonical for buttons, inputs, cards, typography, and icons.
Treat the Figma MCP output, which often looks like React plus Tailwind, as a structural reference rather than final code style. Ask Codex to translate that output into the project’s actual utilities, component wrappers, color system, typography scale, spacing tokens, routing, state management, and data-fetch patterns.
Workflow
Start from a Figma selection
Copy a link to the exact Figma frame, component, or variant you want implemented. The Figma MCP flow is link-based, so the link needs to point to the exact node you want rather than a nearby parent frame.
Prompt Codex to use Figma
Figma should drive the first pass. Ask Codex to follow the Figma MCP flow before it starts implementing.
Things to include in your prompt:
官方提示词
英文原文 · 可复制后按实际材料修改
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.Once the first implementation is in place, Codex will use Playwright to verify the UI in a real browser and tighten any remaining visual or interaction mismatches.