聊天是与智能体协作的一种界面，但 UI 工作往往更依赖空间表达。设计师、PM 和前端开发者通常通过标注来沟通，指出页面中的元素、区域或页面状态。

我们今天更新的 Design Mode，也是我们缩短您所见与智能体所理解之间距离的一部分。它让您能够结合上下文编辑产品，同时保持工作流畅不中断。

在 Cursor browser 中，您可以点击任意元素、在页面上绘制，或用语音描述改动，Cursor 会获取编辑代码所需的上下文，而您则可以继续处理下一处修改。

这是一种更快、更轻松的方式，让您与智能体一起迭代设计改动，因为指令不再只是一个句子——而是可以包含所选元素、其背后的代码、周围的布局，以及页面上的视觉关系。

这让从发现问题到完成编辑的循环更紧凑。您无需离开正在运行的产品，就能直接指出您所说的界面部分；同时，在智能体于底层完成编辑时，您还可以继续直接以产品本身为参照给出更多指示。

#点选、绘制或口述变更

Design Mode 提供了多种方式，帮助您向智能体传达意图。您可以选择某个元素、添加多个参考对象、在界面上绘制，或使用语音来描述变更。

当变更取决于元素之间的关系时，多选就非常实用。您可以引用两个组件，让智能体将其中一个调整得与另一个一致、移除重复内容，或同时调整一组组件。

当智能体需要知道指令适用于页面的哪个区域时，绘制就很实用。您可以圈出密集的区域、框选某个区域，或标记动画页面的一部分。标注会叠加在视口的静止画面上，因此智能体能准确看到您发出指令时页面所处的状态。

在这个版本中，您还可以通过语音口述指令，我们也让目标定位更精准、整体体验更流畅。总的来说，这让 Design Mode 中的可视化交互更像是日常编辑循环中的自然一环。

在底层实现上，选择某个元素会向上下文中加入两类互补的信号：元素的标识信息 (xpath、组件、attributes、计算样式，以及 fiber tree 中的 props) ，以及用于提供空间上下文的截图 (布局、周围元素和精确的页面状态) 。这让智能体准确获得定位源代码并高效编辑代码所需的信息。

#让模型跟上工作的节奏

当您在打磨用户界面时，一连串修改往往会接连发生。您调整一个组件，注意到它周围的间距，接着又发现另一个组件也需要保持一致。

Design Mode 让您在发现这些修改需求时就能立即发送。您可以指向一个元素，描述更改，再移动到页面的另一部分，在第一个编辑完成前继续发送下一处修改。Design Mode 让您更轻松地同时处理多项任务，也让管理多个子智能体成为可能。

这种工作方式最适合能够快速完成针对性 UI 调整的模型。Composer 2.5 在这方面表现尤其出色，因为它既快速，又擅长界面相关工作。随着智能体陆续完成任务，应用会热重载。您可以直接在运行中的产品里看到这些更改，并持续推进，直到界面达到理想状态。

我们相信，软件构建的未来应当让用户能够在高层抽象与底层细节之间无缝切换，并在需要时始终保持心流状态。Design Mode 为用户提供实现这一点所需的掌控力、自主性和精细编辑能力。

在 Agents Window 中试用 Design Mode。阅读 Browser 文档 了解更多，或下载 Cursor开始使用。