簡介

當你有螢幕截圖、簡短的設計需求說明，或一些可供汲取靈感的參考資料時，Codex 能在沿用專案既有模式的前提下，將這些資料轉化為回應式 UI。

透過 Playwright 技能，Codex 可以在實際的瀏覽器中開啟 App，針對不同螢幕尺寸比對實作成果與螢幕截圖，並反覆調整版面配置或行為，讓成果更接近目標。

從參考資料著手

請向 Codex 提供最清楚、最能呈現所需 UI 的參考資料。若是範圍較小的任務，一張螢幕截圖可能就足夠；但若能納入桌面版和行動版配置、游標暫留或選取狀態，以及任何重要的空白或載入畫面等多種狀態，交付內容會更完善。

這些參考資料不必是完美的設計交付成果，只要能具體呈現預期的層次結構、間距和整體方向，讓 Codex 不必猜測即可。

具體說明

對預期的互動模式和想要的風格描述得越具體，結果就會越好。 模型通常會預設採用常見的模式和風格，因此如果參考資料未明確顯示你想採用其他做法，UI 可能會顯得普通。 你提供的資訊越多，無論是更多可供汲取靈感的參考資料，還是更具體的指示，就越有可能得到更具特色的 UI。

準備設計系統

當目標程式碼庫已有清楚明確的元件層時，Codex 的效果最佳。Codex 可以自動沿用現有的元件和設計系統，不必從零重建一套。

如果你認為有必要（例如未使用標準技術堆疊），請向 Codex 說明應沿用哪些基礎元件、Token 存放在何處，以及此程式碼庫對按鈕、輸入欄位、卡片、排版和圖示採用哪些標準實作。

如果是以現有程式碼庫為起點，Codex 很可能會自行理解該如何使用你的元件和設計系統；但如果從零開始，最好明確說明這些事項。

請 Codex 將螢幕截圖視為視覺目標，但依照專案實際採用的工具類別、元件包裝器、色彩系統、排版層級、間距 Token、路由、狀態管理和資料擷取模式來實現該目標。

善用 Playwright

Playwright 是協助 Codex 反覆調整 UI 的絕佳工具。Codex 可以使用它在實際的瀏覽器中開啟 App，比對實作成果與你提供的螢幕截圖，並反覆調整版面配置或行為。

它可以將瀏覽器視窗調整成不同的螢幕尺寸，並檢查各個中斷點的版面配置。

請確認已在 Codex 中啟用 Playwright 互動式技能。如需詳細資訊，請參閱 技能文件。

反覆調整

第一輪實作的整體方向應該就會接近螢幕截圖。如果 UI 的版面配置或互動複雜，或包含大量動畫，可以預期還需要調整幾輪。

請 Codex 對照螢幕截圖比較實作成果，而不只是確認頁面能否成功建置。發生衝突時，應優先採用程式碼庫的設計系統 Token，並且只對間距或尺寸做維持設計整體外觀所需的最小幅度調整。

若有助於釐清單張圖片中不明顯的狀態，請使用額外的螢幕截圖或簡短備註。

建議的後續提示詞