Stop Your AI Coding Tool from Generating Generic UI: Impeccable Design Skill

TL;DR

AI coding tools (Claude Code, Cursor, Gemini CLI) keep generating the same generic UI because they learned from the same templates. Impeccable is a design skill that corrects these biases: 7 design domains, 20 commands, curated anti-patterns. Install with one line. Free and open source.

The Problem: Every AI-Generated UI Looks the Same

If you've used any AI coding tool for frontend work, you've seen this pattern:

Default AI UI Starter Pack:
- Inter font (always)
- Purple/violet gradients
- Cards nested inside cards
- Gray text on colored backgrounds
- bounce/elastic animations
- Big rounded icons above every heading

These aren't random choices. All LLMs learned from the same generic templates (Tailwind UI, shadcn/ui, various boilerplates). The result? Predictable, cookie-cutter interfaces.

Enter Impeccable

Impeccable is an open-source design skill created by Paul Bakaus (the original creator of jQuery UI). It builds on Anthropic's official frontend-design skill and adds much deeper design expertise.

The core idea: instead of just telling AI what to build, teach it why certain design decisions matter.

7 Design Domain References

Impeccable provides structured knowledge in 7 areas:

Domain	What it covers
Typography	Font pairing, modular scale, OpenType
Color & Contrast	OKLCH, tinted neutrals, dark mode, a11y
Spatial Design	Spacing systems, grid, visual hierarchy
Motion Design	Easing curves, staggering, reduced motion
Interaction	Forms, focus states, loading patterns
Responsive	Mobile-first, fluid design, container queries
UX Writing	Button labels, error messages, empty states

The Anti-Patterns (The Real Value)

This is where Impeccable shines. It explicitly tells AI what NOT to do:

# Banned patterns:
- Overused fonts: Inter, Roboto, Arial, Open Sans
- Gray text on colored backgrounds
- Pure black (#000) or pure gray (always use tinted neutrals)
- Wrapping everything in cards or nesting cards
- bounce/elastic easing (feels dated)
- Big rounded icons above every heading (template look)

Without these, AI keeps making the same mistakes. With them, the output immediately feels more intentional.

20 Commands You'll Actually Use

Diagnostics:

/audit components/dashboard    # Technical quality check (a11y, perf, responsive)
/critique pages/landing        # UX design review (hierarchy, clarity)

Quality:

/polish app          # Pre-launch final pass
/normalize app       # Align to design system
/harden forms/signup # Error handling, i18n, edge cases

Enhancement:

/typeset pages/blog       # Typography optimization
/colorize components/     # Strategic color additions
/arrange pages/dashboard  # Layout/spacing improvements

Intensity:

/bolder pages/landing      # Amplify bland designs
/quieter components/alerts # Tone down over-designed elements

Command chaining works too:

/audit /normalize /polish blog  # Three commands, one line

Installation (One Line)

npx skills add pbakaus/impeccable

This auto-detects your AI tool and installs to the right location. Supports: Claude Code, Cursor, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Trae, OpenCode, Pi.

For Claude Code specifically:

/plugin marketplace add pbakaus/impeccable

Before/After Example

Typography:

/* Before (AI default) */
font-family: 'Inter', sans-serif;

/* After (Impeccable) */
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;

Colors:

/* Before */
color: #666666;
background: #000000;

/* After - tinted neutrals */
color: oklch(0.55 0.02 250);
background: oklch(0.13 0.01 250);

My Workflow

/teach-impeccable    # One-time setup (saves project design context)
# ... generate UI ...
/audit app           # Find issues
/normalize app       # Align to system
/polish app          # Final pass