场景定位
让 Codex 从 Figma 抽取结构化设计上下文、资源和具体变体，把它们转成符合仓库设计系统的代码，再用 Playwright 对照参考图迭代到更接近目标。
- 难度
- 中级
- 时间跨度
- 约 1 小时
适合用于
- 在现有代码库中实现已经设计好的 Figma 页面或流程
- 希望 Codex 从结构化设计上下文出发工作的团队
Skills & Plugins
相关工具
Starter 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 selection 时，Codex 可以把它转成 polished UI，同时不忽略项目里已经建立好的模式。
通过 Figma skill，Codex 能使用 Figma MCP server 抽取结构化设计上下文、variables、assets 和应该实现的精确 variant。
通过 Playwright interactive skill，Codex 能在真实浏览器中打开应用，对照 Figma 参考并迭代 layout 或行为，让结果更接近目标。
设置你的 Figma 项目
Figma 文件越干净，第一次实现越好。清晰结构让 Codex 更容易转成稳健、接近生产质量的 UI。
- 尽可能使用 variables 或 design tokens，尤其是颜色、排版和间距。
- 为可复用 UI 元素创建 components，而不是重复 detached layers。
- 尽可能使用 auto layout，而不是手动定位。
- 保持 frame 和 layer 名称足够清楚，让主屏、状态和变体一眼可见。
- 尽可能保留真实 icon 和 image，避免 Codex 只能猜测。
具体说明目标
你对预期交互模式和风格越具体，结果越好。
如果某个状态、断点或交互很重要，就明确指出。如果文件里有多个相近变体，告诉 Codex 哪一个是 source of truth。
越清楚说明哪些地方必须精确匹配、哪些地方仓库约定优先，Codex 越容易做出正确取舍。
准备设计系统
当目标仓库已经有清晰组件层时，Codex 表现最好。它可以自动使用现有 component 和 design system，而不是重新造一套。
必要时，告诉 Codex 应复用哪些 primitives、tokens 在哪里，以及仓库对 buttons、inputs、cards、typography 和 icons 的 canonical 规则。
Figma MCP 输出通常看起来像 React 加 Tailwind，应把它当成结构参考，而不是最终代码风格。让 Codex 把输出翻译成项目真实的 utilities、component wrappers、color system、typography scale、spacing tokens、routing、state management 和 data-fetch 模式。
工作流
从精确 Figma selection 开始：复制你要实现的 frame、component 或 variant 链接。Figma MCP 流程是 link-based，所以链接要指向精确 node，而不是附近的父级 frame。
然后要求 Codex 使用 Figma：先走 Figma MCP 流程，再开始实现。prompt 里写清目标 node、要支持的状态、响应式断点、必须匹配的部分和仓库约定优先的部分。
第一版实现完成后，让 Codex 用 Playwright 在真实浏览器中验证 UI，并收紧剩余的视觉或交互差异。
技术栈
具体 frame 或 component selection 能让实现保持在明确参考上。