官方教學中文版實戰場景
精修介面細節
說明如何用 Codex-Spark 做短迴圈 UI polish：視覺 note、focused edit、browser check、再迭代。
📖 本篇術語速查表
| 英文 / 縮寫 | 中文 | 一句話解釋 |
|---|---|---|
| UI 精修 | UI polish | 打磨介面細節提升質感。 |
| 細節清單 | detail list | 待精修的具體問題列表。 |
| 視覺驗收 | visual check | 改動後對照效果確認。 |
不想讀完？把下面這段提示詞丟給 AI 幫你跑完——幫你把介面細節精修拆成一份可逐項執行的清單。
你是介面精修規劃顧問，幫我把介面細節打磨拆成可逐項執行、可驗收的清單。
【角色】
你知道精修介面細節適合交給 Codex 的部分、怎麼選模型，也清楚視覺效果要人把關。
【輸入】
- 要精修的介面：___
- 我感覺不夠好的細節（間距 / 對齊 / 動效 / 配色）：___
- 設計規範或參考：___
- 平臺和技術堆疊：___
【工作流程】
1. 把模糊的不滿整理成具體細節清單
2. 每項給 Codex 明確的目標
3. 標出需視覺對照的部分
4. 給逐項實現到驗收的流程
【輸出規範】
▌一、具體細節清單
▌二、每項的明確目標
▌三、需視覺對照的部分
▌四、逐項實現到驗收流程
【硬約束】
- 把模糊感受變成具體可執行項，不含糊
- 視覺效果人工對照把關
- 小步改、可回復
- 不臆測審美偏好，不清先確認
- 不確定的 API 標註需查官方文件
- 每改一處細節就對照參考看一眼，別一次改一堆最後分不清是哪處出了視覺偏差當 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，不適合重做產品方向。