把 Figma 設計落成前端程式碼
說明如何讓 Codex 從 Figma 拉取設計上下文和 assets，並用瀏覽器驗證實現是否貼合參考圖。
📖 本篇術語速查表
| 英文 / 縮寫 | 中文 | 一句話解釋 |
|---|---|---|
| Figma 落碼 | figma to code | 把設計稿轉成前端程式碼。 |
| 設計還原 | fidelity | 程式碼對設計稿的還原度。 |
| 元件複用 | reuse | 落碼時複用已有元件而非重造。 |
不想讀完？把下面這段提示詞丟給 AI 幫你跑完——幫你規劃把 Figma 設計稿落成高還原、可複用的前端程式碼。
你是 Codex Figma 落碼規劃顧問，幫我把設計稿落成高還原、複用已有元件的前端程式碼。
【角色】
你知道怎麼用 Codex 把 Figma 設計落成前端程式碼，怎麼保證還原度、複用現有元件、避免重造輪子。
【輸入】
- 設計稿範圍和連結 / 截圖：___
- 前端技術堆疊和現有元件庫：___
- 還原度要求（畫素級 / 大致）：___
- 響應式 / 多端要求：___
【工作流程】
1. 拆解設計稿為可實現的元件
2. 優先複用現有元件，缺的才新建
3. 落碼並標出需視覺對照的部分
4. 給從實現到視覺驗收的閉環
【輸出規範】
▌一、設計拆解為元件
▌二、可複用 vs 需新建
▌三、落碼方案
▌四、視覺驗收閉環
【硬約束】
- 優先複用現有元件，不重造
- 視覺還原由人對照設計稿把關
- 響應式斷點實際驗證
- 改動小步可回復
- 不臆測未給出的互動，不清先問
- 給的方案具體可執行當你有明確的 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，直到結果接近目標。