---
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，不适合重做产品方向。
