页面哪里不顺眼，直接点给 Cursor：把界面修改接回源码

把按钮往右挪一点、让两个卡片标题对齐、收紧手机页面上那一块留白——这些意见在屏幕前很好说，转成给 AI 的文字时，却常常要先解释“是哪一个按钮”。如果页面已经跑起来，Cursor 的 Design Mode 提供了一条更直接的路：在网页上点中目标，再让编程代理修改对应源码。

这篇值得看的不是又一种聊天入口，而是它怎样把视觉意见变成带位置的开发任务。官方 Design Mode 文档说明，选择元素后，代理拿到的不只是一张截屏，还包括元素和代码之间的线索。

点中的对象，为什么能帮它找到代码

Design Mode 位于 Agents Window 内的浏览器。打开网页后切换到这个模式，可以点选一个元素，也可以选择多个元素，或在页面上画出需要修改的区域。单个元素适合改按钮、文字和控件；多选则更适合表达“这两个地方要一致”一类关系。

官方列出的上下文有两部分。一部分是元素身份：xpath、组件、属性、计算样式，以及 fiber tree 中的 props；另一部分是截图，保留目标周围的布局与当时的页面状态。前者帮助代理寻找可改的实现，后者帮助它理解你看到的视觉问题。两份材料一起提供，才比单独说“把这里改好看”更有方向。

例如，下面是一种教学用法：选中同一页面上两张卡片的标题区域，要求“保留两处字号差异，但让标题与正文之间的距离一致”。这里真正有价值的输入是两个被选择的对象，而不是那一句要求有多精巧。你仍应在结果出现后查看两处页面，确认它修改的是共同样式还是局部组件。

连续改页面，反馈不必攒成一大段

有些问题难以通过点中单一元素表达：一组卡片太拥挤，或动画中的一瞬间遮住了内容。文档中的绘制功能会把标注放在冻结的视口画面上，让代理看到你发出意见时的确切状态。语音也可以与绘制一起使用，但它的作用仍是补充指令，不能替代清楚的目标。

修改开始后，可以继续指向另一个地方发送意见。官方描述的流程是代理完成改动、应用热更新，再回到运行中的产品看结果。对于有多个相似组件的网页，这比先抄一串文件名再逐项解释更贴近实际的设计反馈过程。

Cursor 的 Agent 总览还列出了文件编辑、终端与浏览器工具。因此，这条链路可以延伸到运行检查。不过，页面能刷新只说明代码已生效；交互是否正常、移动端有没有溢出，仍要在相应页面核对。

我会把它放在“已经有可运行页面，正在打磨细节”的阶段：它让协作者更容易交代改哪里，也让开发者保留源码层面的控制。探索中可以利用 checkpoint 回到先前文件状态；官方明确它与 Git 分开，长期版本管理仍交给 Git。账号和模型使用条件看产品当前设置，不能把这种交互方式理解成任意网页都能一键改造成品。