用 Impeccable 给编码 Agent 一套设计词汇

跳过设计指导，每个 AI 写出来的落地页都会露出同一批特征：什么都用 Inter 字体、蓝紫渐变、卡片里套卡片、彩底上放灰字、每个标题上方都顶着一个圆角方块图标。Impeccable 是 Paul Bakaus 的一个 92k 星 skill，给你的编码 agent 一套共同的设计词汇——24 条具名命令加 62 条确定性检测规则——让设计反馈变成 agent 能直接执行的东西，而不是一种只能靠你口头描述的感觉。

为什么这个 Skill 重要

README 对病因说得很直白：所有模型都拿同一批 SaaS 模板训练，跳过设计指导就会在每个项目里复现同一批特征。正因如此，像「让它更出彩」这种模糊的推一把，给不了模型任何可操作的抓手。

Impeccable 提供 1 个 skill、24 条命令、浏览器实时迭代，以及 62 条检测规则。命令（polish、audit、critique、bolder、quieter、distill 等）给你和 agent 一套共同词汇；检测器 CLI 和浏览器扩展运行这些规则时不依赖 LLM、也不需要 API key。它源自 Anthropic 的 frontend-design skill——第一个被广泛使用的 Claude 设计 skill。

安装

在项目根目录执行：

npx impeccable install

安装器会显示它检测到的 harness 目录或已装 CLI（例如 ~/.claude、~/.codex 或项目内的 .cursor），让你保留或调整这份清单，并询问装到当前项目还是全局。它还会在 Claude Code、GitHub Copilot、Codex、Cursor、Grok Build 上安装各 harness 原生的 hook 清单，让设计问题在你编辑之后浮出来（Grok Build 上是在 Stop 时）。然后在你的 AI 编码工具里运行 /impeccable init。要刷新已有安装，运行 npx impeccable update。

Claude Code 用户也可以装成插件：

/plugin marketplace add pbakaus/impeccable

然后打开 /plugin，从列表里安装 Impeccable。README 还记载了更多路径——git submodule（vendored 方式：把副本收进自己的仓库，可随 Git 更新）、GitHub Copilot 的 VS Code 扩展、面向多种 harness 的手动复制——并注明手动复制命令属于回退/调试手段，正常路径是 npx impeccable install。

Codex 用户在安装或更新后要打开 /hooks，按提示批准项目 hook。在 Claude Code 上，已安装的 hook 的运行独立于模型工具审批；README 建议在无人值守运行前先检查已装的 hook。

实战：上线前打磨一个仪表盘

1. 运行 /impeccable init。它会检查项目，只就持久成立的产品事实里关键的缺失部分提问，然后写出 PRODUCT.md——让后面的命令知道受众、目的、使用场景、约束、语气和依据。
2. 运行 /impeccable document，从现有代码生成根目录的 DESIGN.md，把现有视觉体系单独记录下来，与产品事实分开。
3. 修一个具体的界面。说 /impeccable polish settings 做最后一轮设计系统打磨，或 /impeccable critique landing 做层次、清晰度、情绪共鸣的 UX 评审。大多数命令都能带目标：/impeccable audit the header。
4. 机械地验证结果。npx impeccable detect src/ 用那 62 条确定性规则扫描目录，全程不经过模型。退出码 0 表示没有主要发现，2 表示有发现，1 表示某个目标无法扫描。--json 输出 CI 友好的结果，--github 生成 GitHub Actions 标注。

README 列出 18 个受支持的工具，包括 Cursor、Claude Code、Codex CLI、Gemini CLI、Devin、OpenCode、Google Antigravity。

一点披露：README 的手动复制命令引用的 dist/ 目录在仓库里被 .gitignore 排除，新克隆的仓库里没有它（截至 2026-10-29）。这与 README 自己的定位一致——手动复制是回退/调试手段。

技巧

• 如果某条命令用得多，用 /impeccable pin audit 生成独立的 /audit 快捷方式。
• 读一读 skill 自带的反模式清单：不用被用滥的字体（Arial、Inter、系统默认字体）、彩底上不放灰字、不用纯黑或纯灰（永远带一点色偏）、不把所有东西都包进卡片也不在卡片里套卡片、不用 bounce/elastic 缓动。
• 检测器是证据，不是证明。README 明确说，一次干净的扫描不能代替在相关视口下实际查看渲染效果。
• 视觉方案抽牌 API 的遥测默认开启，但只发送匿名的抽牌记录——从不发送你的文件或代码。用 npx impeccable telemetry off、DO_NOT_TRACK=1 或 IMPECCABLE_NO_TELEMETRY=1 关掉。
• live 模式只通过开发服务器或本地静态 HTML 编辑本地检出。已部署的站点只能检查——用 npx impeccable detect https://example.com 或浏览器扩展——没有实时编辑，也不会把改动写回你的源码。

何时不用这个 Skill

Impeccable 只管前端设计的走向，不替你做产品设计。init 会记录产品事实，但受众、约束和语气仍然来自你。live 模式按设计只限本地——README 明确说不要为了把它硬套到已部署站点而削弱生产环境的 CSP。如果你根本没有 AI harness，README 为这种情况记载了独立的检测器 CLI——相比之下，那 24 条命令是通过 /impeccable skill 运行的。

查看 排行榜 了解更多 skill。