在 Design Mode 中通过视觉提示直接指挥智能体

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

我们今天更新的 Design Mode，正是我们缩短你所见与智能体所理解之间距离的方式之一。它让你在保持心流的同时，在上下文中直接编辑你的产品。

在 Cursor 浏览器中，你可以点击任意元素、在页面上绘制，或用语音描述改动，Cursor 就能获得编辑代码所需的上下文，而你则可以继续处理下一处编辑。

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

这让"发现"与"编辑"之间的循环更加紧密。你可以指向界面中你想修改的部分，而无需离开正在运行的产品，然后继续针对产品本身进行引用，同时智能体在底层完成编辑。

指向、绘制或口述改动

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

当改动取决于元素之间的关系时，多选就很有用。你可以引用两个组件，让智能体使其中一个与另一个匹配、删除重复内容，或一起调整一组组件。

当智能体需要知道指令适用于页面的哪个区域时，绘图就很有用。你可以圈出拥挤的区域、框出某个范围，或在动画页面上标记某一部分。标注会叠加在视口的一帧冻结画面上，因此智能体看到的正是你所针对的确切页面状态。

在此次发布中，你还可以用语音口述指令，我们也让定位更精准、体验更快速。总的来说，这让 Design Mode 中的可视化交互更像是正常编辑循环的一部分。

在底层，选取一个元素会把两种互补的信号加入上下文：元素的身份（xpath、组件、属性、计算样式、来自 fiber 树的 props）以及用于空间上下文的截图（布局、周围元素和确切的页面状态）。这恰好为智能体提供了高效找到源码并编辑代码所需的一切。

让模型匹配工作的节奏

当你打磨用户界面时，一连串的修改往往会一环扣一环。你调整了一个组件，注意到它周围的间距，接着又发现另一个组件应该如何与之匹配。

设计模式让你可以在发现这些修改时随手把它们派发出去。你可以指向某个元素，描述要做的改动，再移到页面的另一处，在第一处修改还没完成时就发送另一处修改。设计模式让你能更轻松地多任务并行，也让管理多个子智能体成为可能。

这套流程最适合搭配一个能快速做出针对性 UI 改动的模型。Composer 2.5在这方面表现出色，因为它既快又擅长界面相关工作。随着各个智能体陆续完成，应用会热重载。你能看到改动出现在正在运行的产品中，并持续调整，直到界面的手感恰到好处。

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

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

2025 年 12 月 10 日

推出调试模式：带运行时日志的智能体

Alexey 与 Albert

认识全新的 Cursor

Michael 与 Sualeh

在画布中与智能体生成的可视化内容进行交互

Alex Vandak Maloney