Cursor 更新后的 Design Mode（3分钟阅读）

# 在Design Mode中通过视觉提示直接操作Agent 来源：https://cursor.com/blog/design-mode Chat是与Agent协作的一种界面，但UI工作往往是空间性的。设计师、产品经理和前端开发者通常通过指向元素、区域或页面状态的标注来进行沟通。 我们今天更新的Design Mode，正是我们缩小所见与Agent理解之间差距的一部分。它让你能在上下文中编辑产品，同时保持流畅的工作流。 通过Cursor浏览器，你可以点击任意元素、在页面上绘制，或通过语音描述更改，Cursor会获取所需的上下文来编辑代码，而你则可以继续进行下一次编辑。 这是一种更快、更简单的方式，借助Agent迭代设计更改，因为指令不再仅仅是一句话——而是可以包含所选元素、其背后的代码、周围的布局以及页面上的视觉关系。 这使得观察与编辑之间的循环更加紧密。你可以指向你想表达的界面部分，而无需离开正在运行的产品，然后持续对产品本身进行引用，同时Agent在底层进行编辑。 ## https://cursor.com/blog/design-mode#point-draw-or-narrate-the-change Point, draw, or narrate the change Design Mode提供了多种方式让你向Agent传达意图。你可以选择一个元素、添加多个引用、在界面上绘制，或使用语音描述更改。 在运行中的应用中点击一个元素，针对该选中元素发出提示，然后让Agent编辑代码。 当更改依赖于元素之间的关系时，多选非常有用。你可以引用两个组件，让Agent使一个匹配另一个、移除重复内容，或一起调整一组组件。 选择多个元素，并描述它们应如何一起变化。 当Agent需要知道指令应用于页面的哪个区域时，绘制非常有用。你可以圈出一个拥挤的部分、框出一个区域，或标记动画页面的一部分。标注会覆盖在视口的冻结帧上，因此Agent能看到你当时响应的确切页面状态。 在此版本中，你还可以使用语音叙述指令，并且我们让定位更精确、体验更快。总体而言，这让Design Mode中的视觉交互更像是正常编辑循环的一部分。 结合使用语音输入和绘制来描述更改。 在底层，选取一个元素会将两个互补信号添加到上下文中：元素的标识（xpath、组件、属性、计算样式、来自fiber树的props）和用于空间上下文的截图（布局、周围元素和确切页面状态）。这为Agent提供了找到源代码并高效编辑所需的一切。 ## https://cursor.com/blog/design-mode#matching-the-model-to-the-rhythm-of-the-work Matching the model to the rhythm of the work 当你在优化用户界面时，一个编辑链通常会引导出下一个。你调整一个组件，注意到它周围的间距，然后看到另一个组件应该如何匹配。 Design Mode让你在注意到编辑需求时即可发送。你可以指向一个元素，描述更改，移到页面的另一部分，并在第一个编辑完成前发送另一个编辑。Design Mode让你能更轻松地进行多任务处理，并使得管理多个子Agent成为可能。 这种工作流最适合能够快速进行针对性UI更改的模型。 Composer 2.5在这方面表现出色，因为它既快速又擅长界面工作。当Agent完成时，应用会热重载。你会看到更改出现在运行的产品中，并继续调整直到界面满意。 我们相信，构建软件的未来是让用户能够在更高层次的抽象和更低层次的细节之间无缝切换，同时在他们希望时保持流畅的工作状态。Design Mode为用户提供了控制力、自主性和精确编辑工具，使之成为可能。 在[Agent窗口](https://cursor.com/docs/agent/agents-window)中尝试Design Mode。阅读[浏览器文档](https://cursor.com/docs/agent/browser)了解更多，或[下载Cursor](https://cursor.com/download)开始使用。