Design Mode 适合把“这里间距太大”这类视觉意图绑定到页面元素，但它不会自动知道业务规则。先启动正确页面并固定视口，再逐项发送改动。
开始前先准备什么
先运行项目开发服务器，在 Agents Window 的 Browser 打开目标路由，确认数据和登录状态属于测试环境。
开始前固定浏览器宽度、缩放比例、主题和测试数据，并保存改动前截图。再从设计系统找到颜色、间距、字号和组件变量，避免用肉眼估算生成新的硬编码值。若页面有加载、空数据、错误或展开状态，先决定本次标注针对哪一个状态。
Design Mode 会把元素身份与页面截图一起放入上下文。官方文档说明，元素信息可包括 XPath、组件、属性、计算样式和 props；截图提供周边布局。它能帮助定位代码，却不能自动补齐业务规则，所以提示中仍要写明不得改变的交互与数据。
实际操作步骤
- 进入正确页面：先确认地址、测试账号和页面状态，再使用 Cmd+Shift+D 打开 Design Mode，在页面上点击目标元素或画出区域。Shift 加拖动可选区域；需要比较关系时可多选相关元素。
- 描述单个变化：每条指令只描述一个变化，写清目标设计变量、影响视口和不得改变的交互。比如要求使用现有间距变量，不要只说“更紧凑”。
- 审查落点：等待 Agent 完成后查看热更新结果，同时打开 diff 确认修改落在正确组件，没有改共享变量或整页格式。
- 覆盖多种状态：切换默认、悬停、聚焦、禁用与错误状态，再切换桌面与窄屏，检查键盘焦点、文字溢出、控制台错误和相关测试。
- 逐项提交：一个视觉目标通过后再标注下一项；并行发送多个改动虽受支持，但会增加判断是哪次改动引入回归的难度。
一个可复制的视觉修改指令
只修改我选中的搜索结果卡片。
目标：在 1280px 视口下，将标题与摘要之间的间距改为现有 spacing-2 变量；
限制：保持卡片宽度、字号、点击区域和数据逻辑不变，不创建新的颜色或间距值；
验收：默认、hover、键盘 focus 三种状态都可见，窄屏无横向滚动，控制台无新增错误。
先说明将修改的组件和样式来源，再执行。这是演示指令，spacing-2 必须替换成项目真实存在的变量。预期结果是 Agent 能从所选元素定位到组件与样式，并把改动限制在该处。若它准备修改全局 token，应先说明影响页面并等待确认。
怎样验证结果
通过标准是目标元素视觉符合要求、其他状态未退化、diff 可解释且浏览器控制台无新增错误。
用同一视口对比改动前后截图，并逐条复述验收条件。Tab 到目标元素确认焦点可见，缩窄页面检查换行和溢出，读取控制台确认没有新异常；然后运行项目已有的组件测试或构建。视觉一致但 diff 改了公共样式、业务逻辑或大量无关文件，也不应通过。
常见错误
- 一次标注过多元素会让范围失控。
- 不要在登录着生产账号的浏览器中自动操作。
- 只看截图会遗漏交互状态。
适用边界
Design Mode 的视觉反馈不能替代真实设计稿、无障碍检查和业务验收。
冻结截图只能表达当时的页面状态，动画、异步结果、权限差异和真实长文本需要单独测试。涉及生产数据或登录状态时，不应让 Browser 自动提交；应使用隔离的测试环境和可回收数据。
相关问答
能同时发送多个设计修改吗？
可以并行，但初次使用建议一项一验，便于发现是哪次改动引入问题。
没有热更新怎么办？
先确认开发服务器和路由正确，再检查构建错误，不要盲目重写组件。
资料与适用范围
本文根据 2026 年 10 月 1 日核验的 官方资料 1、官方资料 2 整理。示例流程未在你的设备、账号或仓库中实测，界面、方案、权限和项目命令应以当前环境为准。
Ai菜鸟网。发布者：AI小管家，转载请注明出处：https://www.alyyhw.com/32616.html
