把 Figma 設計落成前端程式碼
說明如何讓 Codex 從 Figma 拉取設計上下文和 assets，並用瀏覽器驗證實現是否貼合參考圖。
當你有明確的 Figma frame、component 或 variant 時，Codex 可以從 Figma 拉取結構化設計上下文、assets 和 variants，把它們翻譯成符合當前 repo design system 的程式碼，再用 Playwright 在真實瀏覽器中對比實現和參考圖。
Figma 輸出是結構化參考，不是生產程式碼。Codex 必須把它翻譯成當前 repo 的元件、tokens、routing 和 state patterns，並用瀏覽器截圖驗證。
官方頁面：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 |
$playwright | 在真實 browser 中檢查 responsive behavior，並驗證 UI 是否接近 Figma reference | https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive |
相關官方說明：
- Codex skills：https://developers.openai.com/codex/skills
- Model Context Protocol：https://developers.openai.com/codex/mcp
- Figma：https://www.figma.com/
起始提示詞
请使用 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：
get_design_context讀取 exact node。- 如果返回被截斷，用
get_metadatamap file。 - 再用
get_design_context只抓需要的 nodes。 - 用
get_screenshot獲取 exact variant reference。 - 開始編碼。
第一版完成後，讓 Codex 用 Playwright 在真實瀏覽器裡驗證 UI，按 reference 調整 layout 和 behavior，直到結果接近目標。