Web 開發路線

Codex 很適合已有 design systems 的 web projects。它可以結合 constraints 和 visual inputs，生成 responsive UI。

如果你正在構建 web apps，並需要持續迭代 frontend designs，這組 use cases 很有用。

Web 開發路線的重點是把“看起來像”變成“在真實專案裡可維護”：複用 design system、遵守 routing 和 data-fetch patterns、做 responsive checks、用 Playwright 在不同 breakpoint 驗證，而不是生成一套脫離專案的並行 UI。

配圖：

• background：https://developers.openai.com/codex/use-cases/background-codex-collection3.png
• illustration：https://developers.openai.com/codex/use-cases/web-development-illustration.png

適合什麼專案

適合：

• 已有 React / Next.js / design system 的 web app。
• 有 screenshot、Figma、視覺參考或明確 design brief。
• 需要 desktop 和 mobile 同時驗證。
• 需要 Codex 在瀏覽器裡迭代 layout、spacing、state、interaction。

不適合：

• 只有“做得高階一點”這類模糊描述。
• 沒有元件規範，且不允許先整理 design primitives。
• 不跑瀏覽器，只看 build pass。
• 一次性要求 Codex 大改全站 UI。

Build from Figma

用 Codex 從 Figma 拉取 design context，並轉成符合 repo components、styling 和 design system 的 code。

• Turn Figma designs into code Use Codex to pull design context, assets, and variants from Figma, then translate them into code. Front-end · Design

從 Figma 開始時，Codex 應該翻譯設計，而不是照抄結構。明確要求它：

• 使用 repo 現有 components。
• 使用現有 tokens、spacing、typography、colors。
• 遵守當前 routing 和 state management。
• 處理 empty、loading、error、selected、hover states。
• 對無法確認的細節做最小合理假設並說明。

Iterate on the UI

用 Codex 根據 visual inputs 或 prompts 做 targeted changes，並讓它在 browser 中 verify work。

• Build responsive front-end designs Use Codex to translate screenshots and design briefs into code that matches the repo's conventions. Front-end · Design

• Make granular UI changes Use Codex to make one small UI adjustment at a time in an existing app, then verify it in the browser. Front-end · Design

官方 responsive front-end use case 強調：用 screenshots 和 design brief 做 source of truth，再用 Playwright 比對不同 screen sizes。實際執行時建議每輪只做一個明確目標：

• 調整 header 在 mobile 的換行。
• 修復 card grid 在 tablet 的列數。
• 對齊 button 和 input 的 vertical rhythm。
• 補 empty state。
• 調整 hover 或 selected state。

不要把視覺改動、資料結構、路由和業務邏輯混在同一個任務裡。

Starter prompt

Implement this UI in the current project using the screenshots and notes as the source of truth.
Reuse existing design system components and tokens.
Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.
Match spacing, hierarchy, layout, and responsive behavior on desktop and mobile.
Use Playwright to compare the implementation against the references at 375, 768, 1024, and 1440 widths.
If a detail is ambiguous, choose the simplest implementation that fits the direction and note the assumption.

Pick Up Scoped Slack Tasks

當 Slack 中出現 feature request 或 reported issue 時 tag Codex，讓它在 background 中接手任務。

• Kick off coding tasks from Slack Mention @Codex in Slack to start a task tied to the right repo and environment. Integrations · Workflow

Slack 任務必須 scoped。適合交給 Codex 的 Slack request 應包含：

• repo
• target page 或 component
• expected behavior
• screenshot 或 reproduction
• validation command
• deploy or preview expectation

“這個頁面不好看，最佳化一下”不適合直接丟給 cloud task。應先轉成具體 UI acceptance criteria。

Deploy a Preview

讓 Codex build 或 update web app，用 Vercel deploy，並返回可分享的 live URL。

• Deploy an app or website Use Codex with Build Web Apps and Vercel to turn a repo, screenshot, design, or rough app idea into a preview. Front-end · Integrations

Preview 不是最後一步的裝飾，而是 UI 任務的驗收入口。讓 Codex 輸出：

• build command
• deploy target
• preview URL
• known limitations
• screenshots or viewport checks
• follow-up tasks

如果只是本地 build pass，沒有 preview 或截圖，仍然不能說明響應式 UI 已經達標。

Ship Changes Faster

在 GitHub 中使用 Codex，確認 changes 可以安全 merge，讓 development loop 更快。

• Codex code review for GitHub pull requests Use Codex code review in GitHub to automatically surface regressions, missing tests, and high-priority issues. Integrations · Workflow

響應式驗收矩陣

每個 breakpoint 至少檢查：

• 沒有橫向滾動。
• 文字沒有溢位按鈕或卡片。
• 互動控制元件可見且可點選。
• empty / loading / error 狀態不擠壓佈局。
• primary action 在首屏或合理位置。

完成標準

• UI 使用現有 design system，而不是新建一套元件風格。
• Figma 或 screenshot 的關鍵 hierarchy、spacing、layout 已轉譯到程式碼。
• desktop 和 mobile 都有瀏覽器驗證。
• 所有動態狀態至少覆蓋正常、empty、loading、error 中與頁面相關的狀態。
• preview URL 或截圖可以給 reviewer 對比。
• PR review 覆蓋 regression、missing tests、breakpoint issue。

官方資料

• Build responsive front-end designs
• Turn Figma designs into code
• Make granular UI changes
• Kick off coding tasks from Slack
• Deploy an app or website
• Codex code review for GitHub pull requests