如果你第一次接触 Impeccable.style，很容易把它理解成“又一个帮 AI 把页面做漂亮的提示词包”。
但从官网首页和 cheatsheet 的写法来看，它更准确的定位其实是：一套给 AI coding tools 使用的前端设计 skills / commands。它不是只给你几段 prompt，而是把“先审计界面、再统一设计、再补强适配与鲁棒性、最后做增强和精修”这些动作，拆成了 17 个可以直接调用的命令。
也就是说，Impeccable.style 真正解决的问题不是“AI 会不会写页面”，而是：AI 做前端时，能不能更像一个真的懂界面质量、视觉层级和交互细节的搭档。
这篇文章不再按“17 条命令逐条背诵”的方式来写，而是按新手上手教程来讲：
- 它到底是什么
- 怎么安装、怎么调用
- 第一次用时最推荐的起手方式
- 遇到不同问题时，该选哪条命令
- 最后再给你一份 17 条官方命令速查
一、先用一句话理解：Impeccable.style 是什么
根据官网首页，Impeccable.style 是一套面向 Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、Antigravity、Kiro 等 AI coding tools 的设计增强能力。
它的重点不是“再造一个前端生成器”，而是：
- 在前端设计 skill 的基础上继续扩展
- 补充更明确的设计模式与反模式
- 把设计动作拆成 17 个 design skills / commands
所以更准确的说法应该是：
Impeccable.style是一套给 AI coding agent 使用的前端设计技能包，而不是一个单纯收集美化 prompt 的网站。
二、新手先搞清楚：它到底是 skill 还是 command
官方资料里，这两种叫法都会出现。
- 在概念层面，它们是 design skills
- 在使用层面，它们通常表现为 slash commands，比如
/audit、/polish
所以你完全可以这样理解：
- 本质上：它是一组 skills
- 调用时：通常以 commands 的形式出现
这也是为什么官网会说它有 17 design skills，而 cheatsheet 又会把它们展示成 /audit、/distill、/bolder 这种斜杠命令。
三、先装好再说：官方安装方式与调用方式
1. 官网首页给出的主安装方式
官网首页给出的主安装命令是：
| |
官网说明，这种方式会自动识别你正在使用的工具，并安装到对应位置。
2. Claude Code 的安装入口
官网首页还给了 Claude Code 的安装路径：
| |
然后：
- 打开
/plugin - 进入
Discover - 安装对应插件
3. 也支持手动安装
如果不走自动安装，官网 FAQ 也提到可以下载通用 ZIP，解压到项目目录。
FAQ 里提到的目录包括：
.cursor/.claude/.gemini/.codex/.agents/
4. 安装后怎么调用
官方 cheatsheet 里的调用写法是这种形式：
| |
也就是说，如果你只是想学会使用方式，直接记住：
- 输入
/ - 找到对应命令
- 直接触发
就够了。
5. 它不一定只能手动触发
官网首页还提到，这些 skills 在相关场景里有时会自动应用；如果你想更明确地指定，也可以在提示里直接说希望 AI 使用对应的前端设计 skill。
四、新手第一次用，最推荐的不是“17 条全试一遍”
如果你今天第一次上手，我最建议的不是从头到尾把 17 条全点一遍，而是走一条最小路径：
| |
为什么是这 4 步？
第一步：/teach-impeccable
它的作用是一次性收集项目设计上下文，并保存为持续生效的设计指南。
你可以把它理解成：
- 先告诉 AI 这个项目是什么气质
- 先说明品牌、风格、语气、边界
- 以后少重复解释“我想要什么风格”
这是最像“先把设计背景教给 AI”的一步。
第二步：/audit 或 /critique
这一步不是改，而是先判断问题在哪。
- 如果你更关心 可访问性、性能、响应式、主题一致性，先用
/audit - 如果你更关心 视觉层级、信息架构、整体体验、情绪表达，先用
/critique
你也可以简单记成：
audit更像体检critique更像设计评审
第三步：/normalize 或 /distill
当你大致知道问题在哪之后，再决定是“统一”，还是“收掉”。
- 如果页面最大的问题是不一致、不像一个系统里做出来的，用
/normalize - 如果页面最大的问题是太满、太杂、太复杂，用
/distill
这一步其实就是：
- 要么收敛到系统里
- 要么提炼到更简洁
第四步：/polish
等结构和方向差不多稳定后，再用 /polish 做最后一轮细节打磨。
/polish 更适合处理：
- 对齐
- 间距
- 一致性
- 那些“不影响功能，但影响质感”的小问题
所以它更像上线前的 final pass，而不是起手命令。
五、如果你不知道该用哪条命令，就按问题来选
对于新手来说，最有效的记法不是背名字，而是记“我现在遇到的到底是哪种问题”。
先看这一张速查表：
| 你现在遇到的问题 | 更适合的命令 | 可以怎么理解 |
|---|---|---|
| 我根本不知道页面差在哪 | /audit | 先做全面体检，找出质量问题 |
| 我想知道它为什么看起来不够好 | /critique | 先做设计评审，看层级、节奏和体验 |
| 页面能用，但不像同一个产品做出来的 | /normalize | 先把风格收回设计系统 |
| 页面太杂、太满、太难抓重点 | /distill | 先去掉不必要的复杂性 |
| 文案、标签、错误提示说得不清楚 | /clarify | 先把 UX copy 讲明白 |
| 桌面端正常，但换设备就变形 | /adapt | 先处理多设备、多场景适配 |
| 正常情况没问题，但边界情况扛不住 | /harden | 先补强错误态、溢出、多语言等问题 |
| 页面加载慢、动画卡、图片重 | /optimize | 先解决性能和流畅度 |
| 页面方向没问题，但细节还不够顺 | /polish | 最后一轮打磨对齐、间距和一致性 |
| 页面太安全、太普通、没有记忆点 | /bolder | 适度放大视觉冲击力 |
| 页面太吵、太硬、强调过多 | /quieter | 先降噪，保留重点 |
| 页面太灰、太白、太平 | /colorize | 增加更有策略的色彩表达 |
| 页面交互太“死”，没有反馈感 | /animate | 增加有目的的动效和微交互 |
| 页面已经能用，但缺少一点温度 | /delight | 加一些更讨喜、更有记忆点的细节 |
| 做了很多页面，想开始沉淀系统 | /extract | 提炼组件、tokens 和可复用模式 |
| 新用户第一次进来不知道该做什么 | /onboard | 优化 onboarding、空状态和首次体验 |
1. 我根本不知道页面差在哪
先用：
| |
适合：
- 想做全面排查
- 想知道问题严重不严重
- 想先拿到一份偏质量维度的报告
如果你更想知道“为什么它看起来不够好”，那就改用：
| |
2. 页面能用，但不像同一个产品做出来的
用：
| |
它更适合处理：
- 按钮不统一
- 标题、卡片、间距风格漂移
- 新做的页面和旧页面不像一个系统
3. 页面不是乱，是太杂、太满、太难抓重点
用：
| |
它的重点不是“加点装饰”，而是去掉不必要的复杂性。
补充一点：官网更新记录提到，旧命令 /simplify 已改名为 /distill，主要是为了避开命令冲突。现在直接记 /distill 就可以。
4. 页面内容说得不够清楚
用：
| |
适合：
- 按钮文案太泛
- 表单提示不清楚
- 错误信息太硬或太模糊
- 空状态和引导文案不够明确
这条命令处理的不是视觉，而是 UX copy。
5. 桌面端还行，但换设备就开始变形
用：
| |
官方对它的定义不只是移动端适配，而是让设计在不同屏幕、设备、上下文和平台里都成立。
6. 页面正常时没问题，但边界情况扛不住
用：
| |
适合：
- 长标题、长用户名把布局撑坏
- 多语言文本溢出
- 错误态、空状态处理不够完整
- 你希望界面更接近生产可用状态
7. 页面方向没问题，但有点粗糙
用：
| |
这条命令特别适合最后一轮收尾，而不是一开始就用。
8. 页面加载慢、动画卡、图片重
用：
| |
它关注的是：
- loading speed
- rendering
- animations
- images
- bundle size
也就是“快不快、顺不顺”。
9. 页面太安全、太普通、没记忆点
用：
| |
它的重点是：放大过于保守的设计，让页面更有冲击力，但不破坏可用性。
10. 页面太吵、太满、太有攻击性
用：
| |
它不是让页面变无聊，而是让页面降噪、收力、保留重点。
11. 页面太灰、太白、太平
用：
| |
它适合给本来过于单色的界面增加更有策略的色彩表达。
12. 交互没有反馈感，页面有点“死”
用：
| |
这条命令的重点不是“多加动画”，而是用有目的的 motion / micro-interactions 提升可用性与愉悦感。
13. 页面功能有了，但缺少一点温度和记忆点
用：
| |
它最适合：
- 空状态
- 成功提示
- 首次体验
- 那些可以加一点人格感的小地方
14. 做了一堆页面后，想沉淀设计系统
用：
| |
它处理的不是单页微调，而是：
- 提炼组件
- 提炼 design tokens
- 提炼可复用模式
15. 新用户第一次进来不知道干嘛
用：
| |
它更偏 onboarding、空状态和首次使用体验，不是普通意义上的“美化页面”。
六、按官方 cheatsheet 来看，最值得新手记住的几组关系
官方 cheatsheet 不只是列出 17 条命令，还隐含了一些常见搭配关系。新手只要记住下面几组，就已经够用了。
1. audit 和 critique 不是一回事
如果你想知道：
- 有没有问题，先用
/audit - 为什么不够好，更适合
/critique
2. normalize 和 distill 也不是一回事
normalize：把东西统一回设计系统distill：把东西简化到更本质的表达
一个偏一致性，一个偏去复杂化。
3. bolder 和 quieter 是一对方向相反的命令
- 页面太保守，用
/bolder - 页面太吵太硬，用
/quieter
先判断自己需要“加力”还是“降噪”，比盲目增强更重要。
4. harden 和 optimize 很适合放在上线前
一个负责稳，一个负责快。
如果你已经接近交付，可以这样想：
| |
5. normalize、clarify、adapt 经常是同一类问题链条
官方 cheatsheet 里，这几条关系比较近。也就是说，很多界面问题并不只是“视觉不统一”，还常常同时包含：
- 文案不清楚
- 不同设备不成立
- 体验链路不顺
七、17 条官方命令速查
下面这份速查表，尽量基于官网/cheatsheet 的表述整理。
System
/teach-impeccable：一次性收集项目设计上下文，并保存到 AI 配置中/extract：提炼并整合可复用组件、design tokens 和设计模式/onboard：优化 onboarding、空状态和首次使用体验
Diagnostic
/audit：全面审计界面质量，覆盖可访问性、性能、主题一致性和响应式设计/critique：从 UX 视角评估视觉层级、信息架构、情绪表达和整体设计质量
Quality
/normalize：让设计匹配现有设计系统并保持一致性/polish：上线前做最后一轮对齐、间距、细节和一致性打磨/optimize：优化加载速度、渲染、动画、图片和包体/harden：补强错误处理、i18n、文本溢出和边界情况
Adaptation
/clarify：改善 UX copy、错误提示、微文案、标签和说明/distill：去掉不必要复杂性，把设计提炼到更清晰的核心表达/adapt：让设计适配不同设备、屏幕和使用上下文
Intensity
/quieter：降低过于强烈的视觉表达，减少攻击性/bolder：放大过于保守的设计，让它更有冲击力和存在感
Enhancement
/animate：用有目的的动画和微交互提升体验/colorize：给过于单色的界面增加更有策略的色彩表达/delight：加入惊喜感、个性和更讨喜的细节
八、我建议新手这样开始
如果你今天第一次用 Impeccable.style，不需要一上来就研究所有命令。最稳的起步方式通常是：
| |
如果你更关心体验和视觉，而不是技术质量，那第二步可以把 /audit 换成 /critique。
等你熟一点之后，再按问题补：
| |
最后如果你觉得页面已经稳定，只是想增强气质和记忆点，再考虑：
| |
这比“把 17 条全当成美化命令”更接近官方资料真正呈现出来的结构。
九、总结
如果只用一句话总结：
Impeccable.style不是一个单纯的前端美化 prompt 包，而是一套把设计审计、统一、适配、补强、增强和系统沉淀拆成明确命令的 AI 前端设计技能集合。
对新手来说，最重要的不是死背 17 个名字，而是先搞清楚这几个顺序：
- 先建立上下文：
/teach-impeccable - 再判断问题：
/audit或/critique - 再决定统一还是简化：
/normalize或/distill - 最后精修：
/polish
把这条主线跑顺了，再去加 clarify、adapt、harden、optimize、bolder、delight 这些命令，会容易很多。
参考链接
- 官网首页：https://impeccable.style/#hero
- 官方命令速查：https://impeccable.style/cheatsheet
- 官方仓库：https://github.com/pbakaus/impeccable
说明：本文基于 2026 年 3 月 9 日可访问的官网首页与 cheatsheet 整理；文中对命令用途的解释尽量贴近官方表述，少量“怎么理解”“适合什么时候用”属于基于官方描述做的中文归纳。