Impeccable: A Design Vocabulary for Your AI Harness

Generate a UI with any AI tool and you can spot it instantly: the purple-to-blue gradient, the cramped padding, the bouncy easing, the dark glow on a card. AI frontends all share one look — not because the models have bad taste, but because they have no words for hierarchy, contrast, and restraint. Ask for “better spacing” and you get a guess.

Impeccable, by Paul Bakaus, is a design language that fixes the vocabulary problem on both sides. It gives your agent 23 invocable commands and gives you the same terms, so you can ask for the exact thing — typeset the headings, quieter on this section, colorize strategically — instead of describing it and hoping. It runs inside your repo and refines code you already have; it does not generate a parallel design system from scratch.

Note

Impeccable is free and works across Claude Code, Cursor, Codex CLI, GitHub Copilot, Gemini CLI, and other major harnesses. It detects your harness on install and places the build tuned for it. Crucially, it inherits your existing tokens, components, and conventions rather than overwriting them — new work integrates with your design system instead of replacing it.

What you’ll walk away with

• Why AI-generated UIs converge on the same look, and what a shared vocabulary fixes
• How to install Impeccable and run its one-time setup
• The 23 commands, grouped by what they’re for
• Live Mode for in-browser iteration, and the detect CLI for CI
• When to reach for Impeccable versus the broader design pipeline

Install

From your project root:

npx impeccable skills install

It shows the detected harness folders, lets you customize providers, and asks whether to install project-locally or globally. Then run the one-time setup inside your AI tool:

/impeccable init

init gathers design context and writes PRODUCT.md and DESIGN.md — the files that ground every later command in your product’s intent and your design decisions.

Tip

Already on Claude Code? You can also add it from the marketplace with /plugin marketplace add pbakaus/impeccable. Either way, run /impeccable init once before using the other commands.

The 23 commands

Every command is invoked as /impeccable <command> <target>. They map one-to-one onto design disciplines, which is the whole point — you name the discipline instead of describing the symptom.

Set up and capture

Command	Does
init	One-time setup: gather context, write PRODUCT.md / DESIGN.md
document	Generate DESIGN.md from existing code
extract	Pull components and tokens into a design system

Plan and build

Command	Does
shape	Plan the UX/UI before any code
craft	Full shape-then-build flow with visual iteration

Review

Command	Does
critique	UX design review: hierarchy, clarity, resonance
audit	Technical checks: a11y, performance, responsive behavior
polish	Final pass and shipping readiness

Change the character

Command	Does
bolder	Amplify a boring, timid design
quieter	Tone down an overly loud one
distill	Strip to the essence
delight	Add moments of joy
overdrive	Add technically extraordinary effects

Fix one discipline

Command	Does
typeset	Fonts, hierarchy, sizing
colorize	Introduce strategic color
animate	Add purposeful motion
layout	Spacing and visual rhythm
clarify	Improve UX copy
adapt	Adapt for different devices
optimize	Performance improvements
harden	Error handling, i18n, text overflow, edge cases
onboard	First-run flows and empty states
live	Visual variant mode — iterate in the browser

Live Mode

/impeccable live turns iteration into a browser session against your dev server. You pick an element, leave a comment, and swap in variants that write back to your source files through the framework’s hot-module reload. It’s the difference between “describe the change and re-read the diff” and “point at the thing and try three versions.”

The detect CLI: an anti-slop gate for CI

Separate from the harness commands, Impeccable ships a deterministic detector — 44 rules, no LLM, no API key — that you can run anywhere:

npx impeccable detect src/
npx impeccable detect index.html
npx impeccable detect https://example.com
npx impeccable detect --json .

It catches two families of problems: AI slop (purple gradients, bounce easing, dark glows, side-tab borders) and general design-quality issues (over-long line length, cramped padding, small touch targets, skipped heading levels). Because it’s deterministic and emits JSON plus exit codes, it drops straight into a PR check — a build gate that fails when generated UI starts to look generated.

Tip

Wire detect into CI before you wire in anything else. It’s the cheapest win: no model calls, no config, and it stops the most recognizable AI-slop patterns from ever reaching main. The harness commands then handle the judgment calls the detector can’t.

When to reach for it

• Your AI-built UI is functional but generic and you want to direct specific improvements without learning to art-direct in prose.
• You want a deterministic design-quality gate in CI (detect).
• You’re polishing an existing codebase and need changes to inherit your tokens and components, not fight them.

For a full design-to-code methodology — mockup, prototype, design system, implementation — Impeccable slots into the build and polish stages of the four-stage design pipeline rather than replacing it. And where Impeccable audits design, shadcn/improve audits architecture — they’re complementary skills.

Where to go next

The design pipeline The four-stage mockup → prototype → system → code workflow Impeccable plugs into.

shadcn/improve The architecture-audit counterpart to Impeccable's design audit.

Best skills for frontend Pair Impeccable with framework skills so the AI writes current React, Vue, or Svelte.

Grill Me & Grill With Docs Impeccable sharpens how it looks; grilling sharpens what you're building -- the agent interviews you before any code.