Design Mode 可视化修改
在 Agents Window 浏览器中选择元素、圈画区域或语音描述界面变化。
This page has not been translated into English yet. The original Chinese version is shown below.
Design Mode 把页面位置与代码上下文交给 Agent。它位于 Agents Window 的浏览器中，适合调整布局、组件关系和具体元素。
选择与表达
打开浏览器后用 Cmd+Shift+D 切换 Design Mode，再次按同一快捷键返回普通浏览。可以单选或多选元素，描述它们之间的关系；也可在页面圈画区域，用语音补充要求。
绘制标记覆盖在冻结的 viewport frame 上，因此 Agent 看到的是你标记时的页面状态。选元素还带入 xpath、component、attributes、computed styles、fiber props 与截图，帮助定位实现。
官方列出的快捷键
| 操作 | 快捷键 |
|---|---|
| 切换 Design Mode | Cmd+Shift+D |
| 选择区域 | Shift+拖动 |
| 元素加入聊天 | Cmd+L |
| 元素加入输入 | Option+点击 |
本表保留官方 macOS 键位，其他系统以实际界面为准。
连续调整
可以在 Agent 修改时继续指出下一处变化。改动完成并热更新后，检查实际页面效果和交互，而不只是截图。多处变更涉及同一个组件时，明确哪些要求补充或替代前面的要求，避免互相矛盾。