Stop Accepting Ugly AI Frontends — Impeccable Is the Design System Your Coding Agent Needed

Created

Have you ever built a frontend with Claude Code or Cursor and gotten: Inter font, purple gradient hero, cards nested inside cards, pure black text on gray backgrounds, and bounce easing on modals?

That’s not a bug — it’s training data bias. AI models have absorbed way more mediocre websites than great ones. The result: code that compiles but looks like a 2018 Bootstrap template.

Impeccable fixes this. It’s an open-source design language system created by Paul Bakaus (jQuery UI creator) that injects professional design knowledge into AI coding agents through 23 commands and 7 design reference files. The project went viral on GitHub, growing at roughly 640 stars/day — a rare trajectory for a developer tooling release in 2026.

Why Do AI-Generated Frontends Always Look Bad?

This isn’t a hallucination problem or a logic problem — it’s training data bias.

The web is full of mediocre design, and every frontier model absorbed it. Worse: when you tell the AI “make it look clean and modern,” its definition of that comes from millions of average websites, not excellent ones.

More prompting won’t solve it. The real fix is: encode real design expertise in a form the agent reads as context. That’s exactly what Impeccable does.

What Is Impeccable

Impeccable is a design language system purpose-built for AI coding agents. After installation, it becomes the agent’s built-in design knowledge base — not generating images, but directly guiding the AI’s code decisions.

Core components:

  • 7 professional design reference files: typography, color & contrast, spatial design, motion, interaction design, responsive design, UX writing
  • 23 slash commands: covering everything from brand context to UI auditing
  • PRODUCT.md + DESIGN.md: project design documents in Google Stitch format, read automatically before every code generation

Key differentiator vs. other design tools:

Aspect Generic Design Tools (Galileo/Figma AI) Impeccable
Position in workflow Image mockups, then human implements Embedded in AI coding agent
Input method Describe → generate mockup Injects design rules during code generation
Knowledge depth Generic design advice 7 professional design reference files
Feedback Image comparison Code diff + design scoring
Process overhead Extra step, manual translation needed Zero extra steps, AI follows automatically

All 23 Commands at a Glance

Impeccable consolidates multiple skills into one unified entry point via /impeccable <command>:

Command Function
/impeccable teach Interactive interview to create PRODUCT.md (positioning, audience, brand voice)
/impeccable document Scan code or guide creation of DESIGN.md (colors, typography, components)
/impeccable polish Design polish on existing pages (alignment, spacing, typography, color, motion, copy)
/impeccable audit Full design audit (accessibility, performance, theming, responsive, anti-patterns)
/impeccable critique Comprehensive design review with scoring, persona tests, automated detection
/impeccable craft Build a new page from scratch (structure-first, then code)
/impeccable live Browser live preview mode — generate and accept variants
/impeccable redo Redesign existing components
/impeccable pin Pin frequently used commands as standalone shortcuts (e.g., /audit)

Quick Start

Install (one command)

1
npx skills add pbakaus/impeccable

Auto-detects your AI coding tool (Claude Code, Cursor, Codex, etc.) and writes files to the correct directory. Reload the agent and type /impeccable to see all 23 commands.

Step 1: Build Design Context

1
/impeccable teach

Starts a short interview to collect:

  • Register: Brand surface (marketing/landing/portfolio) or product surface (app/dashboard)?
  • Audience: Specific description, not “users”
  • Brand voice: Three real words (e.g., “warm, technical, opinionated”)
  • Visual references: Named brands/products, not adjectives
  • Anti-references: Explicit exclusions

The AI generates PRODUCT.md from your answers, read automatically before every command.

Step 2: Capture the Visual System

1
/impeccable document

Scans your project’s CSS variables, Tailwind config, etc. to extract colors and typography — or builds an initial design system through a few questions on a fresh project. Creates DESIGN.md.

Step 3: Polish an Existing Page

1
/impeccable polish the pricing page

Design-polishes an existing page. Typical output:

1
2
3
4
5
Visual alignment: fixed 3 off-grid elements
Typography: tightened h1 kerning, fixed widow on feature list
Color: replaced one hardcoded hex with --color-accent token
Interaction: added missing hover state on FAQ items
Motion: softened modal entrance to 220ms ease-out-quart

Not a rewrite — targeted improvements that take “done” to “done well.”

Before/After: With vs. Without Impeccable

AI output WITHOUT Impeccable:

  • Font: System default or pure Inter, no hierarchy
  • Color: #333/#666/#999 pure grays, brand color is #3b82f6
  • Spacing: 8px/12px/24px random, no 8px grid
  • Layout: Everything is a card, nested indefinitely
  • Motion: None or uniform ease-in-out, occasional bounce
  • Contrast: Secondary text often fails WCAG AA

AI output WITH Impeccable:

  • Typography: Modular type scales, deliberate font pairing, OpenType feature consideration
  • Color: OKLCH-based palettes, tinted neutrals, proper dark mode, built-in contrast checks
  • Spacing: Consistent 8px-grid spatial systems, hierarchy through whitespace not borders
  • Layout: Real compositional thinking, not every element is a card
  • Motion: Purposeful easing curves, stagger animations, reduced-motion support
  • Copy: Button labels, error messages, empty states that sound human

Community feedback: like “upgrading from Bootstrap 3 to a real design system.”

Key Takeaways

📌 Three things to know before installing Impeccable:

  1. Token overhead is real: Skill files consume ~8,000-15,000 tokens per session, roughly 10-15% of a long session — a reasonable tradeoff for design quality
  2. Teach first, then use: Without PRODUCT.md design context, Impeccable still outputs “design without a brand” — the teach step is the most valuable action
  3. Live Mode is the standout feature: Preview three AI-generated variants directly in your browser, accept one, and watch it auto-write back to source — the workflow is impressively smooth

Conclusion

Impeccable is the first real design quality solution for the AI coding era. It doesn’t reinvent the wheel — it encodes decades of professional design knowledge into a format AI agents can read and follow.

If you use Claude Code, Cursor, or any AI coding tool for frontend work, Impeccable deserves to be a default install. Free, no account needed, and you see results in five minutes.

👉 Website: https://impeccable.style/
👉 GitHub: https://github.com/pbakaus/impeccable