Library impeccable 用62条确定性规则给AI前端设计去机味

AI 帮你写前端，十次有八次会长得像一个模子刻出来的：字体永远 Inter，配色永远紫到蓝渐变，灰色文字压在彩色背景上，圆角方块图标贴在 every 标题上方，卡片里还套卡片。模型都在同一批 SaaS 模板上训练，你不给硬约束，每个项目都会复刻这些「tell」。Anthropic 的 frontend-design skill 是第一个被广泛用的设计 skill，而 Impeccable 从它起步，把它做成了一套更系统、可量化、还能在浏览器里实时迭代的方案。

Impeccable 给 AI 编码代理提供的是「设计纪律」：一个 skill、24 条命令、浏览器实时迭代，以及 62 条确定性检测规则，专门抓那些暴露机器身份的前端痕迹。

项目基本信息

一、项目介绍

Impeccable 是一套面向 AI 编码代理的前端设计指南库。它最大的不同是「确定性」：62 条检测器规则加上 LLM 复审，但确定性的部分不依赖模型和 API key，由 CLI 和浏览器扩展直接跑。它先用 /impeccable init 把产品的 durable truth（受众、目的、约束、语气、证据）写进 PRODUCT.md，之后所有命令都基于这些事实工作，不会把「表面视觉方向」和「产品实质」混为一谈。

二、核心优势

第一，统一的设计词汇。24 条命令（polish、audit、critique、distill、animate、bolder、quieter 等）让你和 AI 用同一套语言沟通，避免「好看点」这种模糊指令。第二，62 条确定性规则。覆盖滥用字体、灰字压彩底、纯黑灰、卡片套卡片、弹性缓动等常见反模式，且不需要 LLM 就能跑。第三，浏览器实时迭代。/impeccable live 和 generate 能在真实浏览器里改元素、出变体，不必手动挑。第四，一次性配置。/impeccable init 只问缺失的材料缺口，写一次 PRODUCT.md 长期复用。第五，广泛兼容。Claude Code、Cursor、Codex、Gemini CLI、GitHub Copilot、Grok Build、Hermes、Veto 等都能装，pin 还能把命令钉成独立快捷键。

三、适用场景

适合所有「用 AI 写/改前端」的开发者：想让 AI 出的页面不撞脸的独立开发者、需要统一设计系统又不想被模板绑死的团队、以及做设计 review 时想有客观检查清单的工程师。也适合把 audit 当 CI 一道关卡，自动卡掉 a11y、性能、响应式问题。

四、安装教程

推荐用 CLI 安装器（在项目根目录运行，它会探测已装 harness 并让你选择 providers 和 scope）：

npx impeccable install

装完后进编码代理执行一次性初始化：

/impeccable init

刷新已有安装：

npx impeccable update

Git submodule 方式（团队 vendored 更新）：

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor

常见报错：Codex 用户装完要在 /hooks 里批准项目 hook；Grok Build 需要项目目录信任（/hooks-trust 或 --trust）脚本才会跑。引擎本身是自包含二进制，Node 只在用 npx 安装器时需要。

五、使用示例

初始化后，针对具体页面发命令：

/impeccable audit blog
/impeccable critique landing
/impeccable polish settings
/impeccable harden checkout

也可以直接描述：

/impeccable redo this hero section

audit 跑技术质量检查（a11y、性能、响应式），critique 做 UX 层级与情感共鸣的评审，polish 是发布前的最后一遍对齐，harden 补错误处理、i18n、文本溢出等边界。每条命令都基于 PRODUCT.md 里的产品事实，而不是凭空发挥。

六、常见问题

问：Impeccable 和 Hallmark、frontend-design 有什么不同？答：它更强调确定性规则 + 命令词汇 + 浏览器实时迭代，且不依赖 LLM 跑硬性检查。问：必须联网吗？答：62 条确定性规则离线可跑，只有 LLM 复审部分需要模型。问：规则能改吗？答：仓库内置显式反模式清单（禁过度字体、禁灰字彩底、禁纯黑灰、禁卡片套卡片、禁弹性缓动），你可在 PRODUCT.md/DESIGN.md 里加自己的方向。问：支持哪些工具？答：主流编码代理基本都覆盖，包括 Claude Code、Cursor、Codex、Gemini CLI、Copilot、Grok Build 等。

七、总结

Impeccable 把「AI 前端设计怎么才算好」落成了一套可执行、可量化的规则库和命令集。它的强项是用 62 条确定性检测把主观的「好看」变成客观的「没踩反模式」，再用浏览器实时迭代补足创意部分。对想让 AI 出的页面既快又体面、又不撞脸的团队，它比一句「美化一下」靠谱太多；代价是要先跑一次 init 把产品事实写清楚，且部分高级能力依赖特定 harness 的 hook 支持。