我给 AI 装上了一套设计系统，它再也不写"AI 味"的界面了

AI 味的页面写的界面都长一个样？

紫蓝渐变配暗色背景、所有东西包在 card 里、Inter 字体加圆角矩形、默认暗色模式配发光 accent……一看就知道是 AI 生成的。

我之前也以为这就挺好看了（哈哈哈哈）。直到有一天，一个朋友看到我的产品说：“这一看就是 AI 做的吧？”

扎心了。

后来我花了一些时间，在 AI 的帮助下，找到了一套解决方案——两个 AI skill 配合使用：一个负责”设计什么”（ui-ux-pro-max），一个负责”怎么做+质量检查”（Impeccable）。可能是目前最完整的 AI 辅助前端设计工作流了。我已经在我的产品中去尝试，效果非常好👍。

先说一下前情。之前写过一篇文章，聊我用 ui-ux-pro-max 一句话改造了 SaaS 产品的 UI。

当时一句话”重新设计我的网站 landing page 页面”，界面就大变样了。我自己都有点意外——在我没有提供任何信息的情况下，他分析了我的网站功能、业务方向，以此为基础去设计。看起来就是大公司手笔。

但是，用了两三个月之后我发现——ui-ux-pro-max 更像一个设计顾问：它告诉你该怎么做，给你出方案。方案是不错，但落地到代码的时候，AI 写出来的界面还是有股”AI 味”。

后来我在 GitHub 上发现了 Impeccable（16.2k ⭐），它解决的就是这个问题：给 AI 注入设计词汇和反模式约束，让它别再写千篇一律的界面了。

这两个工具配合起来，才是完整的链路——一个负责”设计什么”，一个负责”怎么做+质量检查”。

今天这篇文章，我把这一个多月多摸索出来的完整工作流分享出来。

一、先搞清楚：这两个工具到底是什么关系？

很多人会问：有 Cursor/Copilot/Antigravity 了，还需要这些 skill 吗？

需要。这些 skill 不替代你的 AI 编程工具，而是给你的 AI 编程工具”注入设计知识”。

打个比方，你的 AI 编程工具就像一个什么都会做的厨师，但他只会做家常菜。ui-ux-pro-max 是一本高级菜谱（告诉厨师这道菜应该什么味道、什么摆盘），Impeccable 是一套厨具+品控标准（确保厨师真的按菜谱做了，不偷工减料）。

	ui-ux-pro-max	Impeccable
角色	设计顾问	设计工匠
阶段	项目启动、设计探索	开发过程、质量保证
能力	67 种 UI 风格、96 种配色、57 种字体配对	20 个命令直接改代码 + 审计评分
产出	设计系统推荐文档（文字方案）	代码修改 + 审计报告

一句话总结：ui-ux-pro-max 做决策，Impeccable 做执行+质检。

二、安装（30 秒搞定）

npx skills add pbakaus/impeccable

跑完这行命令，项目根目录就会出现对应的 skills 目录（Antigravity 放 .agents/skills/，Cursor 放 .cursor/skills/，Claude Code 放 .claude/skills/）。

ui-ux-pro-max 也一样的安装方式。两个都装上。

三、核心概念：`.impeccable.md` —— 给 AI 的”设计记忆”

这是整个系统的灵魂。

你可能遇到过这种情况：每次让 AI 写页面，都要重新描述一遍”我想要什么风格”。哪怕你上次才告诉过它。

.impeccable.md 就是解决这个问题的——它把你的设计上下文持久化了。所有 Impeccable 的命令执行前都会先读这个文件。

它长什么样？大概是这样：

## Design Context

### Users
[用户画像、使用场景]

### Brand Personality
[品牌调性，比如 playful, colorful, educational]

### Aesthetic Direction
[视觉方向、参考网站、反面教材]

### Design Principles
[3-5 条设计原则]

怎么生成？ 跑 /teach-impeccable。

AI 会先扫你的代码（README、package.json、CSS variables、组件），能推断出来的信息自己填，推断不出来的再问你。你只需要告诉它：

参考网站：“我想要 Linear 那种感觉”
反面教材：“不要看起来像 Bootstrap 默认模板”
品牌个性用 3 个词描述
目标用户是谁

搞定之后，这个文件提交到 git，后续 AI 每次写页面都会自动加载——不用你反复描述风格了。

对了，这个文件可以手动编辑补充信息，npx skills update 也不会覆盖它。

四、20 个命令怎么用？别慌，分三类就够了

Impeccable 有 20 个命令，看着吓人，但其实分成三类就清楚了。

第一类：只看不改（2 个）

命令	干什么
`/audit`	技术审计，5 个维度打分：无障碍、性能、主题、响应式、反模式，P0-P3 分级
`/critique`	设计评审，UX 层面：视觉层级、认知负荷、信息架构

这两个是诊断工具。跑完它会给你一个分数（audit 满分 20，critique 满分 40），告诉你哪里有问题，严重程度多高。

一个容易混的点：/audit 审的是”代码层面能量化的”（对比度数值、ARIA 缺失、硬编码颜色），/critique 审的是”体验层面定性的”（这个布局是不是让人困惑、信息有没有传达到位）。

先跑 /critique（确认方向对不对），再跑 /audit（确认实现对不对）。

第二类：动手改（16 个）

这些命令会直接修改你的代码：

基础设施类：

/normalize — 对齐 design system（tokens、间距、排版），写完新页面必跑
/extract — 从代码里提取可复用组件和 design tokens
/polish — 上线前最终打磨（必须最后做，功能没写完别跑这个）

风格调整类：

/typeset — 修排版（字体、字阶、层级）
/arrange — 修布局间距
/colorize — 重新着色（OKLCH 调色板，60/30/10 比例）
/bolder — 设计太安全？加点张力
/quieter — 设计太吵？收一收
/distill — 太复杂？精简

功能增强类：

/animate — 加动效
/delight — 加惊喜时刻、微交互
/harden — 生产就绪：错误处理、i18n、边界情况
/adapt — 响应式适配
/onboard — 新手引导、空状态
/clarify — 改善 UX 文案
/overdrive — 极致效果：shaders、弹簧物理（beta）

第三类：初始化（1 个）

/teach-impeccable — 一次性，生成 .impeccable.md

两个关键规则（来自源码）：

所有修改命令执行前都会先读 .impeccable.md。没有这个文件？它会强制你先跑 /teach-impeccable
/polish 是最后一步。官方原话：“Polish is the last step, not the first. Don’t polish work that’s not functionally complete.”

命令可以指定范围：/audit header、/polish checkout-form、/critique landing page

也可以组合：/audit /normalize /polish blog

五、四个真实场景——你大概率会遇到其中一个

场景 A：从 0 开始建新项目

这是最常见的。流程是这样：

安装 → /teach-impeccable → 写第一个核心页面 → 质量闭环 → 提取 design system

重点在第一步：因为新项目代码少，AI 推断不出太多信息，会问你比较多的设计问题。这个时候认真回答——给出参考网站、反面教材、品牌个性。这些回答会直接影响后续所有页面的质量。

写完第一个核心页面后，跑质量闭环：

/critique landing-page    ← 方向对不对？
/audit landing-page       ← 实现有没有问题？
/normalize landing-page   ← 对齐
/typeset landing-page     ← 修排版
/polish landing-page      ← 最终打磨

然后 /extract landing-page 提取 design tokens（颜色、排版、间距、组件），后续页面都基于此构建。

场景 B：已有 SaaS 模板，按业务定制

比如你买了一个 Next.js 模板，要按自己的品牌定制。

模板的 design system 已经存在了，你要做的是定制它：

/colorize    ← 重新生成调色板
/typeset     ← 推荐适合品牌的字体
/normalize   ← 统一全部样式到新 tokens

关键区别：模板场景下 /normalize 比 /extract 更重要——design system 已经有了，你要对齐它，不是提取新的。

后续每个新页面就是：写页面 → /audit → /normalize → /polish

场景 C：老项目，保持风格一致

老项目通常有 implicit 的 design system——风格一致但没文档化。你要做的是把 implicit 变成 explicit。

核心步骤：

/teach-impeccable — 这次最有价值，因为 AI 有大量代码可扫描
/extract 全局提取 — 识别 3+ 次出现的模式，产出 tokens 文档
后续新页面：/normalize → /audit → /polish

场景 D：推翻现有设计，重做

这个场景有个关键区别——要先诊断旧设计”具体烂在哪”，避免重做时踩同样的坑。

/critique 旧页面 → 量化问题 → 确定新方向 → /teach-impeccable（写入新方向）→ 重写核心页面 → /extract → 逐步替换

对了，在确定新方向这一步，可以用 ui-ux-pro-max 来探索——这就是两个工具配合的地方，下面详细说。

六、两个工具怎么串起来？这是最有价值的部分

说实话，单独用哪个都行，但串起来用才真正舒服。

Phase 1：用 ui-ux-pro-max 做设计决策

# 生成完整设计系统推荐
python3 skills/ui-ux-pro-max/scripts/search.py "education kids bubble letters colorful fun" --design-system -p "Bubble Letters"

# 不满意？换关键词试
python3 skills/ui-ux-pro-max/scripts/search.py "kids creative tool playful illustration" --design-system -p "Bubble Letters"

# 想深入某个维度
python3 skills/ui-ux-pro-max/scripts/search.py "playful colorful" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "kids educational" --domain typography

跑完会生成 design-system/MASTER.md——你的设计系统”蓝图”。

Phase 2：把决策灌入 .impeccable.md

跑 /teach-impeccable，AI 问你问题时，直接引用 MASTER.md 的结论：

AI: "品牌个性用 3 个词描述？"
你: "参考 MASTER.md，playful, colorful, educational"

AI: "参考网站？"
你: "MASTER.md 推荐的 pattern 是 xxx"

Phase 3：用 Impeccable 执行和质检

/audit → /normalize → /polish

一句话总结这个流程：ui-ux-pro-max 出蓝图，.impeccable.md 存蓝图，Impeccable 命令按蓝图施工+验收。

七、AI 写界面最常踩的坑（Impeccable 教 AI 避的）

这部分来自 Impeccable 源码里的反模式库。我摘了一些最典型的，你看看自己中了几个：

颜色：

❌ 紫蓝渐变 + 暗色背景（AI 最爱的配色，一看就是 AI 生成的）
❌ 纯黑 #000 / 纯白 #fff（自然界不存在纯黑白，始终要 tint）
❌ 默认暗色模式 + 发光 accent

排版：

❌ Inter / Roboto / Arial 默认字体（没有个性）
❌ 用 Monospace 偷懒表示”技术感”

布局：

❌ 所有东西包在 card 里（不是所有内容都需要容器）
❌ card 嵌套 card
❌ 千篇一律的 icon + heading + text 卡片网格
❌ 居中一切（左对齐 + 非对称更有设计感）

动效：

❌ bounce / elastic 缓动（用 ease-out-quart / quint / expo，自然减速）
❌ 动画 width/height/padding/margin（只动画 transform 和 opacity）

我之前让 AI 写界面的时候，上面这些坑至少中了一半（哈哈哈哈，还觉得挺好看）。

装上 Impeccable 之后，AI 会自动避开这些反模式。这可能是最值回票价的部分——你不需要自己懂设计，AI 帮你避坑。

八、我的真实感受

用了这套工具一个多月，最大的变化不是”UI 变好看了”，而是”我开始能看出好设计和坏设计了”。

之前完全不知道一个界面为什么”感觉不对”——现在跑一遍 /audit 和 /critique，它会精准告诉你：这里对比度不够、那里间距不一致、这个卡片层级太深。

开始有设计审美了（虽然还是菜鸟级别），这种提升是我没想到的。

另一个感受是：设计系统即使是小产品也很重要。 有一套统一的配色和规范，产品看起来就像一个整体，而不是拼凑出来的。这个我之前完全没意识到，是 /normalize 这个命令教会我的。

最后说一句：这两个工具都是 skill，跟你用什么 AI 编程工具无关——Antigravity、Cursor、Claude Code、Gemini CLI 都能用。安装就一行命令，没有理由不试。

如果你也是独立开发者，设计一直是短板，真的可以试试。

今天就能做的 3 件事：

跑一遍 npx skills add pbakaus/impeccable，30 秒装好
在你当前项目里跑 /teach-impeccable，生成设计上下文
对你最重要的那个页面跑 /audit，看看能拿多少分

能把产品从 60 分做到 80 分，就够了。