---
title: "精修介面細節"
description: "說明如何用 Codex-Spark 做短迴圈 UI polish：視覺 note、focused edit、browser check、再迭代。"
verifiedAt: "2026-05-05"
---

當 app 主結構已經存在，只需要快速做小的 UI 調整時，可以用 Codex-Spark 進入短迴圈：一個視覺 note，一個 focused edit，一個 browser check，再進入下一條 note。

官方頁面：[https://developers.openai.com/codex/use-cases/make-granular-ui-changes](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](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive) |

相關官方說明：

- Codex-Spark：[https://developers.openai.com/codex/speed#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](https://developers.openai.com/codex/app/features#floating-pop-out-window)
- Codex Spark model：[https://developers.openai.com/codex/models#gpt-53-codex-spark](https://developers.openai.com/codex/models#gpt-53-codex-spark)

## 起始提示詞

```text
请在现有 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

1. 開啟 existing app，讓相關 route 或 component 可見。
2. 把當前 Codex conversation pop out 到 [floating window](https://developers.openai.com/codex/app/features#floating-pop-out-window)，放在 browser、editor 或 design preview 附近。
3. 每次只給一個具體 UI change。
4. 提供 route、viewport、current screenshot、target screenshot 或 exact product note。
5. 要求 Codex inspect current implementation，做 smallest defensible edit，並保留 existing components、tokens、layout primitives、data flow。
6. review result，再在同一 thread 傳送下一條小調整。

## 小 Prompt 怎麼寫

好的 granular UI prompt 要包含：

- surface：哪個 route、component 或 viewport。
- target change：具體改什麼。
- validation：怎麼檢查結果。

如果結果接近但還差一點，follow-up 也保持窄：

```text
在 mobile card 上，把 title 和 metadata 之间的 vertical gap 减少约 4px。desktop 保持不变。
```

```text
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，不適合重做產品方向。
