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的應用場景

• SaaS 產品界面優化：用 /polish 和 /audit 提升儀表盤、設置頁、結賬流程的視覺質感與可用性。
• 營銷站與落地頁設計：用 /shape 生成品牌工具包（配色、字體、情緒板），再用 /craft 轉爲真實響應式頁面。
• 設計稿到代碼：將 GPT Image 2 / Imagen 4 Ultra 生成的高保真參考圖直接轉爲可交付的 HTML/CSS/JS。
• 瀏覽器內快速迭代：在已有項目中選中某個按鈕或卡片，用 /live 生成 3 個變體，即時對比並採納。
• 設計規範沉澱：用 /document 自動掃描現有項目的 token、組件和渲染輸出，生成標準 DESIGN.md。
• 反模式自查：通過 Chrome 擴展或 CLI 掃描自己的網站或競品，識別低對比度、嵌套卡片、默認字體等問題。