Cursor Agent Design Mode 从界面设计至代码实现教程

明明页面就在眼前，可你只说一句「把这里改得更舒服」，Agent 还是得猜半天——这正是 Cursor Agent Design Mode 能派上用场的场景。它会把当前运行的页面、你选中的元素、组件信息、计算样式还有视觉位置全都同步给 Agent，不用再纯靠文字描述改啥。先把边界说清楚：Design Mode 只管正在运行的应用的界面调整，可不是拿一张静态设计稿直接给你生成完整项目的。

开始之前得先备好三个前提：Cursor 能正常打开你的项目，应用已经在本地或者可访问的开发地址跑起来了，Agent 窗口里的内置浏览器能正常加载这个页面。官方文档是用 macOS 界面演示的，给的快捷键是 Cmd + Shift + D；Windows 和 Linux 用户不用硬记这组键，直接点内置浏览器右上角的 Design 按钮更靠谱。要是连 Design 控件都找不到，先把 Cursor 更新到最新版，再确认你打开的是 Agent 窗口里的内置浏览器，不是自己电脑的系统浏览器哈。

让内置浏览器进入 Design Mode

入口位置：在 Cursor 的 Agent 窗口里打开内置浏览器，加载已经跑起来的应用。Design 控件就在浏览器工具栏的右上角；用 macOS 的同学也可以按 Cmd + Shift + D 快速切换。

主要动作：点一下 Design 控件，让它变成高亮状态。这时候左边的 Agent 区域也会出现 Design Mode 的标识。你把鼠标移到页面元素上，界面就会显示可选择的边框和对应的组件信息。

成功标志：浏览器右上角出现蓝色的 Design 状态提示，左边也能看到 Design Mode 的标识。再按一次同一个快捷键或者点一下 Design 控件关掉，就能回到普通的浏览状态。

失败处理：要是快捷键没反应，先点一下内置浏览器让它获得焦点，再用右上角的控件切换就行。如果页面是空白的，先去查开发服务器、端口或者构建有没有问题——Design Mode 可不会帮你启动还没跑起来的应用。

这张图重点看两个地方：右上角的蓝色 Design 标识，还有左下角的 Design Mode 状态。两处都亮了，才说明当前网页已经从普通浏览模式切到可视化选择模式了。

选中元素，把视觉问题说具体

入口位置：保持 Design Mode 开着，把鼠标移到你想调整的标题、按钮、卡片或者其他界面元素上。

主要动作：点一下目标元素就行。选中之后会出现边框、组件名称还有浮动输入框。写提示词的时候得同时说清楚对象、要改啥、还有啥不能改，比如「把这个标题放大 8 像素，其他标题都别动」，比只说「标题大一点」更容易得到精准的小范围修改。

成功标志：选中的边框刚好只包住目标元素，浮动输入框前面还带着这个元素的组件标识。这时候 Agent 拿到的就不只是截图了，还有元素标识、组件、属性、计算样式、props 这些代码层面的线索。

失败处理：要是边框选到了父容器，就把鼠标移到更具体的文字或者按钮上重新点。页面层级太密选不准的话，别靠一大段文字解释位置，先把选择范围缩小，再补上「只改当前这个实例」或者「保持周围间距不变」这类限制条件。

蓝色边框说明当前选中的是标题元素，浮动输入框前面的组件名称，刚好把你看到的视觉元素和对应的代码对象对应上了。发送请求前先检查这两个地方，能少犯「改错了一层容器」的低级错误。

涉及布局关系时，改用多选、区域和语音

入口位置：如果修改涉及两个按钮、多个重复组件或者一整块布局，还是在同一个内置浏览器页面里操作就行。官方文档列的快捷操作有：Shift + 拖动选区域、Cmd + L把元素加入聊天、还有 Option + 单击把元素加入输入框；这些快捷键都是以官方 macOS 演示为准的哈。

主要动作：把有关联的元素一起选中，再描述它们之间要怎么改，比如「让第二个按钮和第一个按钮的高度、间距保持一致」。要是遇到动画效果，或者很难用组件名说清楚的位置，可以在页面静止画面上圈出对应的区域。打字不方便的话，点麦克风用语音说你的需求也行。

成功标志：选择的边框刚好盖住你要改的多个元素或者区域，输入区域里也保留了这些视觉上下文；用语音的话能看到录音的波形和计时。多选可不是为了一次塞更多任务，而是为了让 Agent 搞明白元素之间的对齐、重复、间距这些关系。

失败处理：要是框选的范围太大，截图上下文会带进去好多无关元素，先取消重新选就行。语音转写出来的内容有歧义的话别直接发，先检查下组件名、尺寸数字还有否定词对不对。好几个互不相关的改动要拆成不同的任务，方便一项一项验证，错了也能单独撤回。

这张图里同时能看到区域选择的边框和语音录制的波形。区域是告诉 Agent「改哪一块」，语音是说明「怎么改」，缺了哪一样，都可能让修改的范围跑偏。

发送修改后，盯住代码落点和任务状态

入口位置：确认好选中的对象和写的提示词都没问题，就点浮动输入框右边的发送按钮。任务会自动进到左边的 Agent 区域里。

主要动作：留意下 Agent 是不是先定位组件和样式，再开始具体修改。官方演示里，Agent 会根据你选中的标题找到对应的样式，然后把改动交给后台任务去跑；这时候你可以继续选下一处要改的界面，但别给同一个元素连续排好几个互相冲突的需求哈。

成功标志：左边出现正在运行或者已经排队的任务，说明文字和你刚才选的元素能对得上，状态里还能看到 Agent 正在找样式或者修改目标文件。要是任务描述突然变成了另一个组件，赶紧停下来，别等错误的改动扩散开。

失败处理：要是 Agent 一直卡在规划阶段，或者找不到对应的代码，就检查下：运行的页面是不是来自当前工作区、源映射能不能用、组件是不是外部包或者内嵌页面提供的。如果要改的是第三方页面的内容，你能视觉选中不代表有可编辑的源码，得回到自己的组件边界里重新选。

左边的后台任务说明 Agent 已经从「识别视觉目标」进到「定位代码」的阶段了，右边的运行页面还保持在原来的位置，等修改完就能马上对照效果。

从视觉上下文核对到文件级实施

入口位置：任务开始执行之后，去看 Agent 对话里的组件说明、读取的文件还有实施步骤。如果改动比较大，Agent 可能会先给你生成修改计划，或者先问你几个问题。

主要动作：先核对下文件名和改动范围是不是符合你的预期，再让任务继续跑。Design Mode 会把元素标识和页面截图一起加到上下文里：前者帮着定位源码，后者保留了布局、周围元素还有当时的页面状态。这俩信息是互补的，可别只看其中一样。

成功标志：Agent 能明确指出对应的组件或者源文件，实施计划和你选中的界面对象是对得上的；代码改完之后，运行的应用会通过热更新显示出变化。你再去核对下标题尺寸、按钮的相对关系、间距还有响应式状态，视觉效果和你写的提示词一致了，才算真的完成。

失败处理：要是改的文件不对，就先拒绝或者撤回改动，重新选更具体的元素。哪怕页面看起来改对了，也要去检查下代码差异，别把一次局部调整写成了全局样式。要是没出现热更新，先去看构建终端和浏览器有没有报错，再手动刷新页面；别靠重复提交相同的任务来掩盖编译失败的问题。

这里能看到，视觉对象已经转换成了文件和任务层面的实施计划。计划可不是最终结果，后面还得回到运行页面核对热更新的效果，再看看代码差异是不是只影响了目标范围。

完成检查清单

1. 项目的源码在当前 Cursor 工作区里，应用已经在内置浏览器中正常运行。
2. Design 控件是高亮状态，鼠标移到页面上能出现可选择的元素边框。
3. 单个改动只选一个明确的元素，只有改布局关系的时候才用多选或者区域选择。
4. 提示词写清楚了目标对象、要改的数值或者关系，还有不能动的范围。
5. 用了语音的话，已经检查过转写结果，组件名、尺寸、否定词都没有识别错误。
6. 发送之后能在 Agent 区域看到和所选元素对得上的任务，还有代码定位的过程。
7. 运行页面已经完成热更新，视觉效果、响应式状态还有周围布局都复查通过。
8. 代码差异都在预期的组件或者样式文件里，没有把局部调整扩大成全局规则。
9. 5 张步骤截图都能正常打开，分别对应模式开启、元素选择、多元素与语音、Agent 执行、文件级实施这几个环节。