ARTICLE · 1077377
Impeccable:给 AI 编程工具补上缺失的设计灵魂
一个 71k Star 的开源项目,专门治 AI 生成页面的"塑料感"。一条命令安装,24 个设计命令,61 条反"AI 味"检测规则。
为什么 AI 写的页面总有一股"AI 味"
不知道你有没有过这种体验:让 Claude Code 或者 Cursor 写个落地页,代码跑起来没毛病,可页面一打开,说不上哪里不对,就是觉得——假。
AI味页面的典型特征
多试几次你会发现规律:字体永远是 Inter,渐变永远从紫到蓝,什么东西都往卡片里装,卡片外面再套一层卡片,标题上面顶着一个圆角小方块图标,正文是灰色字压在彩色背景上。
这不是巧合。市面上的模型都在同一批 SaaS 模板上训练过,你不去主动干预,它就只会这一套。官方管这种东西叫 AI slop,翻译过来就是"AI 垃圾味"。
Anthropic 其实出过一个 frontend-design 技能,算是第一步。但有个叫 Paul Bakaus 的开发者觉得不够——这位老哥是 jQuery UI 的创始团队成员,后来在 Google 待了很多年,做设计和工程两头都沾。他在这基础上做了个更狠的东西:
Impeccable,目前 GitHub 上 71k Star,官网一句话定位:"The missing design vocabulary for agents",给 AI 编程工具补上缺失的设计词汇。
开源地址:https://github.com/pbakaus/impeccable
官网:https://impeccable.style
Impeccable三层能力架构
它到底做了什么
Impeccable 不是又一个 UI 组件库,也不是设计稿转代码的工具。它是一个装进 AI 编程工具里的设计技能包,分三层。
第一层:24 个设计命令
24个设计命令分类地图
这 24 个命令构成了一套你和 AI 之间共享的设计语言。挑几个最常用的:
critique——UX 设计评审,看层级、清晰度、情感共鸣哪里有问题 audit——技术质量检查,无障碍、性能、响应式一次跑完 polish——上线前最后一遍收尾,对齐设计系统 distill——做减法,把页面删到只剩本质 typeset/ layout/colorize/animate——排版、布局、配色、动效,各管一摊bolder/ quieter——设计太平,加大力度;设计太吵,降噪
还有 harden 处理报错、超长文本这类边界情况,onboard 做首跑引导和空状态。
用的时候不用背,直接描述你要什么:
/impeccable polish the pricing page或者更口语一点:
/impeccable redo this hero section第二层:61 条确定性检测规则
61条检测规则工作原理
这是我最欣赏的设计。规则跑在本地 CLI 里,不需要 LLM,不需要 API Key,纯确定性代码检测那 61 种 AI 经常犯的毛病:斜体衬线大标题、超细边框配宽阴影、hero 区的 eyebrow 标签、卡片嵌套……
检测到就报,报告在 agent 编辑代码的时候实时反馈回去,相当于给 AI 配了个不睡觉的设计总监。
第三层:产品上下文
init 命令会跟你聊一轮,把受众、目标、约束、语气这些"产品事实"写进 PRODUCT.md,视觉系统单独记在 DESIGN.md 里。之后不管哪个命令干活,都有据可依,不会今天一个风格明天一个风格。
安装教程:两分钟搞定
两分钟安装流程
第一步:装技能
在你的项目根目录跑:
npx impeccable install安装器会自动探测你机器上装了哪些 AI 工具——~/.claude、~/.cursor、~/.codex、~/.grok 这些目录都会被扫到,然后问你装到当前项目还是全局。
想跳过交互,直接指定:
npx impeccable install --providers=claude,cursor --scope=project目前支持 Claude Code、Cursor、Codex CLI、Gemini CLI、GitHub Copilot、Grok Build、Trae、OpenCode 等 15+ 工具。用 VS Code + Copilot 的朋友也可以直接在插件市场搜 "impeccable" 装,一个效果。
第二步:初始化
打开你的 AI 编程工具,在对话里输入:
/impeccable init它会检查项目、问几个关键问题,生成 PRODUCT.md。装完记得重启一下你的 AI 工具,让它加载新技能。
第三步:更新
以后升级一行命令:
npx impeccable update注意:Codex 用户装完要在 /hooks 里批准一下项目 hook;Grok Build 用户需要先信任项目文件夹。
实战:Neo Mirai 案例
Neo Mirai案例流程
官网有个完整案例值得一看。作者用 GPT Image 2 生成了两张图:一张页面 mockup,一份品牌视觉规范,内容是一场虚构的 AI 设计大会。
然后交给 Impeccable,一句话:
/impeccable design a retro-futurist AI design conference website它做了三件事:
保留构图。mockup 里的大幅开场图、深色议程区、橙色宣言带、装置网格、票务区,位置和比例原样带到代码里。
整理素材。城市背景、讲者头像、松枝纹理这些图,该重新生成的重新生成,该切成独立资源的切成资源。
浏览器里逐轮打磨。每改一轮就在浏览器里过一遍检查:文字重叠、图片裁切尴尬、导航状态、讲者轮播的 bug、小屏适配……全部揪出来修掉。
最后产出的是一个真正可用的响应式网站,不是一张只能看的静态图。
社区里的反馈也相当真实。有人拿它做个人作品集,"迭代了好几轮,几乎没碰 Figma";有人说这是"今年用过最好的技能,不敢相信是免费的";还有位老哥的话很直接:"把你现在用的前端技能卸了吧,换成 Impeccable。"
几个值得记住的反模式
五个前端反模式检查清单
技能里内置了一份"别这么干"清单,其实就算不装 Impeccable,自己写页面时也值得对照:
不要用烂大街的字体(Arial、Inter、系统默认) 不要在彩色背景上放灰色文字,对比度先算清楚 不要用纯黑纯灰,带一点色调,画面会活很多 不要什么都包卡片,更不要卡片套卡片 不要用 bounce 和 elastic 缓动,一眼 2019 年
工具地址再放一遍:
开源地址:https://github.com/pbakaus/impeccable 官网文档:https://impeccable.style 案例演示:https://impeccable.style/cases/neo-mirai
AI 写代码这事儿已经基本解决了,审美可能是下一块短板。Impeccable 的思路不是替你设计,而是把设计判断变成 AI 听得懂的命令——这条路子,值得每个经常和 AI 结对写前端的人试一试。