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 执行、文件级实施这几个环节。