官方教程中文版實戰場景
精修介面細節
說明如何用 Codex-Spark 做短迴圈 UI polish：視覺 note、focused edit、browser check、再迭代。
當 app 主結構已經存在，只需要快速做小的 UI 調整時，可以用 Codex-Spark 進入短迴圈：一個視覺 note，一個 focused edit，一個 browser check，再進入下一條 note。
官方頁面：https://developers.openai.com/codex/use-cases/make-granular-ui-changes
適合什麼任務
| 場景 | Codex 應該做什麼 |
|---|---|
| 現有 app 結構已經完成，只需小視覺調整 | 每次只改一個 spacing、alignment、color、copy、responsive 或 component-state 問題 |
| product/design review 需要快速響應 | 保持一個 note 對應一個 patch |
| UI polish 需要 browser verification | 用 $playwright 檢查結果，但不擴成大 redesign |
推薦模型和強度：gpt-5.3-codex-spark，low effort。沒有 Spark 時，用當前更強模型配 medium 或 low reasoning effort。
使用的能力
| 能力 | 用法 | 連結 |
|---|---|---|
$playwright | 開啟 running app，檢查 changed route，並在下一次迭代前驗證小 UI 調整 | https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive |
相關官方說明：
- Codex-Spark：https://developers.openai.com/codex/speed#codex-spark
- Floating pop-out window：https://developers.openai.com/codex/app/features#floating-pop-out-window
- Codex Spark model：https://developers.openai.com/codex/models#gpt-53-codex-spark
起始提示詞
请在现有 app 中完成这个 UI change：
[describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment]
约束：
- 只修改这个 UI adjustment 必需的文件。
- 复用现有 components、tokens、icons 和 layout patterns。
- 除非我明确要求，否则保持 behavior、data flow 和 routing 不变。
- 启动或复用 dev server，在 browser 中检查当前 UI，做最小 patch，并用视觉方式验证结果。
完成这一个 change 后就停止，并总结改了哪些 files，以及运行了哪个 browser check。這個 prompt 強制 Codex stop after one change。小 UI 調整最怕越改越寬。
選擇模型
Codex-Spark 是面向近即時 coding iteration 的 fast model。它不如通用模型全面，但適合移動按鈕、調整 breakpoint、改 component state 這類窄任務。
這類任務通常不需要最深推理，而需要：
- 快速理解原生代碼。
- 找到正確檔案。
- 做最小 patch。
- 立刻在 browser 中驗證。
- 能連續重複小迴圈。
Development Flow
- 開啟 existing app，讓相關 route 或 component 可見。
- 把當前 Codex conversation pop out 到 floating window，放在 browser、editor 或 design preview 附近。
- 每次只給一個具體 UI change。
- 提供 route、viewport、current screenshot、target screenshot 或 exact product note。
- 要求 Codex inspect current implementation，做 smallest defensible edit，並保留 existing components、tokens、layout primitives、data flow。
- review result，再在同一 thread 傳送下一條小調整。
小 Prompt 怎麼寫
好的 granular UI prompt 要包含：
- surface：哪個 route、component 或 viewport。
- target change：具體改什麼。
- validation：怎麼檢查結果。
如果結果接近但還差一點，follow-up 也保持窄：
在 mobile card 上，把 title 和 metadata 之间的 vertical gap 减少约 4px。desktop 保持不变。The primary button is visually too heavy in the empty state. Use the existing secondary button token there only.什麼時候放慢
如果任務不再 granular，就換更強模型和更審慎 prompt。
這些情況不適合繼續快迴圈：
- 需要 broad refactoring。
- 要建立新的 design system primitive。
- 涉及 non-trivial accessibility behavior。
- 有跨多屏 product decision。
- 要從零 redesign app。
快速 UI loop 適合調整已經理解的 surface，不適合重做產品方向。