Impeccable：给 AI 时代的 Web 设计装上「质检仪」
项目地址：https://github.com/pbakaus/impeccable / 官网：impeccable.style / 作者：Paul Bakaus / 许可：Apache 2.0
一、前言：AI 代码时代的「审美疲劳」
如果你在过去一年里频繁浏览新上线的 SaaS 产品官网，可能会有这样一种既视感：
侧边带一条彩色边框的卡片、标题下面总有一个圆角的小标签（eyebrow）、正文清一色 Inter 字体、深色背景上泛着蓝紫色光晕、一堆圆角方块图标整齐地码在页面中央……
这不是巧合。这是AI 模板化设计的”痕迹”。
当 Claude、Cursor、GitHub Copilot 等工具帮开发者以分钟为单位生成界面时，它们学到的审美其实非常集中——来自互联网上最常见的那几个设计系统、UI 套件和 Tailwind 模板。结果就是：不同产品看起来像是同一家工厂出来的。
Impeccable 正是为了解决这个痛点而生。
二、Impeccable 是什么？
Impeccable 是一套面向 AI 编码助手的设计质量工具链，包含三个核心组成部分：
| 模块 | 说明 |
|---|---|
| CLI 检测工具 | 扫描代码或在线网页，检测 27 种 UI 反模式 |
| AI Skill Pack | 23 条设计指令 + 7 份领域参考文档，供 Claude/Cursor/Gemini 等调用 |
| 浏览器扩展 | 在浏览器里一键扫描当前页面 |
它不以「好不好看」这种主观标准来评判，而是基于一套明确的、可自动化的设计规则来指出问题——从「AI 生成痕迹」到「无障碍访问缺陷」再到「排版质量」。
三、CLI 工具：27 条确定性检测规则
Impeccable 的 CLI 是最直观的部分。安装后一条命令就能扫描你的项目：
# 扫描本地文件
npx impeccable detect src/
# 扫描线上页面（需要 Puppeteer）
npx impeccable detect https://example.com
# 纯正则模式（更快，跳过 jsdom）
npx impeccable detect --fast src/
# JSON 输出（方便接入 CI/CD）
npx impeccable detect --json src/检测到问题时退出码为 2，没有问题时为 0，非常适合集成到 GitHub Actions 等流水线里做门禁。
27 条规则全景
这些规则被作者分成了两大类：AI Slop（AI 味）和 Quality（质量缺陷）。
3.1 AI Slop — 那些”一看就是 AI 做的”痕迹
这些规则专门识别当前 AI 生成界面中最常见的套路化设计：
| 规则 ID | 名称 | 检测内容 |
|---|---|---|
side-tab |
侧边彩色边框（标签页式） | 元素左侧或右侧有一条 >=2px 的非中性色边框 |
border-accent-on-rounded |
圆角元素上的单边边框 | 同时有 border-radius 和单边彩色边框 |
overused-font |
过度使用的字体 | 检测到 Inter、Roboto、Geist、Plus Jakarta Sans 等”AI 默认字体” |
single-font |
单一字体家族 | 整个页面只用一种字体 |
flat-type-hierarchy |
扁平的字体层级 | 标题和正文字号比例太小（<1.5:1），缺乏层次 |
gradient-text |
渐变文字 | 使用 background-clip: text 实现的渐变标题 |
ai-color-palette |
AI 特征配色 | 紫/蓝紫渐变、青色文字、深色背景上的霓虹发光色 |
nested-cards |
嵌套卡片 | 一个 card 里面又套了一个 card |
monotonous-spacing |
单调的间距 | 所有间距都使用同一个数值（如全是 16px） |
everything-centered |
全部居中 | 页面所有内容都是居中对齐，缺乏变化 |
bounce-easing |
弹性缓动 | 使用了 cubic-bezier 中的 bounce/elastic 曲线，或 Tailwind 的 animate-bounce |
dark-glow |
深色背景上的发光效果 | 深色背景配合彩色发光阴影/文字 |
icon-tile-stack |
圆角图标砖块堆叠 | 一排圆角方块图标 + 标题 + 描述的重复模块 |
italic-serif-display |
斜体衬线标题 | 使用斜体衬线字体作为展示标题（当前 AI 模板的热门选择） |
hero-eyebrow-chip |
标题上方的 eyebrow/pill 标签 | 超大标题上方有一个 tiny uppercase letter-spaced 的小标签 |
repeated-section-kickers |
重复的 section kicker | 每个区块标题上方都有同样的 eyebrow 标签 |
有一个很贴心的细节：作者在检测 overused-font 时，对特定品牌域名做了白名单。比如 Geist 在 Vercel 域名下不会触发，Mona Sans 在 GitHub 域名下也不会触发。这说明规则不是一刀切，而是有上下文判断的。
3.2 Quality — 通用的设计与无障碍问题
| 规则 ID | 名称 | 检测内容 |
|---|---|---|
pure-black-white |
纯黑背景 | 使用 #000000 纯黑作为背景色 |
gray-on-color |
彩色背景上的灰色文字 | 灰色文字放在非灰/非白背景上 |
low-contrast |
对比度不足 | 文字与背景对比度低于 WCAG AA 标准（4.5:1） |
layout-transition |
布局属性动画 | 对 width/height/padding/margin 做 CSS transition（导致 layout thrash） |
line-length |
行宽过长 | 单行超过约 80 个字符 |
cramped-padding |
内边距过紧 | 文字离容器边缘太近 |
body-text-viewport-edge |
正文贴到视口边缘 | 正文内容没有左右留白，直接顶到屏幕边缘 |
tight-leading |
行高过紧 | 行高小于 1.3 倍 |
skipped-heading |
跳级标题 | h1 直接跳到 h3，缺少 h2 |
justified-text |
两端对齐但没有断字 | text-align: justify 但没有 hyphens: auto |
tiny-text |
过小的正文 | 正文文字小于某个阈值 |
all-caps-body |
正文全大写 | 对长段正文使用 text-transform: uppercase |
wide-tracking |
过宽的字间距 | 正文使用过大的 letter-spacing |
技术实现亮点
Impeccable 的检测引擎有一个很聪明的设计：它是同一份代码，同时跑在 Node.js 和浏览器里。
- Node.js 路径：用
jsdom解析 HTML，用正则扫描 CSS/JSX/TSX/Vue/Svelte 文件 - 浏览器路径：直接用 DOM API 做更精确的计算（比如对比度计算、元素尺寸测量）
这意味着你可以把它集成到 CI 里做自动化检查，也可以让设计师在浏览器里一键扫描当前页面，两者用的是同一套规则。
四、AI Skill Pack：让 AI 助手学会设计
如果说 CLI 是「检测问题」，那 Skill Pack 就是「预防问题」。
Impeccable 提供了 23 条 AI 命令 和 7 份领域参考文档，支持 Claude、Cursor、Gemini、Codex 等多种 AI 编码助手。
7 份领域参考文档
| 文档 | 覆盖内容 |
|---|---|
| Typography | 字体系统、字体配对、模数比例、OpenType 特性 |
| Color & Contrast | OKLCH、着色中性色、深色模式、无障碍 |
| Spatial Design | 间距系统、网格、视觉层级 |
| Motion Design | 缓动曲线、错开动画、减弱动画（reduced motion） |
| Interaction Design | 表单、焦点状态、加载模式 |
| Responsive Design | 移动优先、流式设计、容器查询 |
| UX Writing | 按钮文案、错误信息、空状态 |
这些参考文档不是泛泛而谈的设计理论，而是每次 AI 执行命令时都会加载的上下文，确保 AI 在生成代码时有一个统一的设计知识库可以参考。
23 条命令速览
安装后在 AI 助手里输入 /impeccable <command> 即可调用：
| 命令 | 作用 |
|---|---|
/craft |
完整的「先规划后构建」流程，支持视觉迭代 |
/teach |
一次性设置：收集设计上下文，生成项目根目录的 PRODUCT.md 和 DESIGN.md |
/document |
从现有代码生成 DESIGN.md |
/extract |
提取可复用组件和 token 到设计系统 |
/shape |
写代码前先规划 UX/UI |
/critique |
UX 设计评审：层级、清晰度、情感共鸣 |
/audit |
技术质量检查（无障碍、性能、响应式） |
/polish |
最终打磨：对齐设计系统、修复间距和排版 |
/animate |
添加或优化交互动画 |
/bolder |
让设计更大胆、更有冲击力 |
/quieter |
让设计更克制、更内敛 |
/distill |
精简设计，去除多余元素 |
/color |
生成或优化配色方案 |
/type |
优化排版系统 |
/space |
优化间距系统 |
/responsive |
检查和优化响应式表现 |
/a11y |
无障碍审计与修复 |
/performance |
性能优化 |
/tokens |
生成或同步设计 token |
/components |
组件设计与评审 |
/icons |
图标系统设计与优化 |
/copy |
UX 文案优化 |
安装方式很简单：
npx impeccable skills install它会通过 npx skills add pbakaus/impeccable 把 skill 安装到你的项目中（支持 .claude、.cursor、.gemini、.agents 等多种 AI 助手目录）。
五、为什么 Impeccable 值得关注？
5.1 它填补了 AI 编码的一个关键空白
现在的 AI 编码助手写得一手好代码，但对设计质量的把控几乎为零。它们不会告诉你”这个紫色渐变太 AI 了”，也不会提醒你”行宽超过 80 字符可读性会下降”。Impeccable 给 AI 助手装上了一个设计质检层。
5.2 规则是透明的、可迭代的
27 条规则不是黑盒。每一条都有明确的 ID、分类、严重级别和描述。作者甚至为每条规则关联了 skill 文档中的对应指导原则。这意味着：
- 检测出问题后，AI 可以直接引用对应的指导原则来修复
- 社区可以提案新增规则
- 团队可以根据自身品牌调性调整规则敏感度
5.3 它是多平台、多形态的
CLI 用于工程化检查，Skill Pack 用于 AI 助手增强，浏览器扩展用于设计师日常审查——三种形态覆盖了整个设计和开发工作流。
5.4 作者背景
Paul Bakaus 是前端领域的老兵，曾在 Google 负责开发者关系工作，参与过 AMP 等项目。他对「开发者工具」和「质量自动化」的理解非常深，这也解释了为什么 Impeccable 在工程化集成方面做得这么扎实。
六、适用场景
| 场景 | 用法 |
|---|---|
| 个人项目 | npx impeccable detect 一键检查，让个人网站摆脱”AI 味” |
| 团队协作 | 把 impeccable detect 加入 CI/CD，PR 阶段自动拦截设计质量问题 |
| 设计系统维护 | 用 /impeccable extract 和 /impeccable tokens 管理和同步设计 token |
| AI 辅助开发 | 安装 skill 后，让 Claude/Cursor 每次生成 UI 时都遵循 Impeccable 的设计标准 |
| 设计评审 | 用 /impeccable critique 让 AI 做第一轮设计评审，再交给人类设计师 |
七、写在最后
Impeccable 的命名很有意思——impeccable 意为「无可挑剔的、无瑕的」。在这个 AI 生成内容爆炸的时代，真正无可挑剔的东西反而越来越稀缺。
这套工具的价值不仅在于「检测问题」，更在于它试图建立一种AI 时代的设计共识——当所有 AI 都在生成相似的东西时，我们需要有工具来识别这种趋同，并有方法论来打破它。
如果你正在用 Claude、Cursor 或其他 AI 工具做前端开发，花五分钟装上 Impeccable 试试。它可能不会让你的设计立刻变得惊艳，但至少，它能让你的网站不再看起来像是同一个 AI 工厂的流水线产品。
本文基于 impeccable@2.1.9 版本撰写。项目正在积极迭代中，建议关注 GitHub 仓库获取最新动态。