How Impeccable Fixes Claude Code's Biggest Design Problem
How Impeccable Fixes Claude Code's Biggest Design Problem
Impeccable is an open-source Claude Code skill that gives the agent an actual design language — 23 commands, 7 design pillars, and an in-browser live mode that lets you tweak components visually instead of through the command line. It's the closest thing to giving Claude Code design taste I've found, and after building two sites with it and auditing my own agency website through it, it's earned a permanent spot in my front-end stack. Here's how it works, where it shines, and where the rough edges still are.
What Is Impeccable?
Impeccable is an open-source GitHub repo that installs as a single Claude Code skill — but calling it "a skill" massively undersells what's inside. It bundles 23 commands, 7 domain-specific reference files, and a live in-browser editing mode that lets you tweak components without ever leaving the browser. The website at impeccable.style shows before-and-after comparisons for every command so you can see exactly what each one does to a design.
The whole project is built on a simple premise: AI has no taste, and that's because most prompts have no taste. When you tell Claude Code "make this look better," you're asking it to guess. When you tell Claude Code "run impeccable bolder with three variants," you're handing it a designer's vocabulary and a structured operation to perform.
That difference is the entire point.
Why Does Claude Code Need a Design Skill?
Out of the box, Claude Code is a strong code generator and a mediocre designer. It defaults to safe layouts, predictable bento grids, and "AI cream" color palettes — that washed-out beige-and-white look you've seen on a thousand AI-generated landing pages.
The problem isn't the model. The problem is that designers think in terms most people don't have words for: visual hierarchy, decoration discipline, typographic restraint, motion that earns its keep. Without that vocabulary in your prompt, Claude Code falls back to averages.
Impeccable solves this by giving Claude Code the vocabulary, the reference patterns, and the anti-patterns to avoid — all in one skill. The 7 pillars it covers are:
- Typography
- Color
- Spatial design
- Responsiveness
- Interactions
- Motion
- UX writing
That's not a typical front-end skill that's a few paragraphs of "use Tailwind and don't use comic sans." It's comprehensive enough that you'll forget which command does what — which is fine, because Claude Code picks the right one most of the time, and the website lets you look up the rest.
How Do You Install Impeccable?
It's a one-liner. Copy the install command from the GitHub repo, paste it into Claude Code, and you're done. There's also a Chrome extension and a CLI in the repo, but I'd argue about 99% of the value lives in the skill itself.
That's where I focus, and where the workflow below assumes you're operating from.
How Do You Build a Site From Scratch With Impeccable?
If you're starting greenfield, the entry command is impeccable craft. It runs its own version of plan mode and interviews you about what you're building before generating anything.
In my test, I gave it: "Let's build a landing page for my fake SaaS product, Lighthouse. It's an analytics platform for solo founders / small teams. Ask me any questions you want."
It came back with 13 questions — 4 about the product, several about voice and visual direction, and a handful about scope (hero only? full scroll? real screenshots?). That's deeper than most front-end skills I've used, and roughly comparable to what you'd get from Claude Design.
The output was two files: product.md and design.md. The design.md file is the same construct you've seen in Google Stitch and Claude Design — a structured markdown brief that tells the model exactly what it's building. This pattern is becoming the industry standard for AI-driven design, and Impeccable follows it cleanly.
The variant trick
Here's the move I use no matter which design skill I'm running: don't accept a single output.
After the first pass, I prompt Claude Code: "I don't want just one layout. Show me three different macro variants — editorial, drenched, brutalist — that I can click through side by side, all open in full screen so I can compare and contrast."
That's not a feature of Impeccable. It's a prompt habit. You should be doing this with every design tool you use. I picked it up from Stitch, where the variant comparison is built into the UI, and I've since pulled it into every workflow.
For the Lighthouse test:
- The editorial variant looked clean but was leaning toward AI cream.
- The drenched variant was bold, color-heavy, less generic.
- The brutalist variant was grayscale with offset numbered grids — the most distinctive of the three.
I went with brutalist. From there, the real fun starts: live mode.
What Is Impeccable Live and Why Does It Matter?
Impeccable Live is an alpha feature that lets you edit your site in the browser instead of through the command line. You run impeccable live, Claude Code spins up a local host, and you refresh your browser to see overlay controls on every component.
When you click a component, you get two options:
- Free form — type a natural-language prompt for that specific element.
- Pre-loaded commands — pick from the 23 Impeccable commands.
bolder,quieter,distill,polish,adapt,delight, etc.
Each command is a structured operation. bolder "pushes safe designs toward impact without sliding into chaos." quieter does the opposite. delight adds personality to a component. The website documents every one of them with a before-and-after.
You can ask for multiple variants of any change (3, 4, 12 — your call), then tune offset, color intensity, or motion via sliders. Pick the one you like, hit Accept, and it applies to the codebase.
This is where Impeccable separates from every other front-end skill I've tried. The micro-adjustment loop in the browser is the killer feature. Most skills make you write a new prompt every time you want to nudge something. Impeccable makes that nudge a click.
It's alpha, so expect rough edges — I had one reload bug where I needed to manually refresh after hitting Accept. But the workflow is so much faster than command-line prompting that the friction is worth it.
How Does Impeccable Handle an Existing Site?
I pointed it at my actual AI agency website and ran three commands.
impeccable document reverse-engineers a design.md file from your existing code. It scans the codebase and writes three strategy files explaining your wins, your north star, and any violations it found.
In my case, it flagged 7 violations:
- Service card mockups it called "a clip art variety pack"
- An intentional card grid it didn't approve of
- Glassmorphism (Impeccable hates glassmorphism)
- A loaded font that was never actually used
- Color inconsistencies
- Some features in the code that don't render in the UI
- A strategic gap: "Chase isn't on his own site enough"
That last one is fair. I'll fix it.
impeccable critique runs a full design audit and grades the site across 10 dimensions, each scored out of 4. My homepage got 25 out of 40 — "acceptable, borderline AI slop." It scored a 5 out of 8 on cognitive load with specific notes: "background motion competes with content," "two equal-weight CTAs with ambiguous priority," "service section has four different visual schemas."
You don't have to agree with every line of the critique — and I don't. But specific, actionable feedback at this density is rare from any AI tool, and it gives you a concrete list to work from instead of a vague "make it better."
impeccable live then lets you open the existing site in the browser and start making changes the same way you would on a greenfield build. Click a component, pick delight with three variants, tune, accept, applied.
When I ran the suggested "decoration discipline" pass on my services section, the changes were subtle — color palette tightened to white, gray, and a single terracotta orange. Glow effects removed where they didn't earn the visual weight. Result: noticeably calmer hierarchy without sacrificing the brand.
Where Does Impeccable Fall Short?
Two things to know.
First, mood-board-only briefs underperform. I tried building a second site by giving Claude Code a single reference image and saying "match this aesthetic." The output had the right colors but missed the structural choices that made the reference cool. You need multiple assets and a structured prompt to get the case-study quality that Impeccable shows on their own site.
Second, the 23-command surface is overwhelming at first. You won't remember them all. The two safety nets are: Claude Code is pretty good at picking the right command on its own, and impeccable.style documents every one with before-and-afters you can browse.
Both of these are minor. Neither would stop me from using it.
Frequently Asked Questions
Is Impeccable free?
Yes. It's an open-source GitHub repo. You install it as a Claude Code skill with a single line of code. There's no subscription or token gate on the core skill.
Do I need the Chrome extension or CLI to use Impeccable?
No. The skill itself delivers about 99% of the value. The Chrome extension and CLI are nice-to-haves, but for most workflows you can ignore them and work entirely from inside Claude Code.
How is Impeccable different from Claude Design or Google Stitch?
Claude Design and Stitch are full design environments — you live inside them. Impeccable is a Claude Code skill, so it lives inside your existing terminal workflow alongside whatever code you're already writing. It also has the live in-browser editing layer, which neither of those have in quite the same form. They're complementary, not competitive.
Can Impeccable detect AI slop in existing designs?
Yes. The detect command scans for the anti-patterns Impeccable's reference files define — over-reliance on glassmorphism, generic bento grids, AI cream palettes, decoration without purpose, and so on. It won't flag everything a human designer would catch, but it covers the most common offenders.
What design pillars does Impeccable cover?
Seven: typography, color, spatial design, responsiveness, interactions, motion, and UX writing. Each pillar has its own reference file inside the skill, so when Claude Code makes a design call, it has the relevant pillar's principles in context.
If you want to go deeper into AI-driven front-end design, join the free Chase AI community for templates, prompts, and live breakdowns. And if you're serious about building with AI, check out the paid community, Chase AI+, for hands-on guidance on how to make money with AI.
