Cursor Design Mode 上线 Annotate 标注功能，可在运行界面直接指引编码 Agent 完成代码修改

Cursor 新版本在 Design Mode 中正式新增 Annotate 可视化标注功能，开发者不用切换代码文件，直接在预览运行界面圈选、标记 UI 区域，就能给编码 Agent 下达精准指令，Agent 自动识别标注位置、页面截图与对应源代码，一键完成前端代码调整，大幅缩短 UI 调试与代码修改的操作链路，让可视化需求直接转化为代码改动，显著提升前后端联调与页面迭代效率。

一、功能基础信息一览表

表格

二、Annotate 标注功能核心操作能力

1. 单元素定点标注

点击运行界面里任意 UI 组件，Annotate 会自动抓取 DOM 信息、组件代码、样式参数，把元素上下文同步给编码 Agent，不用文字描述位置，直接针对目标组件下发修改任务。

2. 多区域框选与圈注

按住 Shift 拖动鼠标，框选页面整片区域；也可以手绘圆圈、方框做标记，标注会固定在当前页面快照上，Agent 能精准锁定修改范围，适配多组件联动调整的开发场景。

3. 标注信息自动同步至 Agent 对话

完成标注之后，按下快捷键 Cmd+L，即可把选中元素 + 手绘标注 + 页面截图一起发送到 Agent 聊天窗口，AI 自动匹配对应源码文件，直接执行代码编辑，全程无需手动查找代码位置。

三、完整使用操作步骤

1. 打开 Cursor 编辑器，调出 Agents Window，启动项目开发服务，加载运行预览页面。
2. 按下快捷键开启 Design Mode，激活 Annotate 标注工具。
3. 在预览界面点选组件，或者手绘圈出需要修改的页面区域，完成可视化标注。
4. 将标注内容同步给编码 Agent，输入文字补充修改需求。
5. Agent 自动读取标注上下文、页面快照与组件源码，自动完成代码改写，实时刷新预览效果。

四、功能带来的开发效率提升

1. 打通所见即所得的开发流程，从 “文字描述页面” 变成 “直接指着页面改代码”，减少沟通偏差。
2. 自动绑定 UI 元素与源代码，省去手动查找组件文件、定位 CSS 样式的时间。
3. 标注附带页面快照，Agent 可以完整还原页面布局状态，修改结果更贴合设计预期。
4. 多元素批量标注支持批量调整多个组件，适合整页布局统一优化，迭代速度更快。

【相关 FAQ】

问题 1：Cursor Design Mode 新增的 Annotate 功能，能在哪个界面直接指导编码 Agent？

回答 1：Annotate 标注功能可以直接在项目运行预览界面操作，无需跳转代码编辑器，直接给编码 Agent 下发可视化修改指令。

问题 2：开启 Cursor Design Mode 以及使用 Annotate 标注，需要用到哪些快捷键？

回答 2：开启 Design Mode 使用 Ctrl+Shift+D（Windows）、Cmd+Shift+D（Mac）；Shift + 拖动可以框选区域；Cmd+L 可以把标注元素同步到 Agent 对话窗口。

问题 3：Annotate 标注会把哪些信息同步给编码 Agent，保证代码修改精准？

回答 3：会同步页面截图、选中 DOM 元素信息、组件源码、计算样式与页面布局关系，让 Agent 精准锁定对应代码位置，完成修改。

问题 4：Annotate 标注功能只支持单选单个 UI 元素吗？

回答 4：不是，Annotate 支持单元素定点选择，也支持 Shift 拖动进行多元素框选、手绘圈注整片页面区域，满足多组件同步修改需求。

问题 5：Annotate 标注功能只能在代码编辑窗口使用吗？

回答 5：不可以，Annotate 仅在 Agents Window 内置浏览器预览窗口生效，必须打开项目运行预览页面，才能开启标注并指挥编码 Agent。

【数据来源】

[2026-06-05]（Design Mode 新增 Annotate 标注功能）Cursor 官方博客

[2026-07-28]（Cursor Design Mode 标注操作教程）learncursor.dev

[2026-06-05]（Annotate 可视化指引 Agent 开发）Cursor 官方文档

[2026-04-02]（Cursor3.0 版本更新日志）Cursor 版本更新公告

免责声明：本次 Annotate 功能的操作方式、快捷键与交互逻辑均来自 Cursor 官方发布文档；功能可用性取决于软件版本，升级至最新版 Cursor 才可完整启用 Design Mode 标注能力；代码改写效果由编码 Agent 结合标注上下文自动生成，开发者可按需二次核对代码内容。