Impeccable 新手教程
给 AI 编码代理装上一套设计语言:告别「AI 味」界面,用 Cursor CLI 从安装到出活,一条命令一个动作,本教程全程举例。
1这是什么
Impeccable 是一套给 AI 编码代理用的设计语言:它以 Skill 的形式装进 Cursor、Claude Code、Codex 等 Agent 工具,让 AI 写出来的界面不再千篇一律。
你大概见过这种「AI 味」:满屏 Inter 字体、紫蓝渐变、卡片套卡片、彩色底上压一坨灰字。原因很简单——所有模型都在同一批 SaaS 模板上训练,出手就是这几个套路。Impeccable 的做法不是换个模型,而是给 Agent 补上设计词汇、工作流程和确定性检查。
在项目根目录跑 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 规则」这套组合拳的分工。