聊天是与智能体协作的一种界面形式，但 UI 工作往往具有空间性。设计师、产品经理和前端开发人员通常通过指向页面元素、区域或状态的标注来进行沟通。
设计模式（Design Mode）——我们今天正在对其进行更新——是我们缩小所见内容与智能体所理解内容之间距离的方式之一。它让你能够在上下文中直接编辑产品，同时保持工作流不中断。
在 Cursor 浏览器中，你可以点击任意元素、在页面上绘制、或通过语音描述更改，Cursor 便能获取所需的上下文来编辑代码，而你则可以继续处理下一个编辑任务。
这是一种更快、更简单的方式，用于通过智能体迭代设计变更，因为指令不再仅仅是一句话——它现在可以包含所选元素、其背后的代码、周围的布局以及页面上的视觉关系。
这使得从发现问题到进行编辑的循环更加紧密。你可以直接指向你意图修改的界面部分，而无需离开正在运行的产品，然后在智能体在底层进行编辑的同时，持续以产品本身为参照进行交互。
指向、绘制或口述更改
设计模式提供了多种方式让你向智能体传达意图。你可以选择一个元素、添加多个引用、在界面上绘制、或使用语音描述更改。
当更改依赖于元素之间的关系时，多选功能非常有用。你可以引用两个组件，要求智能体让其中一个与另一个匹配、删除重复内容、或一起调整一组组件。
当智能体需要知道指令适用于页面的哪个区域时，绘制功能非常有用。你可以圈出一个拥挤的区域、框选一个范围、或标记动画页面的一部分。标注会叠加在视口的冻结帧上，这样智能体就能看到你当时所针对的精确页面状态。
在此版本中，您还可以使用语音叙述指令，我们让目标选取更精确，体验也更快。总的来说，这使得设计模式中的视觉交互感觉更像是正常编辑循环的一部分。
在底层，选取一个元素会向上下文中添加两个互补信号：元素的标识（xpath、组件、属性、计算样式、来自 fiber 树的 props）以及用于空间上下文（布局、周围元素和精确的页面状态）的截图。这为智能体提供了精确定位源代码并高效编辑代码所需的一切信息。
让模型与工作节奏相匹配
当您优化用户界面时，一个编辑链通常会引出下一个。您调整一个组件，注意到它周围的间距，然后看到另一个组件应该如何匹配。
设计模式让您可以在注意到这些编辑需求时立即发送出去。您可以指向一个元素，描述更改，移动到页面的另一部分，然后在第一个编辑完成之前发送另一个编辑。设计模式让您更轻松地执行多任务，并使得管理多个子智能体成为可能。
这种流程最适合能够快速进行针对性 UI 更改的模型。Composer 2.5 在这方面表现出色，因为它既快速又擅长界面工作。当智能体完成时，应用程序会热重载。您会看到更改出现在运行中的产品里，并继续调整，直到界面感觉合适为止。
我们相信，构建软件的未来是让用户能够在更高层次的抽象和更低层次的细节之间无缝切换，同时在他们想要的时候保持心流状态进行工作。设计模式为用户提供了实现这一目标所需的控制力、自主权和精确编辑工具。
在智能体窗口中尝试设计模式。阅读浏览器文档了解更多信息，或下载 Cursor 开始使用。
2025 年 12 月 10 日
推出调试模式：带运行时日志的智能体
Alexey & Albert
认识全新的 Cursor
Michael & Sualeh
在画布中与智能体创建的可视化内容进行交互
Alex Vandak Maloney
Chat is one interface for working with agents, but UI work tends to be spatial. Designers, PMs, and frontend developers often communicate through annotations that point to elements, regions, or the state of the page.
Design Mode, which we're updating today, is part of how we're shrinking the distance between what you see and what the agent understands. It lets you edit your product in context while staying in flow.
From the Cursor browser, you can click any element, draw on the page, or describe the change by voice, and Cursor gets the context it needs to edit the code while you move on to the next edit.
It is a faster, easier way to iterate on design changes with agents because the instruction is no longer just a sentence—instead it can include the selected element, the code behind it, the surrounding layout, and the visual relationships on the page.
This makes the loop between noticing and editing tighter. You can point at the part of the interface you mean without leaving the running product, then keep making references against the product itself while agents make the edits underneath.
Point, draw, or narrate the change
Design Mode provides several ways for you to convey intent to the agent. You can select an element, add multiple references, draw over the interface, or use your voice to describe the change.
Multi-select is useful when the change depends on a relationship between elements. You can reference two components and ask the agent to make one match the other, remove repeated content, or adjust a group of components together.
Drawing is useful when the agent needs to know what area of the page the instruction applies to. You can circle a crowded section, box in a region, or mark part of an animated page. The annotation sits over a frozen frame of the viewport, so the agent sees the exact page state you were responding to.
In this release, you can also narrate instructions using your voice, and we've made targeting more precise and the experience faster. Altogether, this makes visual interactions in Design Mode feel more like part of a normal editing loop.
Under the hood, picking an element adds two complementary signals into context: the element's identity (xpath, the component, attributes, computed styles, props from the fiber tree) and a screenshot for spatial context (layout, surrounding elements, and the exact page state). This gives the agent exactly what it needs to find the source and edit the code efficiently.
Matching the model to the rhythm of the work
When you are refining a user interface, one chain of edits usually leads to the next. You adjust a component, notice the spacing around it, then see how another component should match.
Design Mode lets you send those edits away as you notice them. You can point at one element, describe the change, move to another part of the page, and send another edit before the first one has finished. Design Mode allows you to multitask more easily and makes managing multiple subagents possible.
This flow works best with a model that can make targeted UI changes quickly. Composer 2.5 excels at this because it is both fast and strong at interface work. As agents finish, the app hot reloads. You see the changes appear in the running product and keep going until the interface feels right.
We believe the future of building software lets users move seamlessly between higher levels of abstraction and lower-level details while working in flow state when they want to. Design Mode provides users with the control, agency, and precision editing tools that make that possible.
Try Design Mode in the Agents Window. Read the Browser docs to learn more, or download Cursor to get started.
Dec 10, 2025
Introducing Debug Mode: Agents with runtime logs
Alexey & Albert
Meet the new Cursor
Michael & Sualeh
Interact with agent-created visualizations in canvases
Alex Vandak Maloney