AI写完代码后，这个工具帮你自动检查UI有没有”悄悄崩掉”

写前端代码最让人头疼的不是「功能跑不通」，而是「明明功能正常，布局却悄悄崩了」——文字叠在一起、溢出、碰撞，AI 改完代码之后往往是这类问题先冒出来。

vlmkit 就是来解决这个问题的。这是一个 确定性（deterministic）的前端视觉验证工具包，作者是日本开发者 mizchi（@mizchi），前身是 vrt，现在正式更名为 vlmkit。核心思路很直接：让 AI 给你的页面打分，而不是凭感觉说「看起来还行」。

它能做什么？

vlmkit 提供 17 个内置工作流，覆盖了前端开发中真正需要验证的环节：

• integrity check：扫描页面溢出、文本碰撞、响应式断点、键盘可操作性，不需要参考设计图，零配置跑起来
• snapshot + visual diff：记录你的基准截图，之后每次运行对比 diff 热力图，告诉你哪个地方变了、变了多少百分比
• markup-assist：用 VLM（视觉语言模型）辅助生成或修复 HTML/CSS，告诉 AI「这个 mock 要实现成什么效果」让它自己跑通 markup
• fix-loop：自动修复循环——跑检测、发现问题、让 AI 修、再跑、再修，直到所有 gate 全绿
• breakpoints sweep：响应式边界扫描，找出布局从哪个像素开始崩塌

每次跑完，所有失败的 gate 会输出机器可解析的修复清单，精确到 CSS 选择器和像素坐标。不用猜，不用肉眼反复对比。

怎么用？

Node 24+ 环境，一行装上：

npx vlmkit check integrity http://localhost:3000/

输出大概长这样：

verdict: DEFECTS
[page-overflow-x] @768: main > p (right edge 924px)
[text-collision] @1280: "Total: €1,240" overlaps "Refunds: €80"

修完再跑，直到 verdict: CLEAN。Agent 集成也很顺滑，支持 MCP server 和 SKILL.md 格式，直接 npx skills add mizchi/vlmkit 装进 Claude Code，然后用自然语言描述需求，Agent 自动路由到对应工作流。

为什么值得装？

AI 写代码越来越强，但视觉层面的「看起来没问题」一直是盲区。传统 VRT（视觉回归测试）要么配置复杂、要么误报率高。vlmkit 把确定性检测和 AI 推理结合起来——模型提方案，数字说了算，而不是模型说「我检查过了，没问题」。

另一个亮点是 fix-loop：很多工具只负责发现问题，修复是工程师自己的事。vlmkit 帮你把「检测→修复→再检测」这个循环跑完，减少来回折腾。

适合团队场景：CI 里加一行 npx vlmkit check integrity 做 gate check，或者让 Claude Code 跑完需求后自动调用 vlmkit 自检一遍再提交。视觉问题发现得越早，修复成本越低。

GitHub：https://github.com/mizchi/vlmkit

GitHub: https://github.com/mizchi/vlmkit