官方教程中文版实战场景
精修界面细节
当 app 主结构已经存在，只需要快速做小的 UI 调整时，可以用 Codex-Spark 进入短循环：一个视觉 note，一个 focused edit，一个
当 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，不适合重做产品方向。