Cursor Design Mode 上线 Annotate：在运行中的页面上点选、圈画、改字，把视觉批注直接发给 Agent 改代码

核心背景与行业痛点

前端改 UI 时，最费劲的往往不是写代码，而是把「这里间距太大、那个按钮要和旁边对齐」用文字讲清楚。纯文本提示让 Agent 自己猜是哪个组件、哪一行样式，来回几轮才能改对。Cursor 10 月 27 日在官方 X 账号宣布，Design Mode 新增 Annotate，把「指给它看」变成正式的提示方式。

架构亮点与底层机制

据官方文档，Design Mode 运行在 Agents Window 的内置浏览器里，打开正在运行的应用即可批注：单击选中元素（方向键切到父或子元素），Shift 多选做对比，拖拽框选区域并用画笔、椭圆、矩形、箭头标注，双击就地改文字，或打开 CSS 检查器直接改属性，还能语音口述。每条批注会附带元素的 tag、id、class、选择器路径、前 200 个可见字符、尺寸位置和 6 项计算样式，以及裁剪后的截图；React、Vue、Svelte 应用还会带上组件名和组件栈，让 Agent 直接定位到源码。

权威 Benchmark 与实测跑分对比

这是一项交互功能，官方未公布效率或准确率数据，本站不做推测。官方帖称可在不同屏幕尺寸下审视设计，文档本轮未单独说明该项细节；发帖约 1 小时内获 1100 多个点赞。

开发者实战落地与开箱指南

升级到 Cursor 3.24.18 及以上，在 Agents Window 打开浏览器，点工具栏的 Annotate 或按 Cmd+Shift+D。默认 Batch edits 关闭，回车即把单条批注发给 Agent；打开后批注变成编号图钉，攒一轮一次发送。Cmd+L 可把批注放进聊天框，Option+单击直接把元素加入对话。配合开发服务器热更新，改动会在 Agent 完成后立刻出现在页面上；官方推荐搭配 Composer 2.5 这类擅长界面的快速模型。