AI 编程开始看画面了:Cursor 让 Agent 按 UI 改代码

前端开发最折磨人的地方，不是代码写不出来，而是“你改的不是我看到的问题”。

Cursor Design Mode / Canvas 这条线，可以写，但不能写成 Cursor 新闻。

更准确的角度是：AI 编程开始从只读代码，进入“看画面再改代码”的阶段。

这对前端、设计系统和产品原型很重要。

纯文本 prompt 改 UI 很别扭

以前让 Agent 改 UI，经常会出现这种对话：

把右上角按钮往左一点。
不是这个按钮，是卡片里的那个。
再小一点。
不对，移动后间距坏了。

问题不在模型不会写 CSS。

问题在于 UI 反馈本来就是视觉的。

如果 Agent 只能读代码和文字描述，它必须猜你说的“那个按钮”“这里太挤”“整体不平衡”到底指什么。

Design Mode 的意义，就是把这种视觉反馈直接放进工作流。

你可以指、画、圈、说，让 Agent 看到问题再改代码。

这会改变前端 Agent 的工作方式

一个更自然的前端工作流会长这样：

这和传统代码补全不一样。

传统补全是在文件里预测下一行。

视觉 Agent 是在画面和代码之间来回对齐。

它要知道：屏幕上的这个问题，对应代码里的哪一层组件、哪一段样式、哪个状态分支。

最适合改哪些东西

不要期待 Design Mode 一上来就替你做完整产品设计。

它更适合这些明确反馈：

• 卡片间距太大或太小。
• 按钮层级不明显。
• 移动端某个区域溢出。
• 表单状态没有反馈。
• 文案、颜色、边框和布局不统一。
• 设计稿和实现差一口气。

这些问题用文字说很烦，用截图圈出来很快。

Agent 的价值不是取代设计判断。

而是把“看到问题 -> 找到代码 -> 修改 -> 再看”这个循环压短。

使用时要先定边界

让 Agent 看画面改代码，也有风险。

它可能为了让当前截图好看，破坏组件复用、响应式布局或设计系统规则。

所以给它任务时，最好加上边界：

只修改当前组件，不改全局主题。
保持移动端断点不变。
修改后说明涉及哪些文件，以及为什么这些改动不会影响其他页面。

这句话比“帮我调好看一点”更重要。

视觉反馈让 Agent 更容易动手，也更需要规则约束。

AI 编程终于开始接近真实前端流程

真实前端开发从来不是只写代码。

它是需求、画面、组件、状态、交互、截图、回归之间的循环。

Cursor Design Mode 的方向，说明 AI 编程工具正在补上“看见结果”这一步。

以后评价前端 Agent，不只看它会不会写 React。

还要看它能不能根据画面定位问题，改完以后不破坏设计系统。

AI 编程开始看画面了。

这比又多一个代码补全按钮更值得写。

参考

Cursor Design Mode：https://nitter.poast.org/cursor_ai/status/2062611887871988189
Cursor Canvas publish/share：https://nitter.poast.org/cursor_ai/status/2061878340265656620