VibePieVibePie
前端与产品开发进阶官方难度：Intermediate1h
原题：Turn Figma designs into code

用 Codex 把 Figma 设计稿转成前端代码

把设计稿里的结构和意图落到已有项目，而不是重新做一套页面。

官方概览

当你有一个准确的 Figma 选区时，Codex 可以把它转换成精致的 UI，同时不忽略项目里已经建立好的模式。

通过 Figma skill，Codex 可以使用 Figma MCP server 拉取结构化设计上下文、变量、资产，以及需要实现的准确变体。

再配合 Playwright interactive skill，Codex 可以在真实浏览器中对比实现结果和 Figma 参考，并持续调整布局或行为。

整理 Figma 文件

Figma 文件越干净，第一次实现就越接近目标。良好的设计交接会给 Codex 更多结构信息，让它能转译成更健壮、可用于生产的 UI。

  • 尽量使用变量或设计 token，尤其是颜色、字体和间距。
  • 把可复用 UI 做成组件，而不是重复的散层。
  • 尽量使用 auto layout，减少手动定位。
  • 保持 frame 和图层命名清晰，让主屏、状态和变体容易识别。
  • 尽量在文件中保留真实图标和图片，减少 Codex 猜测资产的空间。

明确匹配边界

预期的交互模式和视觉风格说得越具体，结果越好。如果某个状态、断点或交互很重要，要明确指出。

如果文件里有多个相近变体，告诉 Codex 哪一个才是准绳。你越清楚地说明哪些地方必须完全匹配、哪些地方应该服从仓库约定，Codex 越容易做出正确取舍。

推荐工作流

复制准确 Figma frame、组件或变体的链接。Figma MCP 流程基于链接工作，所以链接应该指向要实现的准确节点，而不是附近的父级。

Figma 应该驱动第一版实现。要求 Codex 在开始编码前先完成 Figma MCP 流程。

  1. 1先对准确节点或 frame 运行 get_design_context。
  2. 2如果响应过大或被截断，运行 get_metadata 映射文件，再只对需要的节点重新获取上下文。
  3. 3对要实现的准确变体运行 get_screenshot。
  4. 4只有在拿到设计上下文和准确截图后，才下载必要资产并开始实现。
  5. 5把结果翻译成仓库约定：复用现有组件，尽量用项目系统替代原始工具类，并保持间距、层级和响应式行为。
  6. 6如果 Figma 返回 localhost 图片或 SVG 来源，直接使用，不要用占位图，也不要另加图标包。

官方 Starter Prompt 中文翻译

请使用 Figma skill，把这个 Figma 设计实现在当前项目中。

要求：
- 先对准确的节点或 frame 运行 get_design_context。
- 如果响应被截断，使用 get_metadata 映射文件，然后只对需要的节点重新运行 get_design_context。
- 开始编码前，对准确的变体运行 get_screenshot。
- 复用现有设计系统组件和 token。
- 把 Figma 输出转换成这个仓库的工具类和组件模式，不要另起一套并行系统。
- 尽量贴近间距、布局、层级和响应式行为。
- 遵守仓库已有的路由、状态管理和数据获取模式。
- 让页面同时适配桌面端和移动端。
- 如果 Figma 返回 localhost 图片或 SVG 来源，直接使用它们，不要创建占位图，也不要新增图标包。

验证：
- 对照 Figma 参考检查最终 UI 的观感和行为。
- 使用 Playwright 检查 UI 是否匹配参考，并按需要迭代，直到结果足够接近。