聊天是与智能体协作的一种界面，但 UI 工作往往是空间性的。设计师、产品经理和前端开发者经常通过指向页面上的元素、区域或状态的标注来进行沟通。

设计模式（我们今日正在更新它）是我们缩小你所见内容与智能体所理解内容之间差距的一部分。它让你能在上下文中直接编辑你的产品，同时保持工作流不中断。

从 Cursor 浏览器中，你可以点击任意元素、在页面上绘制、或通过语音描述更改，Cursor 便能获取所需的上下文来编辑代码，而你则可继续下一步编辑。

这是一种更快、更简单的方式，用于通过智能体迭代设计变更——因为指令不再只是一句话，而是可以包含所选元素、其背后的代码、周围的布局以及页面上的视觉关系。

这使得从注意到编辑的循环更加紧密。你无需离开正在运行的产品就能指向你所说的界面部分，然后在智能体在底层进行编辑的同时，持续针对产品本身做引用。

# 指向、绘制或口述更改

设计模式提供了多种方式让你向智能体传达意图。你可以选择一个元素、添加多个引用、在界面上绘制、或使用语音描述更改。

当更改依赖于元素之间的关系时，多选功能非常有用。你可以引用两个组件，然后要求智能体将其中一个匹配另一个、移除重复内容、或一起调整一组组件。

当智能体需要知道指令适用于页面的哪个区域时，绘制功能非常实用。你可以圈出一个拥挤的区域、框定一个范围、或在动画页面上标记某一部分。标注会停留在视口的冻结帧上，因此智能体能看到你当时所回应的确切页面状态。

在此次发布中，你还可以使用语音口述指令，同时我们让定位更加精确、体验更加快速。总体而言，这让设计模式中的视觉交互更像是正常编辑流程的一部分。

在底层，选取一个元素会向上下文中添加两个互补的信号：元素的标识（xpath、组件、属性、计算样式、fiber 树中的 props）以及用于空间上下文的截图（布局、周围元素和确切的页面状态）。这正好给了智能体所需的信息，以便高效地找到源代码并编辑代码。

#将模型与工作节奏相匹配

当你打磨用户界面时，一个编辑链通常会引出下一个。你调整一个组件，注意到它周围的间距，然后发现另一个组件应该如何与之匹配。

设计模式让你能在注意到这些编辑时随时发送出去。你可以指向一个元素，描述要做的修改，移动到页面的另一部分，然后在第一个编辑完成之前发送另一个编辑。设计模式让你更容易进行多任务处理，并使管理多个子智能体成为可能。

这种工作流最适合能够快速进行精准UI修改的模型。Composer 2.5 在这方面表现出色，因为它既快速又擅长界面工作。当智能体完成任务后，应用会热重载。你会在运行中的产品里看到变化出现，然后继续调整直到界面感觉合适为止。

我们相信，软件构建的未来是让用户能够在更高抽象层级和更低层级细节之间无缝切换，同时在他们想要的状态下保持工作流心流。设计模式为用户提供了控制权、自主性和精准编辑工具，使这一切成为可能。

在智能体窗口中尝试设计模式。阅读浏览器文档以了解更多，或下载 Cursor 开始使用。