Cursor Design Mode 更新：在页面上直接“指给”智能体看，改 UI 不再只靠聊天
摘要：Cursor 的浏览器环境更新了 Design Mode，用户可以在运行中的产品界面里直接点选元素、框选区域或语音描述改动，把修改意图交给智能体。这套交互让“看见界面”和“理解代码”之间的断层更小，也把从发现问题到完成编辑的闭环压缩得更短。
从聊天到指向：UI 协作的新方式
聊天是人类与智能体协作最常见的界面，但 UI 工作天生更依赖空间表达。设计师、产品经理和前端开发在沟通界面改动时，往往不是打字描述，而是直接指着页面说：“这里”、“这块区域”、“这个状态”。
Cursor 今天的 Design Mode 更新，就是把这种“指着说话”的方式变成给智能体下指令的正式交互。
在 Cursor 浏览器里，你现在可以直接点击页面上的任意元素，在页面上画线、圈选，或者用语音说出改动需求。智能体会从你的操作中取得修改代码所需的上下文，而你不需要停下来解释一大段需求，可以继续处理下一处修改。
这意味着指令不再只是一句话，而是一组现场信息：你选中的元素、它背后的代码、周围的布局，以及页面上各部分之间的视觉关系。以前你可能要在聊天里描述“右上角那个按钮往下挪一点”，现在直接指一下就行。
点选、多选、绘制、语音：把意图交给智能体
Design Mode 提供了几种不同的输入方式，让你根据场景选择最顺手的表达：
- 点选元素：在运行中的应用里点击某个组件，输入针对该元素的提示，让智能体直接修改对应的代码。
- 多选参考：当改动依赖于多个元素之间的关系时，可以同时选中两个组件。例如让其中一个与另一个对齐、删掉重复内容，或一次性调整一组组件。
- 绘制标注：当需要说明“指令适用于页面的哪个区域”时，可以圈出密集的区域、框选一块范围，或标记动画页面的一部分。这些标注会叠加在当前视口的静止画面上，确保智能体看到的是你发出指令那一刻的页面状态。
- 语音描述：这个版本也支持语音输入，配合绘制一起使用，可以让意图表达更自然。
在底层实现上，选中一个元素会给智能体提供两类互补信号：一类是该元素的标识信息，包括元素路径（xPath）、组件、属性、计算样式，以及前端框架里的 props；另一类是整个区域的截图，包含布局、周围元素和精确的页面状态。简单来说，前者告诉智能体“这段代码在哪里”，后者告诉它“眼前长什么样”，两者结合才能准确定位源代码并高效修改。
跟上连续修改的节奏：并行子智能体与热重载
打磨界面往往是一连串小改动：你调完一个组件，发现它旁边间距不对，再一看另一个组件也该保持一致。如果每处修改都要等智能体完成上一次编辑，再输入下一句，流程就会很拖沓。
Design Mode 的思路是让你在发现问题的当下连续发送指令：指一个元素、描述改动、跳到页面另一部分、继续下发下一条。多个子智能体可以并行处理任务，应用会随着完成结果热重载，你直接在当前运行中的界面里看到改动，直到整体效果满意。
这种工作方式对模型的响应速度要求很高。Cursor 认为 Composer 2.5 在这方面表现突出，因为它既快，又擅长界面相关的调整工作。你可以在 Agents Window 里试用 Design Mode，更多细节可阅读 Browser 文档，或下载 Cursor 直接体验。
从聊天到“氛围编程”的小步快跑
这次更新可以看作 AI 编程交互范式的一次推进：从需要把想法组织成文字，到用自己的眼睛和手指在界面上“圈出”问题所在。它让用户在高层次的设计意图和底层的代码细节之间来回切换，而不必打断心流。对常在浏览器里打磨产品的开发者来说，Design Mode 明显缩小了“你看到的东西”和“智能体理解的东西”之间的差距。