AI 编程工具能写 UI，却无法自检 UI 回归问题

给一个编码 Agent 一个失败的测试，它会自我修复。给它堆栈跟踪、类型错误、红色的 CI 日志，它会读取信号、推理原因并纠正。这个循环就是 Agent 在后端让人感觉自主的全部原因。

在 UI 层面，它失效了。

Agent 修改了一些 CSS，什么也看不到，然后告诉你"看起来很棒"。它没有眼睛看结果。一个盲目的审核者会给一切盖章通过，而 Agent 在没有画面的情况下审核自己的 UI 改动，恰恰就是这样。所以它直接上线了，然后在后面才发现回归：按钮缩小了两个像素、卡片在移动端发生了重排、阴影在暗色模式下消失了。测试套件没有断言这些。Agent 自己也看不到。

我一直在为这个缺口构建视觉测试，而修复方法出乎意料地无聊：把实际的 diff 给 Agent。

缺失的那块从来不是更聪明的模型

我交谈过的每个大规模运行 Agent 的团队都徒手构建了这个功能的简陋版本。他们架起一个小服务器，只是为了在 Agent 面前得到一张渲染图，因为你不能通过 PR 传递原始 PNG，而且 PR 中的图片处理很痛苦。他们最终徒手维护着 Agent 一直需要的那种审核界面。

真正闭合这个循环的东西毫不光鲜：在每个 PR 上对 UI 进行云端截图，与基线对比，然后在 pull request 上发布检查和评论——就在 Agent 已经在看东西变红的地方。

从 PR 开始：评论带着已经拆分好的变更故事上线，所以你不用打开仪表板就能看到变化的形态。

两个细节比模型更重要。

Diff 被裁剪到只展示有变化的部分。不是整页截图。把一个 1440 像素高的页面交给视觉模型，它不会可靠地注意到按钮的内边距缩小了。给它裁剪后的部分，基线和候选版本并排展示，只裁出有变化的区域——它就能捕捉到。这种粒度就是审核型 Agent 和盖章型 Agent 之间的区别。

裁判捕捉到的回归：Add-to-cart 按钮在 rating-badge PR 根本不打算碰的页面上变成了淡淡的轮廓。

像素以行内方式返回。Agent 的视觉模型看的是实际的裁剪区域，而不是它打不开的 URL。

Agent 实际在做什么

AI 裁判根据 PR 声明的意图对每个变更打标签，是intended还是regression，并附上理由，所以列表在 Agent 看任何一个像素之前就已经完成了分诊。

构建视图：裁判在任何人打开 diff 之前就把变更故事分类为回归和预期的重样式。

一旦 MCP 连接上（一条命令加你的项目 key），Agent 就拥有了一小套映射到这个循环的工具：

list_build_stories  { status: "changed" }              -> 本次构建中有变化的故事
render_diff_image   { storyId, which: "before_after" } -> 前后对比，裁剪后，行内像素
get_diff            { storyId }                         -> AI 裁判的裁决 + 推理 + 图片 URL
accept_build        { ... }                             -> 将预期的变更提升为新基线

整合在一起，整个审核流程不需要你在中间：

Agent 打开 PR，视觉检查在云端渲染每个受影响的故事。

它列出变更的故事并拉取每个故事的裁剪前后对比图。

它对每个进行分类——根据这个 PR 的目标，判断是预期的变更还是真正的回归——在查看像素的同时也读取裁判的裁决。

它修复回归，接受预期的变更作为新基线，并发布一条总结评论。所需的检查在任何人打开任何东西之前就变绿了。

然后它转向终端：Agent 通过 MCP 运行 get_diff，判断 intended 还是 regression，修复真正的问题，重新运行，然后回报可以合并。

详细的步骤版本，逐工具说明，见 Triage visual changes from your coding agent。

我不让 Agent 打破的一条规则

一个 diff 无法解释的变更故事，不是可以接受或当作 flaky 挥手放过的。如果一个故事移动了，而这个分支根本没有理由去碰它，那就是一个信号——停下来调查基线，而不是给它盖章通过。

接受预期的变更是容易的 90%。标记那个不合符的，才是给 Agent 眼睛的整个原因。一个什么都接受的 Agent 只是更快地交付回归的方式。

为什么我认为这是视觉测试的方向

Agent 循环中的其他一切都已经自我闭合了：测试、类型、lint、CI。UI 是唯一仍然需要人眼看的界面。一旦 Agent 编写了大部分 UI，审核者就必须用与作者相同的方式触及变更——程序化地、在上下文中、不需要人肉在仪表板和终端之间搬运截图。

给 Agent 一双看 diff 的眼睛，最后那个开放的循环也就闭合了。

如果你想要成品版本，triage-visual-changes skill 将整个审核流程打包成一条命令，让你的 Agent 运行，完整的 skills 目录中有其余部分。

我正在构建 UI Verify——为编码 Agent 量身打造的视觉测试：云端渲染、一个裁决随 diff 旅行的 AI 裁判、以及 Agent 自己驱动的 MCP。我一边构建一边写这些东西。