AREX Feed Article
Cursor 官宣 design mode 新功能 Annotate：点选元素、页面上手绘给 agent 提示，Cmd+Shift+D 启用
北京时间 10 月 28 日凌晨 3 时 11 分（UTC 时间 10 月 27 日 19 时 11 分），Cursor 官方 X 账号 @cursor_ai 发帖宣布 design mode 推出新功能 Annotate：「给 agent 视觉提示：编辑元素、在页面上绘制，并在不同屏幕尺寸下审阅你的设计。」帖文附带一段演示视频，截至本文发稿查看，已获得约 13 万次浏览、2,364 个点赞和 191 条回复。三秒后官方补上启用方式——「在浏览器里按 Cmd+Shift+D 即可开始」，并给出文档链接。Cursor 在这条里没有披露可用范围、版本要求或定价；随后补上了版本门槛，也写清了这套交互的机制，定价与套餐限制则两处均未提及。
圈一下、画一笔，改动直接进代码
按的描述，Annotate 的用法是「在运行中的应用上留便签」。入口在 Agents Window 的内置浏览器里：点击工具栏的 Annotate 按钮，或聚焦浏览器后按 Cmd/Ctrl+Shift+D，命令面板里对应 Toggle Design Mode；第一次打开前，按钮会显示 Try Annotate 预览和一小段演示。页面顶部有一行手势提示，Esc 先取消当前的手绘笔画、文字编辑或打开的便签，再按一次才退出。
点击页面上的任意元素即可选中它并打开便签，写下要改什么，agent 随即改代码；点击前按上下方向键，可以把高亮移到父级或子级元素。按住 Shift 连续点击能把多个元素加进同一条便签，文档给的用例是让一个组件向另一个看齐、删除重复内容、或让一组组件一起调整。绘制类操作有 Draw、Ellipse、Rectangle、Arrow 四种标记工具：拖拽框选区域，按住 Shift 锁定单轴、按住 Option/Alt 从中心画起，Cmd/Ctrl+Z 撤销。双击文本元素可以直接在页面上改字，Return 保存、Esc 还原，文字改动总是等待统一发送；单元素便签里点 Edit CSS properties 会打开这个元素的 CSS 检查器，改动会随这条便签一起发给 agent；便签里有文字或 CSS 改动后出现 Dictate 按钮，可以语音口述。
发送节奏由便签卡片上的 Batch edits 开关控制：默认关闭时，按 Return 把当前便签立刻发给 agent；打开后，便签以编号图钉留在页面上，工具栏的 Send 按钮带计数，一次点击把所有待发便签打包成一条消息。也可以按 Cmd/Ctrl+L 把便签内容放进聊天输入框。agent 工作期间再发的便签按排队跟进处理，改动经由 dev server 热更新直接出现在页面里。
每条便签背后：选择器路径、组件栈和一张裁剪过的截图
文档说明了 agent 实际收到什么。每条便签带两类上下文：一是被选元素的细节——tag、id、class、attributes、CSS 选择器路径、可见文本的前 200 个字符、元素的尺寸与位置，外加六项计算样式：color、background color、font size、font family、display、position；在 React、Vue、Svelte 应用里还会附上组件名和组件栈，让 agent 能定位到源码。二是一张截图，裁剪到被选元素或框选区域，手绘标记保留在图上。
这个机制直接回应了回复区的一个疑问： 问，画出来的线条是以截图、还是以线条下的 DOM 元素传给 agent——按文档，点选元素时两种信息都会随这条便签发出。
要 Cursor 3.24.18 以上，旧入口只剩一支笔图标
版本门槛写在里：Annotate 需要 Cursor 3.24.18 或更高版本，更早版本的浏览器工具栏显示的是一支标着 Design Mode 的笔形图标。Canvas 标签页保留这个旧开关，那里的便签直接进聊天，不支持 Batch edits，也不能就地编辑文本。
design mode 不是今天才有的：6 月已更新过一轮
Annotate 不是 Cursor 第一次做视觉提示。6 月 5 日，官方博客就介绍过 design mode：在 Cursor 浏览器里点击任意元素、在页面上绘制或用语音描述改动，点选元素会向 agent 提供元素身份（xpath、组件、attributes、计算样式、fiber tree 中的 props）和一张截图；那篇博客同样推荐配合 Composer 2.5 使用。10 月 9 日发布的 3.24 版本（Agents Window）更新日志里，也已经包含一条的条目。当前文档延续了这一推荐：这套流程「最适合速度快、界面能力强的模型」，官方点名 Composer 2.5。
圈得准不准：回复区里的质疑与叫好
叫好的一方认为画圈比打字直接：（@vibecodeceo）写道，他一半的设计提示过去都是「把按钮往左移一点——不对，是另一个」，「一个圈加一个箭头就把整个来回省掉了」；（@andpoul）说把批注直接放在页面上，比放进提示框里好得多。
质疑集中在映射的可靠性上。（@gaussdevhere）说：「只有当 agent 能把你的红圈映射回代码里正确的组件、而不只是像素时，Annotate 才有意义。」 把考验设在嵌套组件上：圈住一个嵌套组件，agent 会改到正确的 jsx 文件，还是只给外层容器打补丁。按文档，每条便签都会附带选择器路径和组件栈；命中率如何，官方材料没有给出实测数据。
也有用户认为这次改动是退步。（@DeoAM，X 资料自述为 Stream Climate 的 founding designer）写道，用下来 Annotate「退了几步」：过去可以在提示里内联引用组件（比如 Style {button A}{button B} like {button C}），现在只剩三个不带名字的按钮加一个提示框，他问官方能否把内联上下文加回来。
「New」的范围也有人存疑。 在回复里问：「这不是几个月前就上线了吗？」在官宣之前的 10 月 15 日，Cursor 论坛已有用户 Martin_Hardoy 发帖称 Design Mode 被「Annotations」取代，署名 Colin 的确认了替换，并逐条解释快捷键变化是有意为之（Return 承担了过去 Ctrl+Enter 的发送功能）。至于帖文承诺的第三项能力——在不同屏幕尺寸下审阅设计——当前文档页里没有单独的说明段落，具体形态只能看演示视频。