跳到主要内容

做细粒度 UI 修改

在已有应用里快速调整某个控件、布局、状态、文案或间距，而不是重做整个页面。

场景定位​

这个案例属于“产品、设计与前端原型”。它适合把一个经常需要人工整理、判断或验证的流程交给 Codex 做第一轮处理，然后由你审阅关键结果。

项目内容
适合任务在已有应用里快速调整某个控件、布局、状态、文案或间距，而不是重做整个页面。
常用能力局部 UI、快速迭代、Codex-Spark
产出形态清单、草稿、补丁、报告、截图、表格或可运行原型，取决于具体任务

适合谁​

  • 页面主体已经存在
  • 只需要改一小块体验
  • 希望减少回归风险

Codex 可以帮你做什么​

  • 定位目标组件和相关样式
  • 只修改指定区域
  • 保留现有数据流和交互
  • 用截图确认局部改动没有破坏其他区域

推荐工作流​

  1. 明确禁止改动的范围
  2. 给出修改前后预期
  3. 要求 Codex 用最小补丁
  4. 检查桌面和移动端
  5. 让它总结改了哪些文件

示例提示词​

请只修改这个页面里的筛选栏和结果卡片，不要重构其他部分。目标是让移动端更紧凑，桌面端信息层级更清楚。修改后用浏览器截图检查是否重叠。

案例重点展开​

  • 适合已有应用里的快速 UI 微调，例如按钮、间距、文案、状态和小组件。
  • 可以使用更快的 UI 迭代模型，但要在关键时刻放慢并检查。
  • 把活跃 Codex 会话弹出到独立窗口，有利于边看页面边修改。
  • 提示词要短而具体：改哪里、达到什么效果、不能动哪里。
  • 遇到跨组件影响、状态复杂或视觉不一致时，要切回更审慎的实现流程。

完整用法拆解​

1. 先把任务范围说清楚​

这个案例的重点不是让 Codex 猜你的真实需求，而是把“在已有应用里快速调整某个控件、布局、状态、文案或间距，而不是重做整个页面。”拆成一组可以检查的步骤。开始时先说明输入来源、时间范围、目标对象和最终产物。如果任务涉及多个工具，也要告诉 Codex 哪些工具可以读、哪些动作只能准备草稿。

可以把范围写成三句话：我要处理什么资料、希望得到什么结果、哪些事情不能自动执行。对于“产品、设计与前端原型”这类任务，范围越清楚，Codex 越容易把注意力放在真正有价值的判断上。

2. 让 Codex 先输出中间结果​

不要一上来要求最终答案。更稳妥的方式是先让 Codex 完成“定位目标组件和相关样式”，再让它解释判断依据。这样你可以在中间阶段纠偏，避免它把不重要的信息写进最终产物。

如果任务比较长，可以要求 Codex 先给你一个小型样例，例如前 5 条记录、前 3 个页面、一个模块或一封邮件。样例通过后，再扩大到完整范围。

3. 把工具和证据写进交付物​

这个场景常用能力包括：局部 UI、快速迭代、Codex-Spark。让 Codex 使用这些能力时，最好要求它把依据也写出来：读了哪些文件、参考了哪些消息、运行了哪些命令、看到哪些截图或日志。

证据不是为了增加篇幅，而是为了让你能判断结果是否可靠。特别是 页面主体已经存在，更应该看到来源、假设和未确认问题。

4. 逐轮校准，而不是一次到位​

第一次结果通常是校准样本。你可以告诉 Codex 哪些判断正确、哪些内容太泛、哪些边界必须更严格。经过几轮之后，再考虑把流程保存为技能、自动化或长期 goal。

一个可用的校准顺序是：明确禁止改动的范围；给出修改前后预期；最后 让它总结改了哪些文件。这样既能提高产出质量，也能减少误操作。

更多提示词案例​

入门版​

请只修改这个页面里的筛选栏和结果卡片，不要重构其他部分。目标是让移动端更紧凑，桌面端信息层级更清楚。修改后用浏览器截图检查是否重叠。

请先只处理一个小范围样例，并说明你的判断依据、输出结构和需要我确认的问题。

进阶版​

请把“做细粒度 UI 修改”作为一个完整工作流来执行。
目标：在已有应用里快速调整某个控件、布局、状态、文案或间距，而不是重做整个页面。
可用能力：局部 UI、快速迭代、Codex-Spark
请按以下步骤进行：
1. 先确认输入来源和任务范围。
2. 输出执行计划和风险边界。
3. 生成第一版结果。
4. 标注每个关键结论的依据。
5. 列出需要我确认的问题。
不要执行发送、删除、付款、发布、承诺等不可逆动作。

复盘版​

请复盘刚才这次“做细粒度 UI 修改”任务。
请输出：
1. 哪些输入最有用；
2. 哪些判断仍然不确定；
3. 哪些步骤可以下次自动化；
4. 哪些动作必须继续人工确认；
5. 下一次我应该怎样给你更好的上下文。

自动化前校准版​

我想把这个流程以后重复使用，但现在先不要自动化。
请根据本次任务整理一个可复用流程：触发条件、输入来源、处理步骤、输出格式、验证方式、停止条件和人工确认点。
尤其注意：范围不清会导致顺手重构。

交付物检查清单​

完成这类任务后，建议检查以下内容：

  • 是否清楚说明了输入来源、处理范围和时间范围。
  • 是否把“定位目标组件和相关样式”和“只修改指定区域”的依据写出来。
  • 是否列出了不确定信息、缺失材料和需要你确认的问题。
  • 是否避免了越权动作，尤其是发送、删除、付款、发布、承诺和修改生产数据。
  • 是否留下了下一步可以继续执行的清单、文件、补丁、报告或验证结果。

使用边界​

  • 范围不清会导致顺手重构
  • 局部样式可能影响全局组件
  • 要检查长文案和窄屏