第十二节 Codex + Figma 一键UI界面更改🛫

提示词模板​

​

代码块​

Haskell

在现有应用中进行以下界面调整：​

[请具体说明间距、对齐方式、颜色、文案、响应式设计或组件状态等方面的调整]​

约束条件：​

- 仅修改本次界面调整所需的文件。​

- 复用现有组件、原子设计系统中的变量、图标及布局模式。​

- 除非我明确要求，否则保持行为、数据流和路由不变。​

- 启动或复用开发服务器，在浏览器中检查当前界面，实施最小范围的修改，并通过视觉验证效果。​

​

完成此次变更后，请停止操作，并总结已修改的文件以及您执行的浏览器检查结果。​

​

​

​

简介​

选择你的模型​

开发流程​

打开现有应用，使相关路由或组件可见。​

将当前的 Codex 任务弹出至一个浮动窗口，并在您工作时将其置于浏览器、编辑器或设计预览附近。​

请每次仅提出一项针对 Codex 的具体 UI 改动。如有必要，请附上相关路径、视口、当前截图、目标截图，或准确的产品说明。​

请 Codex 检查当前实现，进行最小且合理的修改，并保留应用现有的组件、标记、布局原语以及数据流。​

请先查看结果，然后在同一任务中发送下一个小幅调整。​

编写小型提示词​

细粒度的界面提示应直接且明确。一个好的提示应说明操作对象、目标变更以及您期望的验证结果。​

如果结果接近但并不完全正确，请继续保持同样具体的后续跟进：​

​

代码块​

Haskell

变更已接近完成。请保留现有实现，仅调整以下细节：​

[描述剩余的不一致之处]​

​

在停止之前，请再次验证相同的路由和视口。​

​

何时放慢节奏​

如果任务不再具备细粒度，就不要再继续使用快速迭代流程。当变更需要进行大规模重构、引入新的设计系统原子组件、实现复杂的无障碍交互，或作出影响多个界面的产品决策时，请切换到更稳健的模型，并采用更为严谨的提示词。​

当 Codex 对已有的、用户熟悉的界面进行调整时，快速的 UI 迭代效果最佳，而非从头开始重新设计整个应用。​