Web 開發

Codex 可與現有設計系統順暢搭配，並考量各項限制與視覺輸入，產生回應式 UI。 當你建構 Web 應用程式並需要反覆調整前端設計時，這些使用案例將很有幫助。

從構想到原型

使用 Codex 將初步構想發展為視覺設計方向，並實作初版原型。

從構想到概念驗證

使用 Codex 搭配 ImageGen，將粗略構想轉化為視覺方向，實作最精簡且實用的原型，並在瀏覽器中驗證。

前端 工程

根據 Figma 設計建構

使用 Codex 從 Figma 擷取設計上下文，並將其轉換為符合程式碼庫既有元件、樣式和設計系統的程式碼。

將 Figma 設計轉換為程式碼

使用 Codex 從 Figma 擷取設計上下文、素材和變體，將其轉換成符合程式碼庫設計系統的程式碼，再以 Playwright 比較實作結果與 Figma...

前端 設計

反覆調整 UI

使用 Codex 根據視覺輸入或提示詞進行針對性變更，並讓 Codex 在瀏覽器中驗證這些變更。

打造回應式前端設計

使用 Codex 將螢幕截圖和設計需求說明轉換為符合程式碼庫設計系統的程式碼，再使用 Playwright 針對不同螢幕尺寸比對實作成果與參考資料，並反覆調整，直到外觀符合預期。

前端 設計

進行細微 UI 變更

使用 Codex 在現有應用程式中每次只進行一項小幅 UI 調整，接著在瀏覽器中驗證，並將彈出式對話視窗放在預覽畫面附近，以便快速持續迭代。

前端 設計

接手範圍明確的 Slack 任務

當有人提出功能需求或回報問題時，在 Slack 中標註 Codex，讓它接手任務並在背景處理。

從 Slack 啟動程式開發任務

在 Slack 中提及 `@Codex`，即可啟動連結至正確程式碼庫與環境的對話，接著可回到該討論串或在 Codex 雲端中審查結果。

整合 工作流程

部署預覽版本

使用 Codex 建構或更新 Web 應用程式、透過 Vercel 部署，並讓它回傳可供分享的線上 URL。

部署應用程式或網站

使用 Codex 搭配 Build Web Apps 和 Vercel，將程式碼庫、螢幕截圖、設計稿或初步的應用程式構想轉換成可正常運作且可分享的預覽部署。

前端 整合

更快交付變更

在 GitHub 中使用 Codex，確保變更能安全合併，進而縮短開發迭代週期。

審查 GitHub Pull Request

使用 GitHub 中的 Codex 程式碼審查，直接在 Pull Request 上自動找出迴歸、遺漏的測試與文件問題。

整合 工作流程