夜雨聆风前 Google Chrome DevTools / AMP 负责人,把"AI 设计味儿"列成了 27 条可检测的规则。
一、你有没有过这种瞬间——"这页面一看就是 AI 写的"
打开一个新做的 SaaS 落地页,你只扫了 0.5 秒,心里就咯噔一下:
• 又是 Inter 字体,从 H1 到正文一个字号一个字号缩下来; • 主按钮永远是 紫色到蓝色的渐变,hover 时还要发个 暗色光晕; • 每个标题上面都顶着一个 圆角方形的图标小色块; • 卡片嵌套卡片,边框套边框,内边距还很憋; • 彩色背景上写一段 灰色小字,对比度低得像在偷偷劝退你阅读; • 任何动画都用 bounce / elastic 缓动,弹一下,瞬间穿越回 2014 年的 Material Design 初代。
你说不上来哪条规则被违反了,但你就是知道——这玩意儿是 AI 一把梭出来的。
而且更糟的是,你自己用 Cursor / Claude Code / v0 / Lovable 写出来的页面,也长得一样。
不是模型不行。是大家都在同一批 SaaS 模板上训练的,你不显式给它纠偏,它就只会吐出"AI 的最大公约数审美"。
有人受不了,直接干了一个工具,把这个病列成了规则,还让你的 AI 助手按这套规则写代码。
它叫 Impeccable(意为"无可挑剔"),目前在 GitHub 上 28k stars,主推荐位常年挂着。
二、它是什么:一套给 AI 编程助手用的"设计语言"
一句话定性:Impeccable 是一个给所有主流 AI 编程助手通用的"前端设计技能包",让你的 AI 写出来的页面看起来不像 AI 写的。
它不是 UI 组件库,不是 Figma 插件,也不是你要新学的一门 DSL。它就是一组 Markdown 形式的"技能"和"命令",装到你的 AI 编辑器里,你说一句 /impeccable polish,它就按这套规则去重写你那个又丑又千篇一律的页面。
📊 项目基本信息
npx impeccable detect | |
注意最后一行:它的"祖宗"是 Anthropic 官方那个 frontend-design 技能。作者自己也承认这是出发点。Impeccable 干的事情,是把那套基础规则大幅扩展、模型无关化、并且配上检测器。
三、作者是谁?——这一段你真的别跳过
打开作者主页 @pbakaus,你会发现一份在前端圈"教科书级"的履历。
他叫 Paul Bakaus,德国人,人称"Renaissance Geek"(文艺复兴极客)。简单梳理一下他干过的事:
• 2007 年,创立 jQuery UI。今天你随便打开一个老网站的日期选择器、对话框、可拖拽列表,十有八九背后跑的还是他当年写的代码。jQuery UI 至今仍在数百万网站上运行。 • 2010 年,发布 Aves Engine——史上第一个无插件的浏览器 HTML5 游戏引擎。发布 7 个月后,被 Zynga 整体收购,他直接把自己创办的公司变成了 Zynga 德国分部。 • Google 十年:先在 Chrome DevTools 团队,做你今天每天按 F12 打开的那个开发者工具;然后转去 AMP / Web Stories 团队当负责人,做整个"开放网络的视觉叙事"项目;再后来创立 Google for Creators,服务全球内容创作者。 • 离开 Google 后,创办 Spotter Studio——一个给 YouTube 创作者用的 AI SaaS 工具。 • 然后,2025-2026 年,他做了 Impeccable。
你品一品这个轨迹:做了世界用得最广的 UI 库,做了浏览器里最关键的开发者工具,做了 AMP 这种动了几乎所有前端开发者奶酪的项目,做了创作者向的 AI SaaS……然后这个人现在看着所有 AI 助手吐出千篇一律的紫蓝渐变界面,出手了。
他自己在个人页面写过一句话,大意是:"每次都是在一个技术拐点上,工具还没跟上的时候,我就出现在了那儿。"
Impeccable 就是他这一论断的最新一次自证。
四、它在攻击什么?—— "AI slop"(AI 设计味)的 27 条罪状
这是整个项目最有杀伤力的部分。
作者把 AI 生成前端时反复犯的毛病,拆成了 27 条可机器检测的"反模式"(anti-pattern)规则,外加另一层 12 条 LLM 主观审美的批判项。也就是说,这些规则不仅写进文档让 AI 读,还能用命令行直接扫你的代码,跟 ESLint 一样标红。
它具体在骂哪些事?摘几条特别戳的:
❌ 字体懒癌
默认就抄 Inter / Arial / 系统字体,从来不思考品牌气质。
❌ 万物渐变
主按钮、标题、图标背景,统统紫色到蓝色渐变。这是 Tailwind 文档配色被全网过拟合的结果。
❌ 卡里套卡
一个卡片里再套一个卡片,卡片再套一个边框,边框里再套个 badge,层层嵌套像俄罗斯套娃。
❌ 标题上方的"图标贴纸"
每个 section 标题前面顶一个圆角方形的色块图标,这个模式 AI 写每个着陆页都来一遍。
❌ 彩色底配灰字
蓝紫色背景上写一段 #6B7280 的灰字,看起来"高级",实际上对比度过不了无障碍审查。
❌ 纯黑或中性灰
❌ Bounce / Elastic 缓动
任何动画都"弹一下"。专业前端早就不这么做了,这套缓动一上去就回到 2014 年。
❌ 侧栏标签的左边框
AI 写 Tab 永远在选中那个左边描一条 4px 的彩色边。这是某个流行模板的特征,被无脑复制了上千次。
每一条规则,在文档里都对应着一段"为什么这样不好"+ "应该怎么做"的解释。AI 一边读这套规则一边写代码,它就知道不能再这么搪塞你了。
五、23 个命令:跟 AI 共享一套"设计动词"
Impeccable 的另一个杀手锏:它把"设计意图"这种通常只在设计师脑子里转的东西,固化成了 23 个标准命令。
你不用再跟 AI 解释"你能不能让这个页面看起来更精致一点",你直接打:
/impeccable polish # 出货前最后一遍打磨
/impeccable audit landing # 扫描落地页:无障碍 / 性能 / 响应式
/impeccable critique # UX 评审:层次、清晰度、情绪共鸣
/impeccable distill # 把页面剥到只剩本质
/impeccable bolder # 太无聊了,给我胆子大一点
/impeccable quieter # 太花哨了,收一收
/impeccable animate # 加点有目的的动画
/impeccable harden checkout # 把结账页的边界情况都补上(空状态、错误、长文本溢出)
/impeccable typeset # 修字体选择和层次
/impeccable colorize # 引入战略性的色彩
/impeccable shape # 先规划 UX/UI,再动手写代码
/impeccable craft # 完整的"先成形再开工"全流程完整 23 条还有 clarify、adapt、onboard、delight、overdrive、live、extract、teach、document……
这些命令的真正价值,不在于它们多花哨,而在于它把"和 AI 一起做设计"这件事,从开盲盒变成了点菜。
你以前跟 AI 说"帮我加点动画",它给你来一段 bounce-in 弹来弹去;你现在说 /impeccable animate,它读着 motion-design 那套参考文件去做——缓动是 cubic-bezier、有 stagger、尊重 prefers-reduced-motion,不会再回到 2014 年。
更妙的是 /impeccable pin:你可以把高频命令钉成顶级快捷方式,比如 pin audit 之后就能直接打 /audit。
六、7 个领域参考文件:这才是真正的"教 AI 怎么做设计"
23 个命令是"接口",真正干活的是底下的 7 份 领域参考文档。每次你调命令,AI 都会先把对应的领域文档加载进上下文:
| typography | |
| color-and-contrast | |
| spatial-design | |
| motion-design | |
| interaction-design | |
| responsive-design | |
| ux-writing |
这 7 份文档是 Impeccable 的"灵魂"。它们不是抽象口号,而是带着 OKLCH 色值、缓动函数、布局比例的实操规范。
你可以理解为:它把一个工作了十年的资深设计工程师的肌肉记忆,蒸馏成了 AI 可以读、可以查、可以引用的 Markdown。
七、不止 Claude Code:它适配几乎所有主流 AI 编辑器
这点对国内开发者尤其重要——很多 AI 设计相关的开源项目只支持一个工具(通常是 Claude Code),而 Impeccable 走的是"全家桶"路线:
✅ Claude Code
✅ Cursor
✅ OpenCode
✅ Pi
✅ Gemini CLI
✅ Codex CLI(OpenAI)
✅ GitHub Copilot(VS Code)
✅ Kiro
✅ Trae(包括 国内版 trae-cn,这点很贴心)
✅ Rovo Dev(Atlassian)
✅ Qoder
仓库根目录下你会看到一堆 .cursor.claude.gemini.codex.trae-cn 这种目录,每个工具对应一份适配。你用什么编辑器,就拷贝对应的那一份过去。
八、彩蛋:有 CLI 和浏览器扩展,无需 API Key 即可用
你以为 Impeccable 只是个"AI 使用说明"?它还有两个隐藏属性。
🧪 命令行检测器(无需任何 AI)
npx impeccable detect src/ # 扫一个目录
npx impeccable detect index.html # 扫一个 HTML 文件
npx impeccable detect https://example.com # 用 Puppeteer 扫一个线上 URL
npx impeccable detect --fast --json . # 极速模式,纯正则,输出 JSON也就是说,你可以用它去检测任意一个上线网站的"AI 味"严重程度——不需要登录、不需要 API、不花一分钱。
🌐 浏览器扩展
仓库里还有一个 extension/ 目录,装上之后可以在浏览器里直接审视任何页面,跑那 24+ 条规则。
这两个东西完全脱离 AI 也能用。你哪怕不写代码,只是想给自己公司的官网做个"AI slop 体检",都可以拿它跑一遍。
九、和 Anthropic 官方 frontend-design 是什么关系?
文档里作者写得很坦诚:
Anthropic 的 frontend-design 是第一个被广泛使用的 Claude 设计技能,Impeccable 就是从它起步的。
可以这么理解:
• Anthropic 官方的 frontend-design:基础教学版,主打"别犯低级错误"。 • Impeccable:扩展加强版,专门攻击 AI 自己的审美惯性,而且做了模型无关化、命令体系化、检测自动化。
如果你只在 Claude Code 里偶尔写写 Demo,官方的就够了;如果你已经在用 AI 大规模产出真正要发出去的页面,Impeccable 这种"工业级"的补丁就值得装。
十、诚实的局限(必读)
不打软文,几条要你注意的:
⚠️ 它治"AI 味",不治"没设计感"。如果你的 prompt 就是"做个落地页",AI 写出来的东西即便干净,也仍然是"通用网页"。Impeccable 能拔高下限,但天花板还是看你自己怎么描述需求。
⚠️ 检测器是"规则匹配",不是"审美评判"。它能抓住"紫蓝渐变"这种特征,但抓不住"配色虽然没违规,但整体气质很塑料"。后者还得靠 LLM 那 12 条主观规则,或者你自己。
⚠️ 不同 AI 编辑器对 skill 的支持程度不一样。Cursor 要切到 Nightly 通道才支持 Agent Skills,Gemini CLI 要装 preview 版本,这些都在 README 里写明了,但意味着你不能"装上就跑",有几分钟配置成本。
⚠️ Trae 国内版和国际版配置路径不一样(~/.trae-cn/skills/ vs ~/.trae/skills/),拷错了就装到看不见的地方。
⚠️ 依赖一份"持续更新"的反模式清单。今天的 AI slop 是紫蓝渐变,明天可能变成别的。一个工具的生命力,取决于作者能不能跟上模型的"流行病"。目前看作者很活跃(666 个 commit、月度发版),但这是个长期变量。
⚠️ 它的设计观不是绝对真理。"不要用 Inter""不要用 bounce 缓动"是有道理的默认值,但你的项目就是要复古、就是要弹来弹去呢?那就别完全照搬,把 anti-pattern 当审查清单而不是戒律用。
十一、它适合谁
✅ 强烈推荐
• 高频用 Cursor / Claude Code / Codex / Copilot 写前端的开发者 • 独立开发者,做 SaaS、独立产品、Side Project 的 • 设计资源紧张的小团队,想让"开发者写出来的页面也能见人" • 设计系统负责人,想给自己的团队定一套 AI 协作规范 • 受不了 v0 / Lovable 默认审美但又必须用 AI 出活的人
❌ 暂时别折腾
• 自家已经有非常成熟、严格执行的设计系统(直接喂给 AI 自己的 token 即可) • 完全不用 AI 写代码的纯设计师(对你没意义) • 一次性的内部小工具(规则压得过狠,反而拖慢)
十二、3 分钟上手
最省事的是直接去官网下:
1. 打开 impeccable.style 2. 选你用的工具(Cursor / Claude Code / Codex / ……),下载对应 ZIP 3. 解压到项目根目录,重启编辑器 4. 输入 /impeccable看命令列表;或者直接/impeccable polish 你的某个页面
或者从仓库拷贝(以 Claude Code 为例):
# 仅当前项目
cp -r dist/claude-code/.claude your-project/
# 或者全局(对所有项目生效)
cp -r dist/claude-code/.claude/* ~/.claude/想纯命令行体检自己的网站,不装任何 AI:
npx impeccable detect https://你的网址.com十三、写在最后:它真正在做的事,是"对抗审美熵增"
这两年我们经历了什么?
AI 让人人都能写代码,于是人人都开始写一样的代码。AI 让人人都能做设计,于是人人都开始做一样的设计。Lovable、v0、Bolt、Cursor 各自的默认产物一字排开,你说不上哪个是哪个。
这不是某个工具的问题,是整个模型生态训练数据高度同质化的必然后果——所有人都在同一批 SaaS 模板、同一套 shadcn/ui、同一种 Tailwind 配色上训练,最后吐出来的就是一种"AI 的乡音"。
💭 Impeccable 真正的价值,不在那 23 个命令或 27 条规则,而在它做了一件几乎没人愿意做的脏活:把"AI 设计味"具体地、可检测地、可纠正地写下来。
💭 它本质上是一群人在对抗"审美熵增"——当所有产出都倾向于趋同时,有人愿意手工地、固执地、一条一条地把不对劲的地方列出来。
💭 而且这不是一个 PUA 你审美的工具。它从不说"你必须照我的来"——它只是说,"嘿,你看,你 AI 刚写出来的这个按钮,8000 个人今天写出来都长这样,你确定要发出去吗?"
当大家都在用同一个模型,真正稀缺的不是"会用 AI",而是"不让 AI 在你脸上盖一个一模一样的章"。
一个 jQuery UI 之父,在 AI 时代选择回到他熟悉的战场——前端审美——并且选择免费开源,这件事本身就挺漂亮。
📚 参考资料
1. Impeccable GitHub 仓库:https://github.com/pbakaus/impeccable 2. Impeccable 官方网站(含案例 + 下载):https://impeccable.style 3. Anthropic 官方 frontend-design skill(本项目的"祖宗"):https://github.com/anthropics/skills/tree/main/skills/frontend-design 4. Paul Bakaus 个人网站:https://www.paulbakaus.com 5. Paul Bakaus 个人简历(About 页):https://www.paulbakaus.com/about/ 6. jQuery UI 维基词条:https://en.wikipedia.org/wiki/JQuery_UI 7. Impeccable npm 包:https://www.npmjs.com/package/impeccable
📖 相关阅读 / 同类工具
• Anthropic Skills 集合 — Claude Code 官方提供的各种领域技能模板:https://github.com/anthropics/skills • shadcn/ui — 当下 AI 最爱"复刻"的组件库本尊,看了 Impeccable 再来用,会有新感悟:https://ui.shadcn.com • Refactoring UI(Adam Wathan / Steve Schoger 著)— 这本书是"非设计师的设计指南"经典,和 Impeccable 思路一脉相承。 • OKLCH 色彩空间介绍 — Impeccable color 参考的核心理论基础:https://oklch.com
📌 版本与日期:本文基于 Impeccable Skill 3.1.1(2026 年 5 月 14 日发布)及当前 GitHub 仓库 README 撰写。后续版本规则数量可能变动,请以仓库最新文档为准。
📌 使用建议:
anti-pattern当作审查清单而非戒律,具体项目要根据自身品牌定位灵活调整。📌 如果这篇对你有帮助,点个赞 + 在看,把它转给身边那位"页面老看着像 AI 写的"的朋友。也欢迎去仓库给原作者 pbakaus/impeccable 点个 star——他正在帮我们所有人对抗审美的熵增。
