Impeccable

Quick Start

1. Run npx impeccable install from your project root. It detects your harness and places the correct skill build.
2. Reload your agent, then run /impeccable init so it scans tokens, components, and Tailwind config into PRODUCT.md.
3. Point a command at real UI: /impeccable polish the pricing page or /impeccable audit src/components/.
4. Wire npx impeccable detect src/ into CI to block AI slop before merge.

Claude Code users can also install via /plugin marketplace add pbakaus/impeccable. Run npx impeccable check to see if you are behind the latest release.

Why Web Devs Reach for It

Repo agents ship working UI fast, but the output often reads as AI slop: purple gradients, flat type hierarchy, nested cards, and the same Inter-on-dark palette. Impeccable strips those reflexes out and replaces them with a shared design vocabulary you and your agent can both use. It builds on Anthropic's original frontend-design skill with curated patterns, anti-patterns, and harness-specific builds tuned to each agent's strengths.

Unlike v0 or Stitch, Impeccable does not generate UI from scratch. It makes in-repo agents produce tighter visual output inside your existing design system. Pair it with CSS.dev when the task is layout-heavy or the agent keeps reaching for outdated CSS patterns.

How It Works

One comprehensive skill with deep design expertise, plus 23 invocable commands that form the language of design. On init, Impeccable walks your codebase, merges your Tailwind theme, catalogs components, and loads brand rules. Every command reads PRODUCT.md before designing so output matches your users, voice, and anti-references.

/impeccable document exports your visual system as a portable DESIGN.md in Google Stitch format, readable by any DESIGN.md-aware tool. Brand work and product UI follow different rules: Impeccable runs in two registers and every command knows which one applies.

All 23 Commands

Each command maps to one design discipline. Invoke with /impeccable <command> inside your agent.

Create

• /impeccable shape — discovery-first design brief before you build
• /impeccable craft — design and implement a feature in one flow
• /impeccable — plain-English design work or a next-step recommendation

Evaluate

• /impeccable critique — scored design review with persona tests and automated detection
• /impeccable audit — five-dimension technical quality check with P0 to P3 severity

Refine

• /impeccable typeset — fix typography that feels generic or inconsistent
• /impeccable colorize — add strategic color without going garish
• /impeccable layout — fix spacing, composition, and visual rhythm
• /impeccable bolder — push safe designs toward impact
• /impeccable quieter — tone down designs that are shouting
• /impeccable animate — purposeful motion that conveys state
• /impeccable delight — small moments of personality
• /impeccable overdrive — shaders, physics, and cinematic transitions

Simplify

• /impeccable distill — ruthless subtraction to the essence
• /impeccable adapt — responsive layouts without amputating features
• /impeccable clarify — rewrite confusing UX copy

Harden

• /impeccable polish — the meticulous final pass between good and great
• /impeccable harden — edge cases, i18n, error states, overflow
• /impeccable onboard — first-run experiences and empty states
• /impeccable optimize — UI performance from LCP to bundle size

System

• /impeccable document — export a spec-compliant DESIGN.md
• /impeccable extract — pull reusable tokens and patterns into your design system
• /impeccable live — iterate on UI in the browser with HMR variants (beta)

Live Mode

Live Mode is Impeccable's browser iteration loop. Point at any element in your running dev server, leave a comment or stroke, and generate three production-quality variants. Accept one and it writes to source as an ordinary edit, not a throwaway mock. The workflow uses your framework's HMR so you see changes instantly. It is still beta and requires a local dev server with hot reload.

Desloppification and CI

The detect CLI runs 44 deterministic rules with no LLM involved. It catches AI slop tells (gradient text, side-stripe borders, purple palettes), typography issues (overused fonts, flat hierarchy), WCAG contrast violations, layout anti-patterns (nested cards, everything centered), and motion problems (bounce easing, layout property transitions).

Wire it into PR checks: npx impeccable detect src/ exits 0 when clean and 2 when anti-patterns are found. Add --json for machine-readable output. A Chrome extension runs the same detector as an overlay on any live page, including staging and competitor sites.

Typical Workflow

1. Agent implements a new component in Cursor or Claude Code.
2. Run /impeccable audit on changed files for hierarchy and spacing issues.
3. Run /impeccable polish for the final visual pass.
4. Run npx impeccable detect src/ in CI before merge.

See the Design-to-Code with AI guide for where Impeccable fits alongside generators and Figma MCP.

Honest Limits

Live Mode is still beta and requires a running dev server with HMR. The detect CLI needs Node 24+. Impeccable improves design fluency inside an agent; it does not replace UI generators for greenfield exploration. It also does not replace accessibility testing: run axe after design passes. Pair with CSS.dev for modern layout patterns and with your repo agent for implementation.