Impeccable 入门教程
Impeccable 入门教程Impeccable 是一套给 AI 编程工具补充设计能力的技能包. 截至 2026 年 3 月 23 日, 官网展示版本为 v1.5.1. 它的核心目标不是替代你写页面, 而是让 Codex、Claude Code、Cursor、Gemini CLI 这类工具在做前端时, 更稳定地产出有设计感的结果.
如果你只想先记住一句话, 可以这样理解:
- 先用
Impeccable建立设计上下文 - 再用不同命令让 AI 做审计, 统一风格, 补细节, 加亮点
它提供了哪些能力
官网和 GitHub README 里, Impeccable 主要提供这几类能力:
| 能力 | 说明 |
|---|---|
| 增强前端设计能力 | 提供一个强化版 frontend-design skill, 让 AI 更偏向可落地, 有风格, 避免模板味的前端产出. |
| 20 个可直接调用的设计命令 | 你可以按目标调用命令, 例如做审计, 统一视觉, 优化排版, 增强动画, 提升响应式等. |
| 项目级设计上下文 | 通过 teach-impeccable 生成 .impeccable.md, 让后续命令读取你的品牌, 风格, 受众和约束. |
| 设计反模式约束 | 它会主动规避一些常见的 AI 设计坏味道, 例如系统默认字体, 过度依赖灰色, 卡片套卡片, 乱用弹性动效等. |
| 多工具支持 | 官网列出了 Codex CLI、Claude Code、Cursor、Gemini CLI、VS Code Copilot、OpenCode 等多种 harness. |
| 可持续更新 | 支持检查更新和升级, 不需要每次手动复制全部文件. |
它有哪些命令
Impeccable 当前提供的命令可以分成 5 组.
1. 初始化与诊断
| 命令 | 作用 | 什么时候用 |
|---|---|---|
teach-impeccable |
采集项目设计背景, 生成 .impeccable.md. |
第一次接入项目时先跑一遍. |
audit |
做综合 UI 审计, 覆盖可访问性, 性能, 主题, 响应式等. | 接手旧页面, 或改版前先摸清问题时. |
critique |
从 UX 和视觉层面做设计点评. | 你想先拿意见, 暂时不急着改代码时. |
2. 统一与收敛
| 命令 | 作用 | 什么时候用 |
|---|---|---|
normalize |
往设计系统和现有模式上收敛. | 页面风格散, 组件各写各的时. |
distill |
去掉冗余装饰和无效复杂度. | 页面显得乱, 重, 信息层级不清时. |
clarify |
优化文案, 标签, 提示语和交互说明. | 页面能用但不好懂时. |
extract |
抽取可复用组件, token 和模式. | 一个页面改好了, 想沉淀成设计资产时. |
arrange |
调整布局, 间距和视觉节奏. | 版面拥挤, 列表和卡片缺少秩序感时. |
typeset |
优化字体, 层级, 字重和可读性. | 文本很多, 但看起来像默认样式时. |
3. 体验增强
| 命令 | 作用 | 什么时候用 |
|---|---|---|
polish |
做上线前细节打磨. | 主要功能已完成, 准备收尾时. |
animate |
增加有目的的动画和微交互. | 页面缺少反馈, 但你不想做花哨动效时. |
delight |
增加一些记忆点和趣味性. | 产品太平, 想补一点个性时. |
colorize |
有策略地增加颜色表达. | 整体太灰, 缺少重点和情绪时. |
bolder |
把过于保守的设计做得更有冲击力. | 页面安全但无记忆点时. |
quieter |
给太躁的视觉降噪. | 颜色, 阴影, 对比度都偏重时. |
overdrive |
做更有技术亮点的高级效果. | 需要 hero section, 实验性展示, 品牌页面时. |
4. 稳定性与适配
| 命令 | 作用 | 什么时候用 |
|---|---|---|
adapt |
补齐不同屏幕和场景下的适配. | 页面桌面端能看, 但移动端不稳时. |
harden |
加强异常, i18n, 溢出, 边界条件处理. | 准备上线, 想减少真实数据下的问题时. |
optimize |
优化性能, 渲染和资源加载. | 页面视觉不错, 但加载和动画偏重时. |
onboard |
改善 onboarding, 空状态和首次使用体验. | 新用户不知道从哪开始时. |
5. 命令之间怎么配合
实战里通常不是只跑一个命令, 更常见的是这些组合:
- 老页面接手:
audit→critique→normalize - 新页面收尾:
polish→harden→optimize - 品牌感增强:
typeset→colorize→animate - 做首页亮点:
arrange→bolder→overdrive - 首次接入:
teach-impeccable→audit→polish
支持哪些工具
官网当前列出的支持对象包括:
Claude CodeCursorGemini CLIVS Code CopilotCodex CLIAntigravityKiroOpenCodePi不同工具的命令写法会有一点差异, 但命令名本身基本一致.
怎么安装
推荐方式
大多数场景优先用官方推荐的安装命令:
npx skills add pbakaus/impeccable
这条命令会根据你当前使用的 AI harness, 安装对应的配置和命令文件.
更新方式
npx skills check
npx skills update
如果你已经装过一次, 后续通常只需要检查更新并升级.
Claude Code 的插件方式
官网还给出了 Claude Code 的插件安装方式:
/plugin marketplace add pbakaus/impeccable
手动安装
如果你不想走命令行安装, 官网也提供了 Universal ZIP 手动安装包. 解压到项目根目录后, 会生成对应工具需要的隐藏目录和命令文件.
第一次怎么用
下面是一套最适合第一次上手的流程.
第 1 步: 先建立设计上下文
先运行 teach-impeccable, 让它为当前项目生成 .impeccable.md.
通用写法通常是:
/teach-impeccable
按 README 中 Codex CLI 的示例, 它通常使用 /prompts:<命令名> 语法, 例如:
/prompts:teach-impeccable
这个步骤很重要, 因为后面的命令会读取这里面的设计约束. 没有它, AI 仍然能改页面, 但风格通常不够稳定.
第 2 步: 先做一次体检
挑一个正在维护的页面, 先跑审计:
/audit checkout page
或在 Codex CLI 中:
/prompts:audit checkout page
你会先得到一份问题清单, 适合作为后续改造的起点.
第 3 步: 按目标下命令, 不要一口气全改
最稳的方式不是一句"把页面改好看", 而是拆成几个明确动作:
/normalize pricing page
/typeset pricing page
/polish pricing page
这样做的好处是:
- 每一步目标更明确
- 你更容易看出每个命令的差异
- 回滚和对比也更容易
第 4 步: 最后再补亮点
如果基本结构已经稳定, 再考虑加动画或更强的视觉表达:
/colorize landing hero
/animate landing hero
/overdrive landing hero
不要一开始就直接上 overdrive, 否则很容易在结构没稳的时候放大问题.
一个够用的入门工作流
如果你今天就想在真实项目里试一次, 可以直接照这个顺序走:
- 安装
Impeccable. - 运行
teach-impeccable, 生成项目设计上下文. - 选一个页面执行
audit. - 根据问题先跑
normalize和typeset. - 页面基本稳定后执行
polish. - 准备上线前补
adapt、harden、optimize. - 如果是营销页或首页, 最后再考虑
colorize、animate或overdrive.
它特别适合什么场景
Impeccable 最适合下面几类需求:
- 你已经能用 AI 生成前端, 但结果总像模板.
- 你想让 AI 改页面时更贴近现有设计系统.
- 你不缺代码能力, 缺的是稳定的视觉判断和收尾能力.
- 你想把"先审计, 再统一, 再打磨"这套流程固定下来.
如果你当前最关心的是业务逻辑, 接口联调或后端实现,
Impeccable不是主工具. 它更像前端设计质量的放大器.
常见误区
- 不要跳过
teach-impeccable. 少了项目上下文, 后续效果通常会漂. - 不要一开始就直接用
overdrive. 它更适合结构稳定后的增强. - 不要一次混用太多命令. 先确定目标, 一次只推一类改动.
- 不要把它当成纯视觉滤镜. 它同样覆盖可访问性, 响应式, 性能和边界处理.
加载评论中...