impeccable：给 AI 装上审美能力
AI 生成的界面总有一种"塑料感"？这个开源 Skill 用 23 条设计命令和 25 条反模式规则，把 AI 输出从 Bootstrap demo 拉到能见人的水平。
AI 写前端有个老毛病：功能都对，但看着就是不对劲。
你大概见过这种页面——Inter 字体、紫色渐变标题、卡片套卡片、低对比度灰色标签、按钮颜色像是随机抽的。不是 CSS 写错了，是 AI 根本没有"审美"这个概念。它在模仿训练数据里最常见的页面模板，所以所有 AI 生成的界面都长一个样。
有人管这个叫"AI slop"——AI 汤，看着像那么回事，但没有辨识度。impeccable 要解决的就是这个问题。
它到底是什么
impeccable 是 Paul Bakaus 做的开源项目（Apache 2.0），给 AI 编程工具加一层设计能力。不是 UI 组件库，不是设计系统，更不是帮你调 CSS 的工具——它是一套设计语言，让 AI 理解"好看"意味着什么，然后在生成界面时做出更合理的判断。
核心思路是：大部分人写不出好 prompt，不是因为不会用 AI，而是因为缺乏设计词汇。你说"帮我做个好看的登录页"，AI 不知道"好看"具体指什么。impeccable 给了你 23 个具体命令，比如 /impeccable polish、/impeccable audit、/impeccable bolder。每个命令背后都有一套设计规则，AI 可以直接执行，不用你猜措辞。
装上试试
npx skills add pbakaus/impeccable -y装完不用配置。支持 Claude Code、Cursor、Gemini CLI、Copilot、VS Code 等 11 种以上的 AI 编程工具，不挑。
23 条命令，不是一把梭
impeccable 最值得说的是它的命令体系。不是"装上就完事"的黑箱，你有细粒度的控制权。
日常用得最多的几个：
| 命令 | 干什么 |
|---|---|
/impeccable teach | 让 AI 了解你的项目——受众、品牌调性、反面参考，存到 PRODUCT.md |
/impeccable polish | 对齐你已有的设计系统，不破坏现有风格 |
/impeccable audit | 给当前页面打分，5 个维度，按严重程度分 P0-P3 |
/impeccable critique | 多角色模拟审查，基于尼尔森可用性原则打分 |
/impeccable craft | 从设计 brief 到完整实现，一条链跑完 |
/impeccable shape | 做一个结构化的需求访谈，先搞清楚再动手 |
需要微调的场景也有对应命令：
typeset 管排版、animate 管动效、colorize 调配色、bolder 加重量感、quieter 做减法、layout 调布局、delight 加细节。这些命令会根据你当前的工作类型——品牌页面还是产品界面——自动切换行为模式。
Brand 和 Product：两套规则
这是 impeccable 很重要的一个区分。做营销落地页和做产品后台，设计逻辑完全不同。营销页面讲究视觉冲击力和情感共鸣，产品界面讲究信息密度和操作效率。
impeccable 把这叫 Register（寄存器）：
- Brand register——设计就是产品本身：营销页、作品集、编辑类内容
- Product register——设计服务产品：App 界面、工具、数据看板
/impeccable teach 的时候会确认你项目的 register 类型，存进 PRODUCT.md。之后所有命令都按对应的 register 来执行，不会搞混。
反模式检测：25 条规则
AI 生成界面的常见毛病，impeccable 总结了 25 条，做成了确定性检测规则——不依赖 LLM，纯规则匹配。
几个典型的：
- 紫色渐变标题——AI 特别爱用，但十个页面九个这样就审美疲劳了
- Cardocalypse（卡片末日）——卡片套卡片再套卡片，信息层级完全混乱
- Inter 字体通吃——不管什么场景都是 Inter，企业官网和小游戏一个味
- 低对比度灰色标签——文字颜色和背景差不了几个色阶，看着费劲
- 模板化布局——Hero section + 三列 feature + CTA，跟 Bootstrap demo 长一样
你可以用 CLI 直接扫代码：
npx impeccable detect src/支持 HTML、CSS、JSX/TSX、Vue、Svelte、CSS-in-JS。能检测框架类型，追踪跨文件引用，输出 CI 可用的 JSON 格式。还有个 --fast 纯正则模式，跑得更快。
还有一个 Chrome 扩展，在浏览器里一键扫描任何页面——localhost、staging、线上环境都行，问题直接高亮标注在页面上。
上下文记忆：PRODUCT.md 和 DESIGN.md
impeccable 不是每次对话都从零开始。它用了两个文件来积累项目的设计上下文：
PRODUCT.md 记录你的受众是谁、品牌性格是什么、反面参考（"不要做得像 XX"）、register 类型。一次 /impeccable teach 就建好，之后所有 AI 对话都能读到。
DESIGN.md 是更完整的设计规范文档，/impeccable document 扫一遍代码库自动生成，格式兼容 Google Stitch 标准。里面有 6 个标准化章节，其他支持这个格式的工具也能读。
这两个文件意味着：你今天调好的设计方向，下周换个对话窗口，AI 还是记得。
Live 模式（Alpha）
最让我觉得有意思的功能——直接在浏览器里跟 AI 迭代设计。
操作流程：选中页面上某个元素，写个批注或画个标记，点 Go。AI 生成三个不同风格的变体，通过 HMR 直接替换到页面上。你挑一个满意的，直接写回源文件。
支持 Vite、Next.js（含 monorepo）、SvelteKit、Astro、Nuxt。严格 CSP、条件渲染、模态弹窗这些麻烦场景也处理了。
哲学：对话先于生成
impeccable 的作者 Paul Bakaus 有个观点：设计师画完 mockup 扔过墙给开发的时代结束了。AI-first 的开发方式需要的是原生设计能力——不是在画布上画，而是在真实代码库里工作。
所以 impeccable 的工作流不是"先设计再开发"，而是"先聊清楚再动手"：
/impeccable shape先做需求访谈——目标用户是谁、品牌性格、要避开什么风格- AI 把这些存进 PRODUCT.md
- 生成界面时，AI 要先"枚举并拒绝自己的默认偏好"再做选择——这叫 Anti-attractor procedure
/impeccable audit检查产出，打分标注问题
这个"先拒绝默认再做选择"的机制很关键。AI 模型有强烈的 attractor（吸引子），总是趋向训练数据里最常见的模式。impeccable 会要求模型先识别自己的默认偏好，再避开它们。
跟其他工具的关系
几个容易混淆的地方说清楚。
不是设计工具的替代品。 你做品牌视觉体系、复杂动效、多端适配策略，还是得设计师来。impeccable 做的是把 AI 的输出从 40 分拉到 70 分——能发给客户看，不会被一眼打回来。
跟 huashu-design 的定位不同。 impeccable 像一个"一直开着的审美滤镜"，日常开发时自动提升 UI 质量。huashu-design 是需要做高保真原型或交互 demo 时单独调用。两个可以同时装，不冲突。
不是绑定某个 AI 工具的。 Claude Code、Cursor、Gemini CLI、Copilot、VS Code 都能用。设计知识存在 .claude/、.cursor/、.gemini/ 等不同目录里，impeccable 会自己判断放哪。
一些数字
- GitHub 星标 22k+
- 23 条设计命令 + 25 条反模式检测规则
- 支持 11 种以上 AI 编程工具
- Apache 2.0 开源，全免费
- 已在 GPT-5.4 和 Qwen 3.6 Plus 上验证，覆盖 15 个行业场景
- 作者 Paul Bakaus（@pbakaus），提供企业级部署和培训服务
怎么判断你需不需要它
如果你做 MVP 原型，目标是验证想法不是拿设计奖——但原型太丑，测试用户连注册都不会点。装上。
如果你平时搞后端，偶尔被拉去写管理后台——代码能写，审美上差口气。装上。
如果你要快速出 demo，客户或老板要"先看个东西"——没时间慢慢调 UI，也不想太寒碜。装上。
简单说：不花设计师的钱，但也不想做出那种一看就是程序员写的页面。
链接
- 官网：impeccable.style
- GitHub：pbakaus/impeccable
- Chrome 扩展：Chrome Web Store 搜索 impeccable