Impeccable 上手：给 AI 编程助手补上设计品味

入门进行中

这篇能帮你解决什么

如果你用 Claude Code、Cursor 这类 AI 助手写前端，大概率见过这套“AI 味”界面：清一色 Inter 字体、紫蓝渐变、卡片里再套卡片、彩底配灰字、标题上方永远顶着一个圆角图标块。模型会写 CSS，但没有判断“什么是好设计”的词汇和约束。

Impeccable 就是补这块的工具集：一个名为 impeccable 的 skill、23 个 /impeccable 命令，外加一套不依赖 API key 的反模式检测器。装上之后，AI 在生成和审查界面时会多出 7 个领域的参考（字体、配色与对比、空间布局、动效、交互、响应式、UX 文案），输出不再千篇一律。

本篇是独立教程，跟着走一遍，你能把 Impeccable 装进自己的 AI 工具，并用它审查、打磨一个真实页面。这个项目在 GitHub 已经拿到 3.3 万+ star（截至 2026 年 6 月），项目地址 https://github.com/pbakaus/impeccable。

前置条件

  • 本机装了 Node.js（能运行 npx），建议 18 以上。
  • 至少有一个受支持的 AI 编程工具，本文以 Claude Code 为例。Impeccable 目前还支持 Cursor、Gemini CLI、Codex CLI、VS Code Copilot、OpenCode、Kiro、Trae、Pi、Rovo Dev、Qoder。
  • 手头有一个能跑的前端项目或单个 HTML 文件，用来做审查练习。

第一步：安装 Impeccable

推荐用官方安装器，它会自动识别你装了哪些工具并放到正确位置：

bash
npx impeccable skills install

如果你用 Claude Code，也可以直接走插件市场：

text
/plugin marketplace add pbakaus/impeccable

两种方式选其一即可。装完后 skill 和命令会出现在对应工具的配置目录下（Claude Code 在 .claude/）。

第二步：确认 skill 和命令已加载

重开一个 AI 会话，输入 /impeccable 看能不能补全出命令列表。能看到 audit、critique、polish 这些子命令，就说明装好了。

常用的几条：

text
/impeccable audit blog        # 审查 blog 页面的设计破绽
/impeccable critique landing  # 对落地页做 UX 评审
/impeccable polish settings   # 发布前最终打磨
/impeccable harden checkout   # 给结账流程补错误态和边界情况

第三步：用 audit 审查现有界面

挑一个你觉得“说不上哪不对”的页面，让 Impeccable 跑一遍审查：

text
/impeccable audit 首页 hero 区域

它会对照 7 个领域参考，指出具体问题——例如行长过宽、对比度不足、间距没有节奏、标题层级跳跃，每条都附带可落地的改法，不会只甩一句“建议优化视觉”。

第四步：用 polish 做发布前打磨

审查改完后，发布前再用 polish 收尾：

text
/impeccable polish 首页

如果某条命令你天天用，可以固化成独立快捷命令：

text
/impeccable pin audit

执行后会生成一个独立的 /audit，下次不用每次带 impeccable 前缀。

第五步：用命令行复查（不调用 AI）

Impeccable 自带一个纯规则检测器，27 条确定性规则加 12 条评审规则，不需要 API key，适合接进 CI 或本地快速自查：

bash
npx impeccable detect src/                 # 扫描整个目录
npx impeccable detect index.html           # 扫描单个文件
npx impeccable detect https://example.com  # 用 Puppeteer 扫描线上 URL
npx impeccable detect --fast --json .      # 只跑正则、输出 JSON

它能识别 24 类问题，既有“AI slop”（侧边标签边框、紫色渐变、bounce 缓动、深色光晕），也有通用质量问题（行长、内边距、触控目标过小、标题层级跳跃）。

验证是否生效

按这三点确认整套流程通了：

  1. 输入 /impeccable 能补全出命令，说明 skill 已加载。
  2. audit 的输出针对你的页面，给的是具体问题和具体改法，不会泛泛而谈。
  3. npx impeccable detect 能跑出一份问题清单（命中或零命中都算正常退出）。

常见问题排查

  • 输入 /impeccable 没反应：确认安装器跑完没报错，并重开一个会话；用 Claude Code 时检查 .claude/ 下是否有 impeccable 相关文件。
  • Cursor 里命令不出现：Cursor 需切到 Nightly 通道，并在 Settings → Rules 打开 Agent Skills。
  • npx impeccable 拉不动：检查网络与 Node 版本，或先跑 npx impeccable@latest detect --help 确认 CLI 可用。

相关链接

Impeccable 上手：给 AI 编程助手补上设计品味 | 资讯狗 | Zixungou