概览
使用 Codex 在现有应用中一次只做一个小的 UI 调整，在浏览器中验证效果，并在靠近预览的弹出聊天窗口中持续快速迭代。
适合场景
- 主结构已搭建完成、只需要进行小幅视觉调整的现有应用
- 快速的产品或设计评审循环，其中每条反馈都应转化为一次聚焦的代码修改
- 需要在浏览器中验证、但不应演变成大范围重设计的 UI 润色工作
进行一项 UI 修改
在现有应用中进行这项 UI 修改： [描述精确的间距、对齐、颜色、文案、响应式或组件状态调整] 约束： - 仅修改完成这项 UI 调整所需的文件。 - 复用现有组件、tokens、图标和布局模式。 - 除非我明确要求，否则保持行为、数据流和路由不变。 - 启动或复用开发服务器，在浏览器中检查当前 UI，进行最小改动，并以可视方式验证结果。 完成这一次修改后就停止，并总结已修改的文件以及你执行的浏览器检查。
建议推理强度：低
简介
当你已有一个现成应用，并希望快速迭代 UI 时，可以使用 gpt-5.3-codex-spark 对 UI 进行小而聚焦的修改。 Codex-Spark 是我们速度最快的模型，专为近乎即时的实时编码迭代而优化。
这种方式最适合形成一个紧凑循环：一条视觉反馈，一次聚焦编辑，一次浏览器检查，然后进入下一条反馈。
你可以使用 Codex Spark 模型 来完成这个 任务。它在 Pro 套餐中可用。
选择你的模型
对于快速 UI 迭代，如果你有权限访问，优先使用 gpt-5.3-codex-spark。它的能力不如我们的通用模型强，但专为实时编码迭代而设计。如果你无法使用它，请使用 gpt-5.5，并将 reasoning effort 设为 medium 或 low。
这种权衡非常适合细粒度 UI 工作。你通常不需要最强的模型来移动一个按钮、微调一个断点，或调整一个组件状态。你需要的是一个响应迅速、理解本地代码、能编辑正确文件，并且可以反复执行循环而不让迭代变得沉重的模型。
开发流程
- 打开现有应用，并让相关路由或组件处于可见状态。
- 将当前活跃的 Codex 对话弹出为一个浮动窗口，并在工作时将其放在浏览器、编辑器或设计预览附近。
- 每次只向 Codex 提出一项明确的 UI 修改。如果有的话，请附上路由、视口、当前截图、目标截图或精确的产品反馈。
- 要求 Codex 检查当前实现，做出最小且合理的修改，并保留应用现有的组件、tokens、布局原语和数据流。
- 检查结果，然后在同一线程中发送下一项小调整。
编写简短提示词
细粒度 UI 提示词应当直接且范围狭窄。好的提示词会明确界面位置、目标修改以及你期望的验证方式。
如果结果已经接近但还不完全正确，后续提示也应同样具体：
何时放慢节奏
如果任务不再是细粒度的，就不要继续使用这种快速循环。当修改需要大范围重构、新的设计系统原语、较复杂的无障碍行为，或会影响多个页面的产品决策时，请切换到更强的模型，并使用更审慎的提示词。
当 Codex 是在调整一个已经被理解清楚的现有界面，而不是从头重新设计整个应用时，快速 UI 迭代的效果最佳。