让 AI 别再生成「塑料感」UI 了——Impeccable 这个开源技能包,装完效果立竿见影

Impeccable 是个啥

一句话：一个给 AI 编程工具装上的「设计技能包」。

装完之后，Cursor、Claude Code、Gemini CLI 这些工具在生成前端代码时，会自动遵循专业的设计原则。字体不会再用烂大街的 Inter，配色不会永远是紫色渐变，间距和层级也会更有节奏感。

它的作者 Paul Bakaus 来头不小——前 Google 工程师，jQuery UI 的创始人。这哥们做 UI 做了十几年，最懂「AI 写出来的界面为什么丑」。

他在 README 里说了一句我特别认同的话：好的设计提示需要设计词汇。 大多数人根本没听说过「垂直节奏」这个词，自然也没法让 AI 去调整它。Impeccable 就是架在这中间的桥。

目前 GitHub 上万星，Apache 2.0 开源。

它到底干了什么

Impeccable 的能力分三块：

第一块：设计知识库。 七个领域的参考文件——排版、色彩、动效、空间布局、交互、响应式、UX 文案。每次你跟 AI 对话时自动加载，相当于给 AI 配了一个随时在线的设计顾问。

第二块：设计命令。 20 多个斜杠命令，每个对应一个具体的设计任务。想检查代码质量就 /audit，想打磨细节就 /polish，想加点惊喜就 /delight。不用反复用自然语言描述你要什么效果，一个命令搞定。

第三块：反模式检测。 这个我觉得是最有价值的部分——它明确告诉 AI 不要做什么。别用烂大街的字体、别在彩色背景上放灰色文字、别把东西全包进卡片、别用弹跳缓动曲线。25 条规则，确定性检测，不依赖大模型，可以直接跑在 CI 流水线里。

为什么 AI 生成的界面都长一个样

Impeccable 的 README 把症结说得很透：所有 AI 编码助手的训练数据里，充斥着同一批通用模板。

你回忆一下是不是这样——

这些问题不是你的 prompt 能解决的。因为 AI 的「审美」上限就是训练数据里那些模板的平均值。

Impeccable 的思路不一样——它不是让你写出更好的 prompt，而是在 AI 生成代码之前，就把正确的设计原则塞进它的上下文里。

安装，一行命令的事

npx skills add pbakaus/impeccable

就这一行。它会自动检测你用的是 Cursor、Claude Code 还是 Gemini CLI，把文件放到正确的位置。

如果你用的是 VS Code，可以直接装「Impeccable for VS Code」扩展，装完底部状态栏会出现一个 ✨ 按钮，点一下就能调设计命令。

装好之后，建议先跑一遍：

/teach-impeccable

这个命令会引导 AI 记录你的目标受众、使用场景和品牌调性，存到项目根目录的 .impeccable.md 里。之后每次对话自动加载，AI 就不会恢复成默认的「模板审美」了。

实际效果怎么样

我拿一段典型的「AI 味」CSS 试了一下。

AI 默认输出是这样的：

body {  font-family: 'Inter', sans-serif;  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  color: #6b7280;}.card {  background: white;  border-radius: 24px;  padding: 20px;  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}

跑完 /polish 之后：

body {  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;  background: var(--impeccable-bg);  color: var(--impeccable-text);}.card {  background: var(--impeccable-card-bg);  border-radius: 16px;  padding: var(--impeccable-spacing-md);  box-shadow: var(--impeccable-shadow-sm);}

Inter 换成了更有品牌感的字体，硬编码的紫色渐变变成了遵循设计系统的变量配色，灰字配彩色背景的问题也修了。圆角和阴影的数值也收敛到了更合理的范围。

说实话，不是什么惊天动地的变化。但就是这些细节的累积，让界面从「一看就是 AI 写的」变成了「看起来像是认真设计过的」。

几个我觉得特别实用的场景

代码评审——写完组件跑一遍 /audit，无障碍、性能、响应式一次查完。然后 /normalize 统一设计标准，最后 /polish 收尾。形成一套标准化的质检流程。

团队协作——把 Impeccable 嵌到项目仓库里，所有人的 AI 工具都遵循同一套设计语言。不管团队成员设计背景怎么样，AI 生成的代码风格是一致的。

快速试方向——页面太「平」了？跑 /bolder。太「过」了？跑 /quieter。想极简一点？/distill。不用一遍遍重新写 prompt，一个命令换一个风格方向。

CI 集成——npx impeccable detect src/ 直接扫代码，检测 25 项设计反模式。确定性规则，不需要 API key，零额外成本。有问题退出码 2，没问题退出码 0，直接挂到 CI 流水线里。

写在最后

当所有人都在卷 AI 的代码能力时，Impeccable 选了一条不太一样的路——让 AI 生成的界面从「能用」跨到「好看且专业」。

Paul Bakaus 那句话我再放一遍：你不能要求更多垂直节奏，如果你从未用过这些词汇。

Impeccable 给了每个人这套词汇。

不过有一说一，它不能把你的审美从 60 分拉到 90 分。它更像是一个「设计底线」工具——确保 AI 不会写出太离谱的东西。真正的高级感，还是得靠你自己的判断。

但至少，装完之后，AI 不会再给你 Inter 字体 + 紫色渐变了。就冲这一点，值得一试。