Impeccable

What is Impeccable

Impeccable is an open-source AI front-end design skill pack (Apache 2.0 license) created by Paul Bakaus. It is not a component library or CSS theme, but an "AI design vocabulary layer." Through 7 domain reference files, 23 slash commands, and 25 deterministic anti-pattern rules, it teaches your AI to write real design code rather than cookie-cutter "AI slop" aesthetics. Supports 11+ mainstream AI coding tools including Cursor, Claude Code, Gemini CLI, Codex CLI, and more.

Main features of Impeccable

• 23 design commands: Form a shared design vocabulary with AI, covering /polish(texture enhancement),/audit(design audit),/critique(heuristic scoring),/typeset(typography optimization),/colorize(color scheme optimization),/layout(layout spacing),/distill(structure simplification),/animate(motion optimization),/bolder / /quieter(enhance/reduce visual emphasis),/shape(brand toolkit generation),/craft(design-to-code),/live(real-time browser iteration),/document(generate DESIGN.md),/harden(production readiness check), etc.
• 7 in-depth reference files: Covering typography, OKLCH color and contrast, spatial design, motion, interaction, responsive layout, and UX copy, automatically loaded each time AI writes code
• 25 anti-pattern detection rules: Deterministic rules (no LLM required), covering font, color, layout, motion, and quality dimensions, automatically identifying "AI slop" design
• Live Mode（Alpha）: Select any element directly in the browser, annotate modification suggestions, and AI generates 3 production-grade variants and replaces them in real time via HMR; after acceptance, automatically writes back to the source code
• Chrome extension: One-click detection of anti-patterns on any web page (gradient text, AI color schemes, nested cards, low contrast, etc.), supporting localhost, staging, and production environments
• CLI tool：npx impeccable detect src/ scans projects, supports CI/PR checks, outputs JSON format, and can be integrated into build gates
• PRODUCT.md / DESIGN.md generation：/impeccable teach one-click creation of project design context files (audience, brand personality, anti-references);/impeccable document generates design specification documents according to Google Stitch standards

How to use Impeccable

• Install the skill pack
  • Automatic installation:npx skills add pbakaus/impeccable(automatically recognizes tools such as Cursor, Claude Code, Gemini CLI, Codex CLI, etc., and places the files).
  • Claude Code plugin:/plugin marketplace add pbakaus/impeccable。
  • Manual installation: download the universal ZIP and extract it to the project root directory (at the same level as package.json ).
• Initialize project design context: Run /impeccable teach, generating PRODUCT.md(brand positioning, audience, anti-references) and .impeccable.md(design context);after that, these files will be automatically read each time any command is used.
• Use commands
  • Direct call:/impeccable audit checkout(audit checkout page)
  • Automatic selection:/impeccable redo this hero(let the skill automatically choose the best method)
  • Fixed shortcut commands:/impeccable pin audit → then you can directly use /audit
• Browser real-time iteration (optional): run /impeccable live, select elements in the browser, annotate, generate variants, and automatically write back to source code after acceptance, supports Vite, Next.js (including monorepo), SvelteKit, Astro, Nuxt, and automatically handles CSP restrictions.
• Install detection tools (optional)
  • Chrome extension: highlight anti-patterns on any page with one click.
  • CLI：npm i -g impeccable, run npx impeccable detect src/ to scan the project.
• Stay updated：npx impeccable skills update regularly pull the latest commands and anti-pattern definitions.

Impeccable's key information and usage requirements

• Product positioning: AI front-end design skill pack (skill), not a component library or CSS theme, but an "AI design vocabulary layer" used to correct the homogeneous "AI slop" aesthetic when AI generates interfaces
• Founder: Paul Bakaus (founder of jQuery UI, former head of Google Chrome DevTools)
• Open-source license: Apache 2.0, completely free
• Supported tools: Cursor, Claude Code, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Trae, Rovo Dev, OpenCode, Pi, Google Antigravity, and 11+ others
• Performance data: Tessl benchmark composite score improved to 0.82/1.00, OKLCH color coverage 12/12 scenarios, overall improvement about 1.59x
• Installation requirements：
  • Recommended:npx skills add pbakaus/impeccable(automatically detects AI tools and places files)
  • Claude Code：/plugin marketplace add pbakaus/impeccable
  • Manual: download the universal ZIP and extract it to the project root directory (at the same level as package.json )

Impeccable's core advantages

• Eradicates "AI design homogeneity": through the Anti-attractor mechanism, forces AI to list and reject its reflexive default options before generation (such as Inter font, purple-blue gradients), greatly improving output font and color diversity
• Dual registration of brand and product (Register): automatically distinguishes "brand design" (marketing sites, landing pages, where design is the product) from "product design" (app UI, dashboards, where design serves the product), and commands automatically adapt to the corresponding vocabulary
• Data-validated effectiveness: Tessl third-party benchmark testing shows that after use, the composite score improves from the baseline to 0.82/1.00, OKLCH color usage coverage goes from 0 to 12/12 scenarios, with an overall improvement of about 1.59x
• Zero intrusion, fully open source: Apache 2.0 license, does not depend on external tools or IDE extensions, injects AI context through the standard skill mechanism
• Full-chain coverage: from brand strategy interview (/shape) → high-fidelity prototype → real code (/craft) → browser real-time iteration (/live) → design audit (/audit) → specification documents (/document）

Comparison of Impeccable with similar competitors

Impeccable Use Cases

• SaaS product interface optimization: Use /polish and /audit to improve the visual quality and usability of dashboards, settings pages, and checkout flows.
• Marketing site and landing page design: Use /shape to generate a brand toolkit (color palette, fonts, mood board), then use /craft to turn it into a real responsive page.
• Design mockup to code: Turn high-fidelity reference images generated by GPT Image 2 / Imagen 4 Ultra directly into deliverable HTML/CSS/JS.
• Rapid in-browser iteration: Select a button or card in an existing project, use /live to generate 3 variants, compare instantly, and adopt one.
• Design specification consolidation: Use /document to automatically scan an existing project's tokens, components, and rendered output, and generate a standard DESIGN.md.
• Anti-pattern self-check: Use the Chrome extension or CLI to scan your own website or a competitor's, identifying issues such as low contrast, nested cards, and default fonts.