Impeccable

Impeccable 是什么

Impeccable 是由 Paul Bakaus 创建的开源 AI 前端设计技能包，采用 Apache 2.0 协议。它并非传统的组件库或 CSS 主题，而是一套“AI 设计词汇层”。该工具通过 7 份领域参考文件、23 个斜杠命令和 25 条确定性反模式规则，指导 AI 编写出具备真正设计感的代码，从而摆脱千篇一律的“AI slop”审美。它支持 Cursor、Claude Code、Gemini CLI、Codex CLI 等 11 种以上的主流 AI 编码工具。

主要功能

• 23 个设计命令：构建与 AI 的共享设计词汇，包含 /polish（质感提升）、/audit（设计审计）、/critique（启发式评分）、/typeset（排版优化）、/colorize（配色优化）、/layout（布局间距）、/distill（简化结构）、/animate（动效优化）、/bolder 与 /quieter（增强或减弱视觉）、/shape（品牌工具包生成）、/craft（设计稿转代码）、/live（浏览器实时迭代）、/document（生成 DESIGN.md）、/harden（生产就绪检查）等。
• 7 份深度参考文件：涵盖排版、OKLCH 色彩与对比度、空间设计、动效、交互、响应式布局、UX 文案，在 AI 编写代码时自动加载。
• 25 条反模式检测规则：无需 LLM 的确定性规则，覆盖字体、色彩、布局、动效、质量维度，自动识别“AI slop”设计。
• Live Mode（Alpha）：支持在浏览器中直接选中元素并圈注修改意见，AI 会生成 3 个生产级变体并通过 HMR 实时替换，接受后自动写回源码。
• Chrome 扩展：一键检测任意网页的反模式（如渐变文字、AI 配色、嵌套卡片、低对比度等），支持 localhost、staging 及生产环境。
• CLI 工具：通过 npx impeccable detect src/ 扫描项目，支持 CI/PR 检查，输出 JSON 格式，可接入构建门禁。
• 上下文与文档生成：/impeccable teach 一键创建项目设计上下文文件（受众、品牌个性、反参考）；/impeccable document 按 Google Stitch 标准生成设计规范文档。

如何使用 Impeccable

安装技能包

• 自动安装：运行 npx skills add pbakaus/impeccable，自动识别 Cursor、Claude Code、Gemini CLI、Codex CLI 等工具并放置文件。
• Claude Code 插件：运行 /plugin marketplace add pbakaus/impeccable。
• 手动安装：下载 universal ZIP 解压至项目根目录（与 package.json 同级）。

初始化与命令使用

• 初始化项目设计上下文：运行 /impeccable teach，生成 PRODUCT.md（品牌定位、受众、反参考）和 .impeccable.md（设计上下文），此后每次使用命令都会自动读取这些文件。
• 直接调用：例如 /impeccable audit checkout 审计结账页。
• 自动选择：例如 /impeccable redo this hero，让 skill 自动选择最佳方法。
• 固定快捷命令：例如 /impeccable pin audit，之后可直接使用 /audit。

浏览器实时迭代与检测（可选）

• 浏览器实时迭代：运行 /impeccable live，在浏览器中圈选元素、批注、生成变体、接受后自动写回源码。支持 Vite、Next.js（含 monorepo）、SvelteKit、Astro、Nuxt，并自动处理 CSP 限制。
• 安装检测工具：通过 Chrome 扩展在任意页面一键高亮反模式；或通过 CLI 运行 npm i -g impeccable，再执行 npx impeccable detect src/ 扫描项目。
• 保持更新：运行 npx impeccable skills update 定期拉取最新命令和反模式定义。

关键信息与核心优势

• 产品定位：AI 前端设计技能包，用于纠正 AI 生成界面时的“AI slop”同质化审美。
• 创始人背景：Paul Bakaus，jQuery UI 创始人、前 Google Chrome DevTools 负责人。
• 开源与侵入性：Apache 2.0 协议，完全免费，零侵入，不依赖外部工具或 IDE 扩展，通过标准 skill 机制注入 AI 上下文。
• 支持工具广泛：支持 Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、Kiro、Trae、Rovo Dev、OpenCode、Pi、Google Antigravity 等 11 种以上工具。
• 根治设计同质化：通过 Anti-attractor 机制，强制 AI 在生成前列举并拒绝其反射性默认选项（如 Inter 字体、紫蓝渐变），大幅提升字体和色彩多样性。
• 品牌与产品双注册：自动区分“品牌设计”（营销站、落地页，设计即产品）与“产品设计”（App UI、仪表盘，设计服务产品），命令自动适配相应词汇。
• 全链路覆盖：从品牌策略访谈（/shape）到高保真原型图，再到真实代码（/craft）、浏览器实时迭代（/live）、设计审计（/audit），最后到规范文档（/document）。
• 数据验证效果：Tessl 第三方基准测试显示，使用后综合评分从基线提升至 0.82/1.00，OKLCH 色彩使用从 0 覆盖至 12/12 场景，整体提升约 1.59 倍。

同类竞品对比

• 产品定位：Impeccable 是纠正 AI 编码助手设计输出的技能包；v0 by Vercel 是从提示或截图生成 React 组件的生成器；Bolt.new 是通过对话生成完整全栈应用的构建器。
• 核心机制：Impeccable 通过斜杠命令、参考文件与反模式规则注入 AI 上下文；v0 基于文本或图像提示生成组件预览；Bolt.new 基于自然语言对话在 WebContainer 中实时运行生成全栈代码。
• 设计质量控制：Impeccable 为规则驱动，强制 AI 拒绝默认选项并用具体指令约束输出；v0 为组件驱动，基于 shadcn/ui 与 Tailwind CSS；Bolt.new 为速度驱动，优先快速输出全栈应用。
• 输出范围：Impeccable 不直接生成代码，而是提升其他工具生成代码的设计水准；v0 专注纯前端 React 与 Tailwind 组件；Bolt.new 覆盖前后端全栈代码。
• 使用方式：Impeccable 在已有 AI 编码工具中输入命令进行审计或重构；v0 在平台生成组件后手动集成；Bolt.new 在浏览器 IDE 中对话生成并部署。
• 支持平台：Impeccable 支持 11 种以上 AI 编码工具；v0 支持 Vercel 生态；Bolt.new 支持 React、Next.js、Vue、Svelte、Astro、Remix、React Native。

应用场景

• SaaS 产品界面优化：使用 /polish 和 /audit 提升仪表盘、设置页、结账流程的视觉质感与可用性。
• 营销站与落地页设计：使用 /shape 生成品牌工具包（配色、字体、情绪板），再用 /craft 转为真实响应式页面。
• 设计稿到代码：将 GPT Image 2 或 Imagen 4 Ultra 生成的高保真参考图直接转为可交付的 HTML/CSS/JS。
• 浏览器内快速迭代：在已有项目中选中按钮或卡片，用 /live 生成 3 个变体，即时对比并采纳。
• 设计规范沉淀：用 /document 自动扫描现有项目的 token、组件和渲染输出，生成标准 DESIGN.md。
• 反模式自查：通过 Chrome 扩展或 CLI 扫描自己的网站或竞品，识别低对比度、嵌套卡片、默认字体等问题。