Impeccable：让 AI 写出的前端代码不再像「AI 套娃」
最近帮一个朋友改他的 SaaS 后台，他之前用 Cursor 花了一周生成的页面，紫色渐变背景、Inter 字体、灰底卡片、按钮全是圆角大阴影 —— 典型的「AI 出厂设置」。我把链接丢给我用 Claude Code 搭的另一个项目，视觉风格一对比，明显不是一个物种。
不是他用得不好，是 AI 编码工具的「设计语言」太单调了。大家都在同一个训练数据池里打捞，出来的东西就像一个模子刻的。
直到我刷到 GitHub Trending 看到了 pbakaus/impeccable—— 一个专门给 AI 写前端的「设计技能包」，7 套领域知识 + 23 条命令，专门对治上面这套审美通病。
Impeccable 是什么
Impeccable 不是一个组件库，也不是设计系统，它是一套塞给 AI 看的「设计词典」。
它的作者 Paul Bakaus 是 Google Tag Manager 和 Iodine 的创始人，折腾前端设计语言这事儿算他的老本行。这个项目脱胎于 Anthropic 官方的 frontend-design skill，然后被狠狠扩展了一轮。
核心思路就一句话：AI 不是不懂设计，是没人告诉它「别用烂大街的模板」。
Impeccable 把这件事工程化了 —— 它把你的 AI 编码工具（Claude Code、Cursor、Codex、Gemini CLI、Pi、Copilot…）变成一个会主动避开「AI 味」UI 的设计助手。
解决什么问题
先来看一组典型「AI 味」UI 的特征（Impeccable 在仓库里直接列了出来）：
- 字体一律 Inter / DM Sans，不带衬线、不带个性
- 配色一律紫色到蓝色渐变，像注册 Stripe 时见的那种
- 卡片套卡片，空白不够就再套一层
- 灰底配彩色按钮，对比拉满但没层次
- 动效全是 ease-in-out，从不考虑 spring physics
- 图标全用 lucide-react 默认色，不切氛围
- 响应式只做「桌面端缩小」，不考虑真实移动端场景
你是不是也中过几条？我自己看着笑出声，因为我写过的几十个 demo 全是这个味儿。
Impeccable 的反制办法是：给 AI 一整套设计约束 + 反模式清单，让模型在生成代码前先读一遍。
装上之后发生了什么
1. 7 套领域参考文档
Impeccable 内置了 7 个细分领域的 reference 文件，按需加载：
| 文档 | 涵盖内容 |
|---|---|
| typography | 字体系统、字重搭配、模块化比例、OpenType 特性 |
| color-and-contrast | OKLCH 色彩空间、tinted neutrals、暗色模式、可访问性 |
| spatial-design | 间距系统、栅格、视觉层级 |
| motion-design | 缓动曲线、stagger、reduced motion |
| interaction-design | 表单、focus 状态、loading 模式 |
| responsive-design | 移动优先、container queries、流式排版 |
| ux-writing | 按钮文案、错误提示、空状态 |
这些不是泛泛的「设计原则」，是给模型看的具体决策树 —— 比如「用 Inter 之前先停下来问三个问题」「圆形头像别默认加 1px border」这种粒度。
2. 23 条斜杠命令
最实用的部分。所有命令都通过 /impeccable 触发，常见的有：
1 | /impeccable init # 一次性收集设计上下文，写成 PRODUCT.md + DESIGN.md |
还可以 pin 常用命令成快捷方式：
1 | /impeccable pin audit # 创建 /audit 快捷命令 |
3. 反模式扫描器
Impeccable 自带一个独立 CLI，能识别 24 种「AI 味」反模式 —— 比如「左侧导航带 1px 边框」「灰底卡片里嵌彩色按钮」「icon button 没有 aria-label」这些。
就算你不跑 AI 生成，想给老项目体检也很有用。
怎么装
通用一行命令
1 | npx skills add pbakaus/impeccable |
它会自动检测你用的是哪个 AI 工具，把编译好的 build 写到对应位置（.claude/skills/、.cursor/skills/、.agents/skills/ 等等）。
工具对应路径速查
| 工具 | 路径 |
|---|---|
| Claude Code | .claude/skills/ |
| Cursor | .cursor/skills/ |
| Codex CLI | .agents/skills/ |
| Gemini CLI | ~/.gemini/skills/ |
| GitHub Copilot | .github/skills/ |
| Pi | .pi/skills/ |
| Trae | ~/.trae/skills/ |
如果不想用 CLI，直接去 impeccable.style 下载对应工具的 ZIP 解压也行。
我的实际用法
我经常在不同项目、不同设备、不同屏幕尺寸之间切换写代码，视觉一致性对我来说不只是审美问题，是生产力问题 —— 我得一眼看出「这段代码是哪个项目」，不然大脑会卡壳。
装上 Impeccable 之后，我的工作流变成了这样：
- 新项目开张：
/impeccable init跑一遍，自动生成PRODUCT.md（产品定位、目标用户、品牌调性）和DESIGN.md（配色、字体、间距规则） - 写新页面：
/impeccable craft 写一个设置页—— 它会先问你三五个关于上下文的问题（暗色还是亮色？目标用户技术背景？要不要插画？），再动手写代码 - 写完看效果：浏览器里用
/impeccable live实时调，把「这个按钮再沉一点」「标题字号再降一档」这种话直接变成视觉迭代 - 准备上线：
/impeccable audit+/impeccable harden收尾
最让我意外的提升来自 /impeccable critique—— 它会真的像同事评审一样，给你列「这条信息层级不够」「这屏认知负载太高」「这个动画没意义」，逼我重新想清楚再动手。
一些吐槽
不是什么都好。说几个实测发现的注意点：
- 需要时间消化：第一次跑
init，AI 会问很多上下文问题，新手可能嫌烦。建议准备一个你常做的项目类型（比如「B2B SaaS 后台」），提前把品牌定位、目标用户、参考产品列出来，回答会快很多 - 和现有设计系统冲突：如果你公司已经有自己的设计系统，Impeccable 可能会和它打架。建议先在 side project 上跑通，再决定要不要往主项目里塞
- 命令名需要记忆：23 条命令虽然可以 pin，但要真正用熟，还是得在脑子里建立索引。前几天我经常打错
/impeccable audti - 不支持所有工具：一些小众的 AI 编码 IDE 暂时不在支持列表里，作者在仓库里开 issue 让大家报需求
为什么这件事重要
「AI 生成的设计都长一样」这件事，不只是审美问题，是信任问题。当用户看到一屏「典型 AI UI」，潜意识会想「这是个 demo，不是产品」。
Impeccable 这种工具的存在，说明 AI 编码领域开始进入下一阶段 —— 从「能不能生成」转向「生成得专不专业」。和 Cursor、Claude Code 这些「AI 写代码」的工具是互补关系：它们解决能力问题，Impeccable 解决品味问题。
对于真正在意产品视觉的开发者来说，这是一个免费、可立刻上手的「AI 设计师外挂」，10k+ 星不是白给的。
一些替代方案
如果你不想装 Impeccable 这类「设计技能包」，也可以考虑：
/frontend-designskill（Anthropic 官方）：Impeccable 的前身，能力更基础- 自己写 design tokens + 喂给 AI：维护一份
tokens.json，每次写代码前塞进 prompt - 设计稿先行（Figma → 代码）：用 v0、Lovable 这类工具先出图，再让 AI coding agent 改
但就我自己的体验，Impeccable 是目前「上手成本 / 效果提升」比最高的方案 —— 一行命令装上，立刻有效果。
小结
Impeccable 解决的是「AI 写前端代码审美同质化」这个真问题。它给 AI 编码工具塞了一套设计词典 + 23 条命令 + 反模式扫描器，让模型从「能写」变成「会写」。
如果你已经被「紫色渐变 + Inter 字体 + 卡片套卡片」搞烦了，花 10 分钟装一下，再用 /impeccable init 跑一次你的项目 —— 相信我，你会被自己的项目页面惊到。
这是我今年见过最值得给 AI 工具塞的「插件」，没有之一。轻量、立刻见效、不绑架你的工作流。