Impeccable 新手教程

Impeccable 新手教程

给 AI 编码代理装上一套设计语言:告别「AI 味」界面,用 Cursor CLI 从安装到出活,一条命令一个动作,本教程全程举例。

Cursor CLI 实战举例 1 Skill · 23 命令 · 61 条检测规则 Apache-2.0 · Paul Bakaus

1这是什么

Impeccable 是一套给 AI 编码代理用的设计语言:它以 Skill 的形式装进 Cursor、Claude Code、Codex 等 Agent 工具,让 AI 写出来的界面不再千篇一律。

你大概见过这种「AI 味」:满屏 Inter 字体、紫蓝渐变、卡片套卡片、彩色底上压一坨灰字。原因很简单——所有模型都在同一批 SaaS 模板上训练,出手就是这几个套路。Impeccable 的做法不是换个模型,而是给 Agent 补上设计词汇、工作流程和确定性检查。

1个 Skill(设计语言)
23个 /impeccable 命令
61条确定性检测规则
1套浏览器实时迭代(live)
一句话

在项目根目录跑 npx impeccable install,然后在 Cursor CLI 里输入 /impeccable init,你的 AI 代理从此有了「设计部门」。

2它不是什么

先把预期对齐:它是「让 Agent 更会设计」的工作方式,不是现成的设计资产。

不是 UI 组件库

它不提供按钮、弹窗、图标包,也不改你的依赖——它改变的是 Agent「怎么想、怎么写、怎么检查」。

不是 CSS 框架

Tailwind、原生 CSS、SwiftUI 都能用;它活在 Agent 的指令层,与技术栈解耦。

不能替代设计判断

官方原话:检测器全绿是证据,不是证明。最终视觉与可访问性仍要人眼在真实视口里过一遍。

不是只能配 Claude

提供 Cursor、Codex、Grok、Hermes、Veto 等 provider,也支持纯 CLI 检测模式(不接 AI 也能跑)。

3本教程怎么读

假设你已经会用 Cursor CLI 打开项目、跟 Agent 对话,其余从零讲起,每一章都带真实操作示例。

赶时间的话,只读第 2、3、4 章就能开始干活;第 6 章是命令字典,可以当工具书查。

4五分钟热身(不装也能玩)

检测器可以完全脱离 AI 独立运行——先用它感受一下 61 条规则抓什么。

# 扫一个线上页面(本机需装有 Chrome / Chromium / Edge)
npx impeccable detect https://example.com

# 扫本地目录,结果以 JSON 输出(适合 CI)
npx impeccable detect --json src/

它会列出确定性发现:滥用字体、紫蓝渐变、过小触摸目标、拥挤内边距……这些正是后面 Agent 写码时要避开的坑。

下一步

进入第一章:认识 Impeccable,搞清楚「1 Skill + 23 命令 + 61 规则」这套组合拳的分工。

Impeccable 新手教程 · 基于 pbakaus/impeccable(skill 4.3.1)