信息卡

一句话定位

一个为 AI 编码代理注入专业设计品味的设计语言套件（口号是"让 AI harness 在设计上更出色"），从 Anthropic 原版 frontend-design 技能演化而来，主打 "1 skill, 23 commands, live browser iteration, 59 deterministic detector rules"，专门围剿紫色渐变、Inter 字体滥用、卡片套卡片式的 AI slop 页面。

趋势解读：为什么火

生成 UI 的数量爆炸直接引出了质量爆炸问题——所有模型产出的落地页长得像一个模子刻的。impeccable 给出了双轨解法：既有提示层的美学规则约束，又有无 LLM 参与的确定性检测器可以在 CI 里机械执法，这种"审美判断可自动化"的产品形态恰好补上了 vibe coding 工作流缺失的一环。前端开发者与独立开发者的强共鸣推动它连续数月霸榜。

核心功能拆解

• 单一入口 `/impeccable `，init 命令一键生成 PRODUCT.md 与 DESIGN.md，沉淀受众、品牌调性、语气、配色、字体与组件规范。
• 命令体系覆盖创作全流程：craft、shape、distill、bolder、quieter、animate、colorize、typeset、layout、onboard、overdrive、clarify、adapt、optimize、live 等 23 个。
• 审计三件套：audit 查视觉一致、critique 做 UX 评审、polish 是上线前最终打磨，harden 则补错误处理与边界情形。
• 59 条确定性检测规则分两族：AI slop 族盯侧边框条、紫渐变、回弹缓动、暗色辉光等劣习，通用质量族查行长过长、内边距拥挤、触控目标过小、标题跳级。
• Provider 原生 hooks：agent 对 UI 文件的每次直接修改都会被扫描，发现违规即回灌反馈到对话流里纠正。
• 反模式黑名单明确禁用 Arial/Inter 等烂大街字体、禁止彩底灰字、禁止纯黑白不调色、禁止卡片嵌套。

架构与技术栈浅析

npm 包分发，钩子脚本以 .mjs 编写；确定性检测器完全脱离大模型运行，URL 扫描基于 Puppeteer 实现真实渲染检查；monorepo 内按目标工具产出适配物 dist/claude-code/.claude 等。宣称支持 Claude Code、Cursor、Codex CLI、Gemini CLI、GitHub Copilot、Grok Build、OpenCode、Pi、Trae、Rovo Dev、Qoder、Mistral Vibe、Kiro 与 Google Antigravity 共十四种代理环境。

安装与环境要求

推荐 `npx impeccable install`，升级用 `npx impeccable update`。替代路径包括 git submodule 方式克隆到 .impeccable 后执行 `npx impeccable link --source=.impeccable --providers=claude,cursor`；Claude Code 用户亦可走插件市场：

/plugin marketplace add pbakaus/impeccable

零 LLM 依赖，检测器离线即可运行。

快速上手示例

初始化后典型的迭代会话如下：

/impeccable init                    # 一次性建立项目设计档案
/impeccable audit blog              # 审计博客列表页与文章页
/impeccable critique landing        # UX 设计评审
/impeccable polish settings         # 发布前最后一轮打磨
/impeccable redo this hero section  # 用自然语言重做某区块

可再用 `/impeccable pin audit` 把常用审计固化为快捷入口。

进阶使用要点

• CI 检测走 `npx impeccable detect --json .`，同样支持目录、单文件乃至线上 URL 三种输入。
• 局部豁免用行内注释实现，例如 ``，另有 disable-line 与 disable-next-line 变体，配置级豁免可执行 ignores add-value 并附品牌理由。
• config.json 中 buildPath 设为 comp 即组件先行、设为 code-first 则代码先行，两种工作流都受支持。
• 调试钩子时开启 hook.auditLog 输出 NDJSON 日志；Codex 环境需要在 /hooks 里批准，Grok Build 需要 --trust。
• 保持 design.json、config.json 与 critique/*.md 入库，临时产物靠 README 提供的 .gitignore 区块隔离。

典型应用场景

• 从 init 到 polish 全流程驱动一个新落地页诞生，确保开箱不是千篇一律的模板脸。
• 存量组件库批量 audit，找出小字号按钮、跳级标题等团队通病后逐页 polish。
• 在 CI 中跑 detect 形成 slop 回归门禁，PR 引入紫色渐变会被机器拦下。
• 上线前 harden 结算流页面，集中排查错误态、空态与国际化溢出。

同类生态位对比

Stylelint、ESLint 类工具管语法不管审美，Storybook 与 design tokens 解决一致性但不评判品味；本项目独占"审美规则库叠加 Agent 命令面板"这一格，与血统相近的 Anthropic frontend-design 相比，它的执行层（hooks 与检测器）和生态广度明显更进一步。

资源导航

仓库主页见 github.com/pbakaus/impeccable，许可证 Apache 2.0；官网 impeccable.style 提供 ZIP 直下；CLI 帮助通过 npx impeccable 系列子命令查询；各工具宿主的安装变体与 hook 批准说明见仓库 README 的 Installation 章节。