为什么交给 AI 做的界面总是长得差不多
模型大体上看的是同一批素材：公开网络上遍地都是的 SaaS 落地页和仪表盘模板。所以在没有额外指示的情况下要一个界面，不同模型、不同项目会收敛到同样的选择。正文用 Inter，主视觉背景从紫渐变到蓝，标题上再叠一层渐变，卡片里又套卡片，卡片左侧一条粗色带，标题上方一个小号大写标签。
靠提示词逐次纠正，就得一直重复同样的话。“再精致一点”“别那么像 AI”这类指令没有标准，结果会随对话漂移。Impeccable 走的是相反的路：给每个问题起名字、变成规则，再把这些规则以文件形式放在代理会读到的位置。
起点是 Anthropic 公开过的 frontend-design 技能。Impeccable 从那里出发，把命令词汇扩到 23 个，加上 60 条不依赖 LLM 的检测规则，以及在编辑时刻介入的钩子。仓库说明里写明了这条脉络。
怎么安装
最省事的是 CLI 安装程序。在项目根目录运行一行即可。npx 随 Node.js 一起提供，不必单独安装包就能就地运行；如果没有 Node.js，先从 nodejs.org 装 LTS 版本。
运行后它会自动找出本机上的 AI 编程工具并列出来，比如 Claude Code、Codex CLI、Cursor、Gemini CLI。先问是沿用检测到的这一组还是自己挑，再问装进当前项目还是全局。回答完毕后，它把技能下载到对应工具的配置目录，在受支持的工具上连钩子一起装好，并告诉你下一步该做什么。
想免交互运行，就用 --providers=claude,codex,cursor 和 --scope=project 这类参数把答案先给它。这种写法适合放进脚本或团队上手文档。已经装过、要更新到最新时用 npx impeccable update。
安装路径不止一种。在 Claude Code 里可以用 /plugin marketplace add pbakaus/impeccable 注册插件市场；团队若想把版本固定在仓库里，可以作为 git 子模块加入，再用 npx impeccable link 连到各工具目录。从官网下载分工具的 ZIP、直接复制仓库 dist 目录的做法文档里也有。第一次用，知道第一种就够了。
npx impeccable install
# 免交互
npx impeccable install --providers=claude,cursor --scope=project
# 之后更新
npx impeccable update/impeccable init 会生成什么
装好之后，在 AI 工具里运行一次 /impeccable init。这不是改文件的命令，而是确定上下文的一段对话。它先问这次要做的界面偏品牌还是偏产品。品牌指营销页、落地页、作品集这类留下印象的界面；产品指应用界面、仪表盘、工具这类天天要用的界面。同一套规则套在两边，一边会寡淡、另一边会杂乱，所以先把这个岔口定下来。
对话结束后会生成 PRODUCT.md 和 DESIGN.md。PRODUCT.md 记录界面给谁用、想留下什么印象、要避开哪些参照；DESIGN.md 记录颜色、字体、组件这些视觉规则。之后运行的每条命令都会先读这两个文件，于是不必每次重新解释品牌。
如果已经有做好的界面，也可以用 /impeccable document 从现有代码反向生成 DESIGN.md。把已经在用的颜色和间距固化成文档，往往比从白纸开始更快。
23 条命令分别什么时候用
所有命令都在 /impeccable 后面跟名字来调用。再写上对象，范围就收窄：/impeccable audit blog 只看博客界面，/impeccable polish settings 只看设置界面。只敲 /impeccable 会列出全部，也可以直接跟一段描述。
常用的大致就是下表这些。某条命令用成了日常，可以用 /impeccable pin audit 固定成 /audit 快捷方式。
用着用着顺序自然形成。动手前用 shape 定构成与流程，做完后用 critique 检查人看到的部分、用 audit 检查机器看到的部分，再用 polish 收尾。结果寡淡就 bolder，过火就 quieter，元素太多就 distill。
| 命令 | 什么时候用 |
|---|---|
| shape | 写代码之前先定界面构成与流程 |
| craft | 从构成到实现一次走完 |
| critique | 以人的视角审视层级、可读性与印象 |
| audit | 检查无障碍、性能、响应式等技术项 |
| polish | 上线前收尾并对齐设计系统 |
| bolder / quieter | 结果太平或太过时调节强弱 |
| distill | 元素过多、焦点模糊时做减法 |
| harden | 补上易碎场景：错误态、长文案、多语言 |
| clarify | 改掉按钮文案、错误提示这类读起来费解的文字 |
| adapt | 适配移动端等其他屏幕尺寸 |
不用代理，只跑检查
Impeccable 里另带一个不依赖 AI 的检查器。给 npx impeccable detect 一个文件、一个目录或一个网址，它会把命中的规则连名字一起报出来。它不调用 LLM，所以不需要 API 密钥，每次结果都一样。
检查方式随对象而异。HTML 会连同引用的 CSS 一起做静态分析，JSX、CSS 之类的其他文件走模式匹配，给网址则用真实浏览器打开、读渲染后的画面。所以源码扫描干净，网址扫描仍可能查出别的项目。
为了验证，写了一张刻意模仿 AI 常见产出的 HTML 去跑。结果是 17 条，退出码 2。只修被指出的项目、保持布局结构不动再跑一次，变成 0 条、退出码 0。退出码非零这一点很关键——仅凭这一点就足以让 CI 构建失败。
想关掉某一项，可以在文件里写 impeccable-disable 注释就地豁免，或者用 npx impeccable ignores add-value 把例外记进仓库配置。两种方式都要写下理由，于是判断以记录的形式留存。
npx impeccable detect src/ # 扫描目录
npx impeccable detect index.html # 扫描文件
npx impeccable detect https://example.com # 扫描网址（真实浏览器）
npx impeccable detect --json . # 供 CI 使用的输出
# 有问题退出码 2，没有则为 0装好之后要做一次的清理
开始跑命令后，项目里会出现 .impeccable 目录，里面堆积工作文件：审阅截图、运行状态、缓存、各人不同的个人配置。这些大多不必进仓库。README 里备好了可以照抄的 .gitignore 段落，一开始粘一次即可。
但不能全部忽略。有几个文件是要共享的——项目公共配置、设计规格、审阅报告——它们留在仓库里，团队才看的是同一套标准。如果在加忽略规则之前已经提交过截图，只加规则并不会停止跟踪，需要用 git rm --cached 解除跟踪而不删除本地文件。
在受支持的工具上还会一并装上钩子。它在 UI 文件被修改的瞬间跑检测器，把结果送回代理的流程里。Cursor 会在错误的写入落地之前拦下，其余工具则在修改之后提示。安装过程中会询问是否加钩子，不想要就在那时拒绝。