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 编码工具。

Impeccable的主要功能

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 格式，可接入构建门禁
PRODUCT.md / DESIGN.md 生成：/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 定期拉取最新命令和反模式定义。

Impeccable的关键信息和使用要求

产品定位：AI 前端设计技能包（skill），不是组件库或 CSS 主题，而是一套”AI 设计词汇层”，用于纠正 AI 生成界面时的”AI slop”同质化审美
创始人：Paul Bakaus（jQuery UI 创始人、前 Google Chrome DevTools 负责人）
开源协议：Apache 2.0，完全免费
支持工具：Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、Kiro、Trae、Rovo Dev、OpenCode、Pi、Google Antigravity 等 11+
效果数据：Tessl 基准测试综合评分提升至 0.82/1.00，OKLCH 色彩覆盖 12/12 场景，整体提升约 1.59 倍
安装要求：
- 推荐：npx skills add pbakaus/impeccable（自动识别 AI 工具并放置文件）
- Claude Code：/plugin marketplace add pbakaus/impeccable
- 手动：下载 universal ZIP 解压至项目根目录（与 package.json 同级）

Impeccable的核心优势

根治”AI 设计同质化”：通过 Anti-attractor 机制，强制 AI 在生成前列举并拒绝其反射性默认选项（如 Inter 字体、紫蓝渐变），输出字体和色彩多样性大幅提升
品牌与产品双注册（Register）：自动区分”品牌设计”（营销站、落地页，设计即产品）与”产品设计”（App UI、仪表盘，设计服务产品），命令自动适配相应词汇
数据验证效果：Tessl 第三方基准测试显示，使用后综合评分从基线提升至 0.82/1.00，OKLCH 色彩使用从 0 覆盖至 12/12 场景，整体提升约 1.59 倍
零侵入、全开源：Apache 2.0 协议，不依赖外部工具或 IDE 扩展，通过标准 skill 机制注入 AI 上下文
全链路覆盖：从品牌策略访谈（/shape）→ 高保真原型图 → 真实代码（/craft）→ 浏览器实时迭代（/live）→ 设计审计（/audit）→ 规范文档（/document）

Impeccable的同类竞品对比

对比维度	Impeccable	v0 by Vercel	Bolt.new
产品定位	AI 设计技能包（skill），通过设计词汇层和反模式规则纠正 AI 编码助手的设计输出	AI 前端组件生成器，从提示/截图直接生成生产级 React 组件	AI 全栈应用构建器，通过对话界面生成完整应用（前后端）
核心机制	23 个斜杠命令 + 7 份设计参考文件 + 25 条确定性反模式规则，注入 AI 上下文	文本/图像提示 → 多版本 React 组件预览 → 选择并导出	自然语言对话 → 浏览器内 WebContainer 实时运行 → 全栈代码生成
设计质量控制	规则驱动：强制 AI 枚举并拒绝默认选项（Anti-attractor），用 OKLCH 色彩、流体排版等具体指令约束输出	组件驱动：基于 shadcn/ui + Tailwind CSS 设计系统，输出一致、可访问的组件	速度驱动：优先快速输出全栈应用，设计质量依赖后续迭代优化
输出范围	不直接生成代码，而是提升 Cursor/Claude Code/Gemini 等工具生成代码的设计水准	纯前端：React + Tailwind 组件，无后端、数据库或认证	全栈：React/Next.js/Vue 等前端 + Node.js 后端 + 数据库 + 认证
使用方式	在已有 AI 编码工具中输入 `/impeccable audit` 等命令，对现有代码进行审计/打磨/重构	在 v0 平台输入提示，生成组件后手动集成到现有代码库	在浏览器 IDE 中对话生成完整项目，一键部署到 Netlify
支持平台	Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot 等 11+ AI 编码工具	Vercel 生态（Next.js、React）	React、Next.js、Vue、Svelte、Astro、Remix、React Native

Impeccable的应用场景

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