Impeccable 是由前 Google Chrome DevTools 负责人 Paul Bakaus 开源的前端视觉质量检测工具，通过 CLI 一键扫描网页中的设计反模式并自动优化视觉表现。项目上线不到四个月即突破万星，成为 AI 辅助设计领域增长速度最快的开源工具之一。
- 27 条确定性反设计模式规则：纯本地运行，无需 LLM 调用，毫秒级完成扫描，覆盖边距、对比度、行宽、色彩渐变、动画曲线等常见设计缺陷
- 12 条 LLM 辅助评审规则：在确定性检测基础上，针对需要审美判断的场景调用 AI 进行深度视觉分析
- Live 交互模式：在浏览器中注入可视化覆盖层，支持实时选取 DOM 元素并通过 SSE 事件总线驱动 CLI 与浏览器双向通信
- A/B/C 变体生命周期：基于 HMR 的视觉变体热替换机制，可直接将优化结果写回源代码
- CI/CD 集成：–json 结构化输出配合退出码 0（通过）/2（发现反模式），可嵌入自动化流水线
AI 生成界面的同质化，需要一把手术刀而非大锤
当前 AI 代码生成工具——Claude Code、Cursor、GitHub Copilot——产出的前端界面存在严重的同质化问题：Inter 字体、蓝紫渐变、圆角卡片、三列网格排布。这种”AI Slop”现象的根源并非模型能力不足，而是 LLM 在训练数据中看到的网页大量遵循类似的 SaaS 模板，缺乏对视觉设计原则的深层理解。Impeccable 的切入角度非常巧妙：它不试图让 AI 学会设计，而是提供一套可编程的视觉质检系统。
与同类工具相比，市面上大多数视觉回归测试工具——Percy、Chromatic——关注的是”页面是否发生了变化”，而非”变化是否变得更好看”。Impeccable 则直接检测具体的设计问题：边距是否过分拥挤、前景背景对比度是否达标、文字渐变是否影响可读性、动画曲线是否引起眩晕。这种差异意味着前者是功能测试工具，后者是设计评审工具，对应的使用场景和判断标准完全不同。
另一个值得对比的是 Stylelint，它针对 CSS 语法和规范做静态检测，而 Impeccable 检测的是渲染后的实际视觉效果。例如”卡片嵌套超过三层”或”文本行宽超过 80 字符”这类规则，需要实际渲染 DOM 树才能判断，单纯分析 CSS 文件不可能做到。Impeccable 支持 jsdom、Puppeteer 和真实浏览器三种运行环境，在速度与精度之间提供了灵活选择。
{COVER_URL_PLACEHOLDER}
工程化程度：从设计规则引擎到可交互的视觉调试平台
Impeccable 的工程架构分为清晰的三层。底层是 DOM 树遍历引擎，封装了 27 条硬编码的视觉启发式规则；中间层是 LLM 评审层，在确定性检测之后对特定区域进行 AI 驱动的深度视觉分析；上层是 CLI 与浏览器扩展，提供面向终端用户的操作界面。这种分层设计的精妙之处在于：27 条确定性规则覆盖了 80% 以上的常见设计问题，且完全不依赖网络请求或 LLM 推理，响应时间保持在毫秒级别。–fast 参数可以完全跳过 LLM 阶段，仅运行正则表达式级别的快速检查，适合在 CI 流水线中作为轻量级门禁使用。
Live 模式是 Impeccable 最具创新性的工程特性。它在页面顶层注入一个视觉覆盖层，用户可直接点击选取需要优化的 DOM 元素，系统随即通过 SSE 事件总线将元素信息传递至 CLI，后者调用 AI 生成优化变体并通过 HMR 热替换回浏览器，整个迭代过程无需离开浏览器。Paul Bakaus 在项目文档中写道：”Impeccable 的设计目标是给开发者提供描述设计的词汇，而不是替他们做设计。”这一理念决定了它作为辅助工具而非替代工具的定位。
截至 v1.5.1 版本，项目采用 Apache-2.0 许可协议，npx impeccable 一行命令即可开始使用。CLI 支持对单个文件、整个目录和远程 URL 三种输入方式的扫描。从增长曲线来看，Impeccable 的方向恰好切中了大量 AI 辅助开发者的真实痛点——代码能跑但不好看——这也是它在短时间内获得社区广泛响应的根本原因。
