设计模式让你能通过视觉提示词引导agents。在代理窗口的浏览器中，你可以点击元素、在页面上圈选，或通过语音描述改动。Cursor 会捕捉所需的上下文并编辑代码，你则可以继续处理下一项改动。
UI 工作往往具有空间性。无需用一句话描述改动，你的指令可以包含所选元素、其背后的代码、周围的布局以及页面中的视觉关系。这缩短了从发现问题到修复问题的闭环。
点击正在运行的 app 中的元素，针对所选元素输入提示词，让智能体编辑代码。
打开设计模式¶
设计模式位于代理窗口的浏览器中。打开浏览器后，按 Cmd + Shift + D 启用设计模式。再次按下相同的快捷键即可关闭，恢复正常浏览。
引导智能体的方式¶
设计模式提供多种方式来表达你的意图。
选择元素¶
点击正在运行的产品中的任意元素即可将其设为目标。智能体会获取该元素及其代码，因此你无需离开应用，即可针对眼前所见的具体内容编写提示词。
选择多个元素¶
当修改涉及元素之间的关系时，多选功能很有帮助。引用两个组件，让智能体将其中一个调整得与另一个一致、移除重复内容，或同时调整一组元素。
选择多个元素，并描述它们应如何一同调整。
在页面上绘制¶
通过绘制，你可以告诉智能体你的指令适用于页面的哪个区域。你可以圈出内容密集的部分、框选某个区域，或标记动态页面的一部分。标注会叠加在视口的冻结画面上，因此智能体能看到你所针对的确切页面状态。
语音描述¶
你可以通过语音说明需求，无需打字。agents运行期间，麦克风始终可用，因此无需等待即可将下一项修改加入队列。
结合语音输入和绘图描述修改内容。
键盘快捷键¶
| 操作 | 快捷键 |
|---|---|
| 切换设计模式 | Cmd + Shift + D |
| 选择区域 | Shift + 拖动 |
| 将元素添加至聊天 | Cmd + L |
| 将元素添加至输入框 | Option + 点击 |
智能体看到的内容¶
选取元素会向上下文添加两类互补信息：
- 元素标识：包括 fiber 树中的 xpath、组件、属性、计算样式和 props。这有助于智能体定位源代码并修改正确的代码。
- 截图：包含布局、周边元素以及页面的确切状态。这为智能体提供与此次修改相关的空间上下文。
保持工作节奏¶
优化界面时，一处修改往往会引出下一处。你调整一个组件，注意到它周围的间距，又发现另一个组件也需要与之协调。
设计模式让你在发现这些修改时就能立即提交。指向一个元素，描述要做的更改，再移到页面的另一部分；在第一项修改完成前，就可以提交下一项。这样你可以轻松地同时处理多项工作，并管理多个子智能体。agents完成任务后，应用会热重载，你的更改会出现在运行中的产品里。
这一工作方式最适合使用擅长界面工作的快速模型。我们推荐 Composer 2.5。
