---
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="/zh-Hant/docs/codex/official/08-scenarios/96-multi-platform-ui" />
  <Card title="UI 精修" description="需要逐畫素打磨 spacing、alignment、overflow 和狀態細節。" href="/zh-Hant/docs/codex/official/08-scenarios/107-ui-polish" />
  <Card title="瀏覽器遊戲" description="需要 Playwright 和視覺驗收時，可參考更強互動場景。" href="/zh-Hant/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>
