SevenTnewS

视觉 AI 交互

Cursor 给开发者提供了更智能的方式告诉 AI 要修复什么:直接指着它

Cursor 更新的 Design Mode 让工程师和设计师可以通过点击元素、在页面上绘制或说出修改内容来修改 UI,同时 AI 智能体会提取元素身份、样式和布局上下文来编辑代码。这种方法通过使模型的运行速度与人类发现并处理视觉问题的速度对齐,加速了迭代过程。

Emmanuel Fabrice Omgbwa Yasse

2026-07-12 · 阅读需 4 分钟

Cursor 给开发者提供了更智能的方式告诉 AI 要修复什么:直接指着它

Cursor 更新了其 Design Mode,新增了视觉交互工具,让开发者可以直接在产品的实时浏览器视图上指向、绘制或说出修改内容。此次更新旨在减少人类在屏幕上所见内容与 AI 智能体对底层代码理解之间的摩擦。 vibe-coding-works-but-the-technical-debt-nobody-talks-about-could-sink-your-project

从聊天到空间对话

聊天仍然是 AI 编码智能体的主要界面,但设计工作是空间性的。设计师、产品经理和前端开发者通过批注进行沟通:指向特定的元素、区域或页面状态。Cursor 的 Design Mode 将这一过程形式化。用户不再仅仅用文本描述更改,而是识别页面上的视觉目标,智能体则自动提取相应的代码上下文。 microsofts-bet-on-small-models-for-agentic-ai-is-about-orchestration-not-knowledge

当用户选择一个元素时,智能体会收到两个信号:元素的身份、xpath、组件名称、属性、计算样式、fiber tree props,以及一张用于提供空间上下文、布局、周围元素和精确页面状态的截图。智能体使用这些信号来查找源代码并应用更改。

三种输入方式,一个意图

Design Mode 提供了多种传达意图的方式:

  • 选择一个或多个元素。这允许进行依赖于组件关系的更改,例如对齐元素、移除重复内容或一起调整一组元素。
  • 绘制在页面上标记一个区域,圈定一个部分,或框出一个动画区域。批注会覆盖在视口的冻结图像上,因此智能体在收到指令的那一刻能看到精确的页面状态。
  • 说出修改内容。语音命令让用户在选择视觉目标的同时描述更改。

指向和叙述的结合模仿了团队在 pull request 或协作设计工具中审查设计的方式。但现在,从发现问题到应用修复之间的循环被缩短了,因为模型直接在运行中的产品上操作。

将模型与工作流匹配

Design Mode 是为多任务流而构建的。用户可以指向一个元素,描述更改,移动到页面的另一部分,并在前一次修改完成前提交另一个修改。Cursor 在后台运行多个子智能体,在每个任务完成时热重载应用程序。 why-parallel-agents-are-the-next-battleground-for-ai-orchestration

Cursor 推荐在此工作流中使用 Composer 2.5,称其快速且高效,适合 UI 工作。该模型能够进行有针对性的、范围明确的更改,这契合了 Design Mode 所实现的快速迭代模式。

该公司在公告中写道:“我们相信软件开发的未来将使用户能够在更高层次的抽象和更低层次的细节之间流畅切换,在需要时保持心流状态。”

对前端开发的影响

作为 AI 智能体的控制机制,视觉批注可能看起来只是一个小的 UI 改进,但它改变了开发者与编码模型互动的方式。传统的智能体界面依赖于用户用自然语言描述代码更改的能力。这对于功能更改有效,但对于视觉调整来说不够精确,描述一个 4 像素的间距更改或一个特定的盒阴影需要要么测量,要么提供智能体能解析的截图。

通过向智能体同时提供元素身份及其空间上下文,Cursor 减少了视觉更改请求中的歧义。用户不需要将空间观察转化为文本。批注本身就承载了含义。

空间交互作为新范式

Design Mode 并非第一个为 AI 编码提供视觉反馈循环的工具。GitHub Copilot 的工作区和 Replit 的 Ghostwriter 已经尝试过包含文件树和编辑器内选择的上下文窗口。但 Cursor 的方法有两个不同点:它在实时运行的产品上操作,而不是代码文件树;它将浏览器视图视为一个可编辑的表面,用户的视觉输入被解析为智能体的结构化信号。 cursor-expands-team-marketplaces-with-mcp-servers-and-org-group-access

这种基于空间批注的工作流对于非开发者(设计师或产品经理)发起或审查前端更改的团队可能特别有价值。如果设计师可以圈定浏览器视图上的一个区域并说“把这个部分变窄”,而无需打开文本聊天,那么将代码更改委托给智能体的门槛就会显著降低。 the-migration-isnt-finished-until-the-build-server-says-it-is-why-ai-agents-keep-failing-at-enterprise-java

这是否会减少设计与工程之间的交接轮次,或者仅仅移动了瓶颈,取决于智能体解释批注的可靠性以及团队对智能体驱动的 UI 修改的接受程度。Cursor 的更新押注于答案将是更视觉化、更少文本化。

Design Mode 现已可在 Cursor 智能体窗口中使用。该公司已发布了浏览器功能的文档,并提供了编辑器最新版本供下载。