从"能用"到"惊艳"：AI设计技能Impeccable完全指南

1. 引言：为什么AI写出的界面总差一口气？

如果你用过AI编程助手，大概率遇到过这样的情况：代码逻辑没问题，功能也完整，但生成的界面就是透着一股说不出的"AI味"——满屏的Inter字体、紫蓝渐变、卡片套卡片，配色和布局总让人觉得"哪里不对"。

这不是你的错觉。大型语言模型从海量通用模板中学习，不加干预时，它们会不约而同地输出那些最常见的、最保险的设计选择。结果是：技术上正确，视觉上平庸。

Impeccable正是在这个痛点上诞生的。它不是一个UI库，也不是设计工具，而是一套为AI编程助手安装的"设计审美系统" 。它让AI在生成界面时，不再靠"猜"，而是遵循明确的设计原则和约束。

2. Impeccable是什么？核心原理拆解

2.1 本质：AI的设计"行话"手册

通俗理解：你让一个不懂设计的新人做UI，他会做出很业余的东西。Impeccable就像一本给AI读的《设计入门到精通》，里面写清楚了：

• 什么该做：7个领域的设计规范（字体、色彩、空间、动效、交互、响应式、UX写作）
• 什么不该做：59条明确的反模式检测规则，告诉AI什么设计是"一眼AI"

2.2 技术原理：它是如何工作的？

Impeccable的技术架构分为三层，理解这三层能帮你更好地使用它：

第一层：设计知识库（Skill层） 这是AI读取的"教材"。它包含7个领域的参考文档，覆盖从OKLCH色彩空间到模块化字体的专业设计知识。当AI执行相关命令时，这些知识会被加载到上下文中。

第二层：命令行接口（CLI检测层） Impeccable提供了一个独立的命令行工具npx impeccable detect，可以对HTML、CSS、JSX等文件进行确定性检测。它不依赖AI判断，而是用程序化的方式扫描代码，找出违反设计规则的地方。

技术原理是：它用htmlparser2将HTML解析为DOM树，然后模拟浏览器的CSS层叠计算（类似getComputedStyle），最后逐元素对照59条规则进行检测。这比单纯用正则匹配要准确得多——它能真正理解元素的位置、样式和层级关系。

第三层：AI指挥层（Commands层） 这是你与AI交互的界面。23个专用命令（如/polish、/critique、/audit）将你的设计意图翻译成AI能精确执行的动作。

3. 安装与环境准备

3.1 前置要求

• Node.js 22.18或更高版本
• 一个支持的AI编程助手：Claude Code、Cursor、Gemini CLI、Codex CLI、GitHub Copilot等

3.2 安装方式（推荐两种）

方式一：CLI一键安装（最推荐）

在项目根目录运行：

npx skills add pbakaus/impeccable

这个命令会自动检测你使用的AI编程助手，并将技能文件写入对应的目录（如.claude/skills/或.cursor/skills/）。

安装完成后，重启你的AI编程助手，输入/应该就能看到/impeccable、/polish等命令出现在自动补全列表中。

方式二：插件安装（Claude Code用户）

/plugin marketplace add pbakaus/impeccable

然后通过/plugin安装即可。

3.3 验证安装

在AI助手中输入/impeccable，如果能看到命令列表，说明安装成功。

4. 核心工作流：分三步驯服AI的设计能力

第1步：教授设计上下文（最重要的一步！）

绝大多数"AI设计翻车"的原因是——AI不知道你的产品是干什么的、给谁用的、品牌调性是什么。Impeccable通过/impeccable teach命令解决这个问题。

执行命令后，AI会问你几个问题：

- 这个产品是给谁用的？ 
  不要说"用户"，要说"在会议间隙用手机评估新工具的独立创始人"

- 用三个词描述品牌调性？
  "温暖、机械、有主见"好过"现代、干净"

- 界面应该给人什么感觉？
  "冷静、可信、快速"或"有趣、大胆、略带混乱"

- 有没有参考的设计？（网站截图或设计系统）
- 有没有绝对不要的设计风格？

回答完这些问题后，Impeccable会在项目根目录生成一个**.impeccable.md文件**。这个文件记录了你的设计偏好，未来每一次调用技能都会自动读取它。

你可以随时编辑这个文件——这是你的设计"宪法"，AI会严格遵守。

第2步：用/critique做设计审查（找到问题）

在开始修改之前，先让AI做一次全面的设计审查：

/critique 登陆页面

AI会从层次、清晰度、情感共鸣等维度给出评分和问题清单，并自动检测是否踩了59条反模式规则。这相当于免费获得一次专业设计师的Code Review。

第3步：用/polish执行精准打磨（解决问题）

/polish 定价页面

这是最常用的命令。它不会重写整个页面，而是做有针对性的微调。一次典型打磨会产生类似这样的改动列表：

视觉对齐：修复了3个跑偏的元素
字体排版：收紧h1字距，修复列表中的孤行
色彩：将1处硬编码色值替换为--color-accent令牌
交互：为FAQ列表项添加悬停状态
动效：将模态框入场动画调为220ms ease-out-quart
文案：删除残留的Lorem占位符

关键技巧：如果打磨结果你不喜欢，可以直接告诉AI"把XX改回去"，然后继续迭代。

5. 完整实战：从零打磨一个定价页面

假设你刚用AI生成了一个定价页面，它"能用但不好看"。我们完整走一遍Impeccable流程：

5.1 环境与安装

# 在项目根目录
npx skills add pbakaus/impeccable
# 重启AI助手

5.2 教授设计上下文

/impeccable teach

按提示输入你的产品信息。例如：

• 用户：技术团队的技术决策者
• 品牌调性：专业、可信、不花哨
• 界面感觉：清晰、高效、沉稳
• 反例：不要紫色渐变、不要发光效果

5.3 审查现有页面

/critique pricing.html

AI会输出审查报告，可能指出：

• 三个套餐卡间距不一致
• "企业版"标题使用了发光的紫色渐变（反模式）
• CTA按钮触控区域偏小（触摸目标<44px）

5.4 执行打磨

/polish pricing.html

AI根据审查结果和你的设计上下文，逐一修复上述问题。你最终得到一个对齐了品牌调性、符合设计规范、没有"AI味"的定价页面。

6. 高级技巧与日常使用建议

6.1 常用命令速查

6.2 关于.impeccable/文件夹

运行命令后，项目根目录会出现.impeccable/文件夹，里面存放截图、缓存、会话状态等临时文件。

强烈建议：将以下内容加入.gitignore（Impeccable官方提供了完整模版）：

.impeccable/config.local.json
.impeccable/*.png
.impeccable/live/sessions/
.impeccable/live/previews/

但要提交这些共享文件到仓库：

• .impeccable/config.json（共享配置）
• .impeccable/design.json（共享设计规格）
• .impeccable/critique/*.md（审查报告）

6.3 性能检测功能（额外惊喜）

除了AI驱动的设计打磨，Impeccable还提供独立的命令行检测工具：

# 扫描本地文件
npx impeccable detect src/

# 扫描线上URL（需要Puppeteer）
npx impeccable detect https://你的网站.com

# 输出JSON格式（可用于CI流程）
npx impeccable detect --json src/

这能在不消耗AI调用次数的情况下，快速发现设计问题。

7. 总结：Impeccable解决了什么问题？

Impeccable的价值不在于"让AI写出更好看的界面"这么简单。它的本质是在人类和AI之间建立了一个设计语言的共同框架。

过去，你只能说"帮我改好看点"，AI听不懂。现在你可以说/polish，AI知道要去调整间距节奏、字体层级、色彩对比、交互状态、动效时长。

Impeccable不是魔法，它是一个将设计原则编码为AI可执行指令的工程化方案。它不会替代设计师，但它能让每个开发者——无论设计水平如何——都能通过AI产出高质量的界面。

试试看，从/impeccable teach开始。