---
title: "把 Figma 设计落成前端代码"
description: "说明如何让 Codex 从 Figma 拉取设计上下文和 assets，并用浏览器验证实现是否贴合参考图。"
verifiedAt: "2026-05-06"
---

import { Cards, Card } from 'fumadocs-ui/components/card';

当你有明确的 Figma frame、component 或 variant 时，Codex 可以从 Figma 拉取结构化设计上下文、assets 和 variants，把它们翻译成符合当前 repo design system 的代码，再用 Playwright 在真实浏览器中对比实现和参考图。

> [!IMPORTANT]
> Figma 输出是结构化参考，不是生产代码。Codex 必须把它翻译成当前 repo 的组件、tokens、routing 和 state patterns，并用浏览器截图验证。

官方页面：[https://developers.openai.com/codex/use-cases/figma-designs-to-code](https://developers.openai.com/codex/use-cases/figma-designs-to-code)

## 适合什么任务

| 场景 | Codex 应该做什么 |
|---|---|
| 已经有 Figma 设计，需要落到现有 codebase | 从 exact node 获取 design context，再按 repo patterns 实现 |
| 团队希望 Codex 使用 structured design context | 通过 Figma MCP 获取变量、assets、variants 和截图 |
| 实现后需要视觉验证 | 用 `$playwright` 检查 responsive behavior 和真实 browser 效果 |

## 使用的能力

| 能力 | 用法 | 链接 |
|---|---|---|
| `figma` | 实现 Figma designs，创建 Code Connect mappings，并生成项目专属 design system rules | [https://github.com/openai/plugins/tree/main/plugins/figma](https://github.com/openai/plugins/tree/main/plugins/figma) |
| `$playwright` | 在真实 browser 中检查 responsive behavior，并验证 UI 是否接近 Figma reference | [https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive) |

相关官方说明：

- Codex skills：[https://developers.openai.com/codex/skills](https://developers.openai.com/codex/skills)
- Model Context Protocol：[https://developers.openai.com/codex/mcp](https://developers.openai.com/codex/mcp)
- Figma：[https://www.figma.com/](https://www.figma.com/)

## 起始提示词

```text
请使用 Figma skill，在当前项目中实现这个 Figma design。

要求：
- 先对准确的 node 或 frame 运行 `get_design_context`。
- 如果响应被截断，先用 `get_metadata` 映射文件，再只用 `get_design_context` 重新获取需要的 nodes。
- 写代码前，先对准确 variant 运行 `get_screenshot`。
- 复用现有 design system components 和 tokens。
- 把 Figma output 翻译成这个 repo 的 utilities 和 component patterns，不要另造一套平行系统。
- 尽量贴近 spacing、layout、hierarchy 和 responsive behavior。
- 尊重 repo 现有 routing、state 和 data-fetch patterns。
- 页面要同时适配 desktop 和 mobile。
- 如果 Figma 返回 localhost image 或 SVG sources，直接使用；缺失素材要标注缺口，不要虚构图片，也不要添加新的 icon packages。

验证：
- 对照 Figma reference 检查最终 UI 的外观和行为。
- 使用 Playwright 检查 UI 是否匹配 reference，并按需要迭代，直到匹配为止。
```

这个 prompt 的重点是 exact node、真实截图、复用现有 design system，以及 Playwright 验证。不要让 Codex 凭感觉重画一套 UI。

## 准备 Figma 文件

Figma 文件越干净，第一版实现越稳。交接前尽量做到：

- 使用 variables 或 design tokens，尤其是 colors、typography、spacing。
- 可复用 UI 做成 components，不要反复使用 detached layers。
- 尽量使用 auto layout，少用手工定位。
- frame 和 layer name 要能看出 screen、state 和 variants。
- 文件里保留真实 icons 和 images，减少 Codex 猜测。

这些结构能让 Codex 更容易翻译成生产可用的 UI。

## 说清楚匹配优先级

如果某个 state、breakpoint 或 interaction 重要，直接写出来。文件里有多个相近 variants 时，告诉 Codex 哪一个是 source of truth。

也要说清楚哪里必须严格匹配 Figma，哪里应该服从 repo conventions。比如：

- visual hierarchy 和 spacing 尽量贴近 Figma。
- buttons、inputs、cards、typography、icons 优先使用 repo 已有 primitives。
- routing、state management、data fetching 必须沿用项目现有模式。

## 准备 Design System

Codex 在目标 repo 已有 component layer 时效果最好。你可以告诉 Codex：

- primitives 在哪里。
- tokens 存在哪里。
- buttons、inputs、cards、typography、icons 的 canonical 用法是什么。

Figma MCP 输出经常看起来像 React + Tailwind，但它应该被当成 structural reference，而不是最终代码风格。让 Codex 把它翻译成项目真实的 utilities、component wrappers、color system、typography scale、spacing tokens、routing、state management 和 data-fetch patterns。

## Workflow

### 从准确的 Figma selection 开始

复制 exact frame、component 或 variant 的链接。Figma MCP flow 是 link-based，链接必须指向你要实现的准确 node，而不是附近的 parent frame。

### 让 Figma 驱动第一版

实现前，要求 Codex 先走 Figma MCP flow：

1. `get_design_context` 读取 exact node。
2. 如果返回被截断，用 `get_metadata` map file。
3. 再用 `get_design_context` 只抓需要的 nodes。
4. 用 `get_screenshot` 获取 exact variant reference。
5. 开始编码。

第一版完成后，让 Codex 用 Playwright 在真实浏览器里验证 UI，按 reference 调整 layout 和 behavior，直到结果接近目标。

## 接下来去哪

<Cards>
  <Card title="多端前端界面" description="Figma 实现后继续处理 desktop、mobile 和 responsive behavior。" href="/docs/codex/official/08-scenarios/96-multi-platform-ui" />
  <Card title="UI 精修" description="需要逐像素打磨 spacing、alignment、overflow 和状态细节。" href="/docs/codex/official/08-scenarios/107-ui-polish" />
  <Card title="浏览器游戏" description="需要 Playwright 和视觉验收时，可参考更强交互场景。" href="/docs/codex/official/08-scenarios/86-browser-game" />
  <Card title="官方 Figma use case" description="Figma plugin、MCP flow 和官方示例以官方页面为准。" href="https://developers.openai.com/codex/use-cases/figma-designs-to-code" />
</Cards>
