夜雨聆风用 AI 做前端有一件事必然发生。
你让它写个登录页，结果出来的：字体 Inter，主色蓝到紫的渐变，卡片居中，阴影浅灰，标题左边一个圆角方块图标。
你让它做个 Dashboard，还是 Inter，还是那个渐变，卡片换成了四格，图标换了个颜色。
换了个 AI 工具也一样。换了个 prompt 也一样。换了个项目也还是一样。
有人统计过，AI 生成 UI 里重复最高的设计特征：
- Inter 字体——覆盖率超过 90%
- 紫色到蓝色渐变——几乎无处不在
- 卡片套卡片——布局第一选择
- 彩色背景配灰色文字——无障碍噩梦
- 每个标题上方放圆角图标块——万年不变的装饰
- bounce/elastic 缓动——2015 年的审美
不是 AI 审美差，是它从未接受过设计教育。
这就是这个项目存在的意义。
这是什么
Impeccable，33.3K Stars，一个给 AI 编程工具注射设计规范的「技能包」。
作者是 Paul Bakaus，前 jQuery UI 核心团队成员，Google Developer Advocate 出身，做了一辈子前端工具。
项目的出发点很朴素：AI 写代码时，你可以给它注入编码规范、架构规范、测试规范。那为什么不能给它注入设计规范？
Impeccable 做的就是这件事。七份设计参考文档，二十三个专项命令，二十七条自动检测规则，打包成一个可以直接装进项目的技能包。
装完之后，你的 AI 工具就带上了一套设计手册。
七个设计领域，系统覆盖
Impeccable 内置了七个领域的参考文件：
字体系统（typography） 不只是「用什么字体」，是字体配对、模块化比例、OpenType 特性的完整规范。AI 会知道为什么不能在每个项目里无脑用 Inter。
颜色与对比度（color-and-contrast） OKLCH 色彩空间、着色中性色系、深色模式处理、无障碍对比度——这四个知识点哪个单独拎出来都够写一篇文章。现在它们都在 AI 脑子里了。
空间设计（spatial-design） 间距系统、网格、视觉层级。不是随便加个 margin: 16px，是有逻辑的空间构建。
动效设计（motion-design） 缓动曲线、交错动画、「减少动效」的无障碍设计。专门针对 AI 最容易滥用的 bounce 动画。
交互设计（interaction-design） 表单、焦点状态、加载模式。这些是最容易被 AI 略过的边缘细节，但用户感知最明显的地方。
响应式设计（responsive-design） 移动优先、流式设计、容器查询。不是简单地在媒体查询里写断点。
UX 文案（ux-writing） 按钮文字、错误信息、空状态文案。AI 写 UI 文案经常流于套话，这个模块直接给了规范。
23 个命令，每个都有具体用途
安装之后，所有命令通过 /impeccable 调用。选几个有意思的说：
/impeccable craft 完整的「规划→构建」流程，含视觉迭代。相当于给 AI 一个带设计评审的工作流，而不是一次性输出。
/impeccable critique UX 设计评审，从层级、清晰度、情感共鸣三个维度打分分析。你写完一个页面，让它评审，它不会光说「还不错」。
/impeccable audit 技术质量检查——无障碍、性能、响应式。跑完告诉你有几个色彩对比度不过关、几个触控目标太小。
/impeccable bolder / /impeccable quieter 设计太平淡用 bolder，太花哨用 quieter。这对命令解决了一个真实问题：你让 AI 把设计弄好看点，它不知道往哪个方向调。
/impeccable overdrive 添加技术上极致的特效。就是字面意思，放开手脚，想做什么就做什么的模式。
/impeccable live 视觉变体模式，在浏览器中实时迭代元素。
一共 23 个命令，每个都对应一个具体场景，不是为了数量好看堆出来的。
反模式检测：不需要 AI 就能跑
除了给 AI 用的技能包，Impeccable 还有一个独立的 CLI 工具。
npx impeccable detect src/ # 扫描目录
npx impeccable detect index.html # 扫描 HTML 文件
npx impeccable detect https://example.com # 扫描 URL27 条确定性规则，用正则和静态分析跑，不调用任何 LLM，也不需要 API Key。
它会扫出什么：
- bounce 或 elastic 缓动动画
- 紫蓝渐变背景
- 深色光晕阴影
- 跳级标题（h1 直接跳 h3）
- 行太长超过阅读舒适范围
- 触控目标小于 44px
- 内边距过于局促的卡片
这 27 条都是可以用代码检测的确定性问题。另有 12 条需要 LLM 评审的规则，用于更主观的设计判断。
加 --json 可以输出机器可读的结果，方便接入 CI。
支持几乎所有主流 AI 工具
这是 Impeccable 做得比较彻底的地方——它没有只做 Claude Code 或只做 Cursor 的版本。
支持的工具包括：Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、Kiro、Trae（国际版和中国版都有）、Rovo Dev、Qoder、OpenCode。
安装时用 CLI 自动检测：
npx impeccable skills install它会识别你当前项目用的是哪个 AI 工具，然后把对应的配置文件写到正确的目录里。装完之后跟你原来的使用方式没有区别，就是 AI 突然变得有设计意识了。
值得注意的一个设计决定
Impeccable 的技能包是基于 Anthropic 官方的 frontend-design 技能演化而来的，这个在项目的 NOTICE.md 里有明确说明。
它没有从零造轮子，而是在一个经过验证的基础上叠加了：更细化的领域参考、更具体的命令词汇、可以离线跑的自动检测、多工具适配层。
这种做法其实更务实——AI 技能包本质上是提示词工程的结构化版本，能站在前人肩膀上就站，把精力花在扩展和打磨上。
使用场景
它适合什么情况？
如果你在用 AI 工具写前端，项目不只是内部工具或原型，有一定的 UI 品质要求，那 Impeccable 能省掉你大量的「调设计」时间。
不适合什么情况？
如果你完全不关心 UI 质量（纯后端项目、内部脚本），或者你已经有完整的设计系统（Figma 规范 + 组件库），那这个工具的边际收益会低很多。
对 AI 工具的本质影响其实挺小的。它更像是给 AI 加了一套意识——让它知道什么设计是有问题的，什么设计是值得追求的。
下次它再想甩给你一个 Inter + 紫蓝渐变的标准答案时，会先自我审查一遍。
项目地址：github.com/pbakaus/impeccable
