Need
設計來源
Default options
Why it's needed
選取明確的框架或元件，可讓實作有具體依據。
Codex use case
將 Figma 設計轉換為程式碼
運用結構化設計上下文與視覺檢查，將 Figma 選取項目轉化為完善的 UI。
Difficulty 中級
Time horizon 1 小時
使用 Codex 從 Figma 擷取設計上下文、素材和變體，將其轉換成符合程式碼庫設計系統的程式碼，再以 Playwright 比較實作結果與 Figma 參考設計，並反覆調整，直到外觀符合預期。
最適合
- 在現有程式碼庫中實作已於 Figma 完成設計的畫面或流程
- 希望 Codex 能依據結構化設計上下文進行開發的團隊
Contents
將 Figma 設計轉換為程式碼
運用結構化設計上下文與視覺檢查，將 Figma 選取項目轉化為完善的 UI。
使用 Codex 從 Figma 擷取設計上下文、素材和變體，將其轉換成符合程式碼庫設計系統的程式碼，再以 Playwright 比較實作結果與 Figma 參考設計，並反覆調整，直到外觀符合預期。
中級
1 小時
技能與外掛程式
- 以程式碼實作設計、建立已發佈元件與原始檔之間的 Code Connect 對應關係，並產生專案專屬的設計系統規則，讓 Figma 轉程式碼的作業可重複進行。
- 檢查回應式行為，並在實際瀏覽器中驗證實作後的 UI。
| Skill | Why use it |
|---|---|
| Figma | 以程式碼實作設計、建立已發佈元件與原始檔之間的 Code Connect 對應關係，並產生專案專屬的設計系統規則，讓 Figma 轉程式碼的作業可重複進行。 |
| Playwright | 檢查回應式行為，並在實際瀏覽器中驗證實作後的 UI。 |
起始提示詞
請在目前專案中實作這份 Figma 設計，並使用 Figma 技能。
需求：
- 請先對確切的節點或框架執行 `get_design_context`。
- 若回應遭截斷，請使用 `get_metadata` 掌握檔案結構，再使用 `get_design_context` 只重新擷取所需節點。
- 開始撰寫程式碼前，請對確切變體執行 `get_screenshot`。
- 重複使用現有的設計系統元件與 Token。
- 請將 Figma 輸出轉換成符合此程式碼庫所用工具類別與元件模式的實作，不要另起一套系統。
- 讓間距、版面配置、層級和回應式行為盡可能貼近設計。
- 遵循程式碼庫的路由、狀態和資料擷取模式。
- 讓頁面在桌面與行動裝置上都能回應式呈現。
- 若 Figma 傳回 localhost 圖像或 SVG 來源，請直接使用，不要建立預留位置或新增圖示套件。
驗證：
- 從外觀與行為兩方面，將完成的 UI 與 Figma 參考設計比較。
- 使用 Playwright 檢查 UI 是否與參考設計一致，並視需要反覆調整，直到一致為止。
請在目前專案中實作這份 Figma 設計，並使用 Figma 技能。
需求：
- 請先對確切的節點或框架執行 `get_design_context`。
- 若回應遭截斷，請使用 `get_metadata` 掌握檔案結構，再使用 `get_design_context` 只重新擷取所需節點。
- 開始撰寫程式碼前，請對確切變體執行 `get_screenshot`。
- 重複使用現有的設計系統元件與 Token。
- 請將 Figma 輸出轉換成符合此程式碼庫所用工具類別與元件模式的實作，不要另起一套系統。
- 讓間距、版面配置、層級和回應式行為盡可能貼近設計。
- 遵循程式碼庫的路由、狀態和資料擷取模式。
- 讓頁面在桌面與行動裝置上都能回應式呈現。
- 若 Figma 傳回 localhost 圖像或 SVG 來源，請直接使用，不要建立預留位置或新增圖示套件。
驗證：
- 從外觀與行為兩方面，將完成的 UI 與 Figma 參考設計比較。
- 使用 Playwright 檢查 UI 是否與參考設計一致，並視需要反覆調整，直到一致為止。
簡介
有了確切的 Figma 選取項目，Codex 就能將其轉換為完善的 UI，同時遵循專案既有模式。
透過 Figma 技能，Codex 可以使用 Figma MCP 伺服器擷取結構化設計上下文、變數、素材，以及應實作的確切變體。
透過 Playwright 互動式技能，Codex 可以在實際瀏覽器中開啟應用程式，將實作結果與 Figma 參考設計比較，並反覆調整版面配置或行為，直到結果更貼近目標。
設定 Figma 專案
Figma 檔案整理得越完善，首次實作的成果就越好。若要改善交付效果：
- 盡可能使用變數或設計 Token，尤其是色彩、字體排版和間距
- 為可重複使用的 UI 元素建立元件，不要重複建立彼此分離的圖層
- 盡可能使用自動版面配置，而非手動定位
- 框架與圖層名稱應足夠清楚，讓人能立即辨識主要畫面、狀態與變體
- 盡可能在檔案中保留實際圖示和圖像，避免 Codex 需要猜測
如此可為 Codex 提供更完善的結構，讓它轉換成穩健且可投入正式環境的 UI。
具體說明需求
對預期的互動模式和想要的樣式描述得越具體，成果就越好。
若某個狀態、中斷點或互動很重要，請明確指出。如果檔案包含多個相近的變體，請告訴 Codex 應以哪一個為準。
你越明確指出哪些內容必須完全一致，以及哪些地方應以程式碼庫的慣例為準，Codex 就越容易做出適當取捨。
準備設計系統
當目標程式碼庫已有清楚的元件層時，Codex 的效果最佳。Codex 可自動使用既有元件與設計系統，不必從頭重新建立。
如果你認為有必要，請向 Codex 說明應重複使用哪些基礎元件、Token 存放在何處，以及程式碼庫在按鈕、輸入欄位、卡片、字體排版與圖示方面以什麼為準。
Figma MCP 輸出通常類似 React 加上 Tailwind，應將其視為結構參考，而非最終的程式碼風格。請 Codex 將該輸出轉換成符合專案實際採用的工具類別、元件包裝層、色彩系統、字級尺度、間距 Token、路由、狀態管理及資料擷取模式的實作。
工作流程
從 Figma 選取項目開始
複製你希望實作之確切 Figma 框架、元件或變體的連結。Figma MCP 流程以連結為基礎，因此連結必須指向你要的確切節點，而不是鄰近的上層框架。
在提示詞中要求 Codex 使用 Figma
第一輪實作應以 Figma 為準。請要求 Codex 在開始實作前先依循 Figma MCP 流程。
提示詞中應包含以下內容：
1. 請先針對確切的節點或框架執行 `get_design_context`。
2. 若回應太大或遭截斷，請執行 `get_metadata` 來掌握檔案結構，然後只對所需節點重新執行 `get_design_context`。
3. 請針對要實作的確切變體執行 `get_screenshot`。
4. 請等到同時取得設計上下文與確切變體後，再下載所需素材並開始實作。
5. 將結果轉換為符合程式碼庫慣例的實作：重複使用現有元件，盡可能以專案既有系統取代原始工具類別，並使間距、層級和回應式行為與設計一致。
6. 若 Figma 傳回 localhost 圖像或 SVG 來源，請直接使用。若酬載中已有該素材，請勿建立預留位置或新增圖示套件。
初步實作完成後，Codex 會使用 Playwright 在實際瀏覽器中驗證 UI，並修正剩餘的視覺或互動差異。
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| 設計來源 | Figma | 選取明確的框架或元件，可讓實作有具體依據。 |
