Impeccable: The Practical Guide

AI coding tools lack design sense. Impeccable gives them one. Impeccable is the design layer for AI coding tools. It teaches Claude Code, Cursor, Codex, Gemini CLI, VS Code Copilot, and similar “AI harnesses” how to make better front-end decisions. The point is not just to avoid AI-tells or slop signs, i.e. purple gradients, cards inside cards, inconsistent typography, etc, but to empower developers with stronger product judgment.

It’s free, open source, Apache 2.0, and built by Paul Bakaus, a product engineer with a long front-end history: jQuery UI, Chrome DevTools at Google, creator tools at Spotter, and now AI tools. People struggle to ask for things like quieter palettes, vertical rhythm, or better hierarchy because they don’t have the vocabulary. Impeccable turns that vocabulary into commands.

What It Does

Impeccable gives your coding agent design taste in 3 ways.

First, it adds design memory. Run /impeccable teach, and it creates PRODUCT.md and, when possible, DESIGN.md. Those files capture your audience, brand voice, visual system, anti-references, and whether you’re designing a brand surface or a product surface. Every later command reads that context.

Second, it gives you a design vocabulary. Instead of telling an agent to “make it look better,” you can say /impeccable typeset, /impeccable layout, /impeccable quieter, /impeccable bolder, /impeccable harden, /impeccable critique, or /impeccable polish. Impeccable has 23 commands that map to actual design work: typography, spacing, motion, color, UX copy, accessibility, performance, and responsive behavior.

Third, it fights common AI design habits. Its detector looks for generic patterns like overused fonts, low-contrast text, purple palettes, gradient headings, card grids, nested cards, and weak type hierarchy. You can run detection from the CLI, browser extension, or critique flow.

Who It’s For

Use Impeccable if you build interfaces in code and want the output to look intentional.

It’s best for founders, indie hackers, design engineers, front-end developers, product designers who code, and teams using Claude Code, Cursor, Codex, Gemini CLI, or Copilot to build real interfaces. It works on marketing pages, dashboards, app shells, settings screens, checkout flows, onboarding, empty states, and component polish.

Figma is a shared design canvas; Claude Design is an AI design workspace with brand onboarding, visual editing, collaboration, exports, and handoff to Claude Code; Impeccable is the code-side design partner: it reads your project, edits your real files, and treats design as part of implementation.

Getting Started

Install it from your project root:

npx skills add pbakaus/impeccable

Then reload your AI coding tool and type /. You should see /impeccable.

Teach it the project:

/impeccable teach

Answer the questions with specifics. Say who the user is, what state they’re in, what the surface should feel like, and what you want to avoid. Bad: “modern SaaS.” Better: “B2B finance dashboard for analysts under time pressure. Dense, calm, readable. Avoid purple gradients, giant cards, and startup-y empty claims.”

Choose the register carefully. Impeccable treats brand work and product work differently. Brand surfaces can push typography, motion, density, and color. Product surfaces should favor familiarity, speed, state clarity, and readability.

For a new feature, run:

/impeccable shape a daily digest email preferences page

This produces a design brief before code. It asks about users, data ranges, edge cases, empty states, emotional context, and visual direction.

Then build:

/impeccable craft the daily digest email preferences page

Craft runs the shape-and-build loop: brief, references, implementation, and visual iteration.

For an existing page, skip craft and use the right refinement command:

/impeccable critique the homepage hero

/impeccable polish the pricing page

/impeccable typeset the settings screen

/impeccable layout the dashboard

/impeccable harden the checkout flow

For visual iteration, run:

/impeccable live

Open your dev server, click an element, type what you want, generate 3 variants, and accept one. Live Mode supports Vite, Next.js, SvelteKit, Astro, Nuxt, Bun, and static HTML, but it’s alpha and writes real code, so branch first.

Use concrete context:

/impeccable polish the checkout page. This is for returning customers who want speed. Keep the layout dense but readable. Make errors impossible to miss. Avoid decorative motion.

Name the surface:

/impeccable typeset the pricing page as a brand surface. It should feel editorial and confident, not SaaS-template clean.

Give anti-references:

/impeccable redo this hero. Avoid purple gradients, glass cards, centered everything, huge icon tiles, and generic “boost productivity” copy.

Ask for tradeoffs:

/impeccable critique the dashboard. Prioritize the 5 changes that improve scan speed, density, and trust. Ignore decorative improvements.

Use Live Mode when language is clumsy:

/impeccable live Then point at the element and write: “quieter,” “more editorial,” “less padded,” “stronger hierarchy,” or “make this feel like a tool, not a landing page.”

Practical Rules

Run /impeccable teach once per project. Bad context produces generic output.

Use shape before big work. Five minutes of discovery beats 2 hours of rewrites.

Use craft for new features. Use polish, critique, typeset, layout, colorize, or harden for existing pages.

Keep Figma for team alignment. Use Impeccable when the design decision can happen directly in code.

Use a branch for Live Mode. It writes to source.

Use the Chrome extension on staging, production, competitor pages, and AI-generated drafts from other tools.

Don’t accept taste blindly. Impeccable is opinionated, and its own docs warn against treating it like a linter. Push back when brand guidelines, accessibility, research, or product constraints require it.

Code-Native Design

Design is moving closer to code. The old workflow had a translation tax: design in Figma, hand off to engineering, reimplement, compare, revise, ship. Impeccable points to a different loop: define intent, generate interface code, inspect it in the browser, critique it, revise it, and commit the chosen version.

That won’t remove designers. It raises the value of design judgment. The scarce skill becomes knowing what good looks like, naming what’s wrong, and steering the model with enough taste and specificity that the code lands closer to the product’s intent.

The best workflow: Figma or Claude Design for shared thinking, Impeccable for code-native execution, and a human with taste making the final call. The human still supplies taste, product judgment, constraints, and the final call. Impeccable is all about less handoff, more steering. The human still supplies taste, product judgment, constraints, and the final call. The tool gives that human a tighter loop: teach the project, shape the feature, generate the interface, inspect it in the browser, detect the obvious tells, critique the deeper issues, and commit the version that fits.

That makes Impeccable most valuable for code-native builders who already ship with AI agents. It won’t replace Figma for team alignment or Claude Design for visual exploration. It will replace a lot of “make this better” prompting with a more useful sentence: “Make this fit the product.”