Aug 18, 2026 · Free Guide

“SKILL” One Free Skill Takes Claude From AI Slop to Design Genius

You know the design is off. You just can't say why. So you type “make it look better,” Claude shuffles the same six ideas, and you end up with the exact same page in a different color. That's not a talent problem. That's a vocabulary problem. Impeccable fixes it with 23 words Claude actually understands, a detector that catches AI tells before they ship, and a live mode that lets you redesign any element by clicking it.

Why every AI-built site looks the same

Ask a model to be creative and it builds its favorite idea. Every single run.

Same italic serif. Same cream background. Same purple gradient. Same three cards in a row with a glow behind them. Impeccable's creator calls these “tells,” and once you see them you can't unsee them.

It's not that the model has bad taste. It's that with no direction, it falls back to the safest thing in its training data. And the safest thing is what everyone else already shipped.

“Make it better” is not direction.It's a coin flip.

What Impeccable actually is

A free, open-source skill built by Paul Bakaus. About 60,000 stars on GitHub. Apache 2.0 license, so you can use it for client work.

It started from Anthropic's own frontend-design skill and went several steps further. It is not a template pack. There are no pre-made components to drop in. What you get is three things:

01
A vocabulary
23 commands that each name one specific kind of design fix. The words you were missing.
02
A referee
59 rules that scan your code and flag AI tells automatically. Runs locally, no API key.
03
A live mode
Click an element in your browser, get 3 real variants, tune with sliders, pick one.

It works in Claude Code, Cursor, Codex, Gemini CLI, GitHub Copilot, and about 13 tools total.

The real problem it solves: you don't have the words

This is the part most people miss.

When a designer looks at your page, they don't say “make it better.” They say the type hierarchy is flat, the vertical rhythm is broken, the whole thing is monochrome and needs one accent doing real work.

You don't talk like that. So you type “make it pop” and get noise. The 23 commands are those words, handed to you.

Build
/initCapture your product context into PRODUCT.md
/documentWrite a DESIGN.md from your existing code
/extractPull reusable tokens and components out
/shapePlan the UX before any code gets written
/craftDeprecated in v4. Just describe what you want instead
Evaluate
/critiqueUX review with real scoring
/auditAccessibility, performance, responsive checks
Refine
/polishFinal pass before shipping
/bolderAmplify a boring design
/quieterCalm down a loud one
/distillStrip it to the essence
/hardenError states, edge cases, other languages
/onboardFirst-run flows and empty states
Enhance
/animatePurposeful motion, not decoration
/colorizeAdd strategic color to a gray UI
/typesetFix fonts and hierarchy
/layoutFix spacing and rhythm
/delightAdd personality and memorable touches
/overdrivePush way past normal
Fix
/clarifyFix your button labels and error messages
/adaptMake it work on every screen size
/optimizeFix UI performance
Iterate
/liveThe browser mode. Covered below

The docs site shows a before-and-after image for each one. Worth 5 minutes of scrolling just to learn what the words mean. That alone will make you better at directing any AI.

THE V4 HEADLINE

Live mode: the feature that changes the workflow

This is the headline. It landed in version 4 and it works like a visual editor bolted onto Claude.

Here's the actual loop:

  1. You have your site running locally. The normal npm run dev situation.
  2. You type /impeccable live in Claude Code.
  3. Impeccable injects a picker into your page in the browser.
  4. You click any element. A headline, a card, a whole section.
  5. You pick an action from the panel (bolder, quieter, typeset, colorize) or just type what you want in plain English.
  6. It generates 3 variants and hot-swaps them into the live page. You flip through them with arrows. No rebuild, no refresh.
  7. Some variants come with sliders and toggles. Drag the accent amount, flip density from tight to airy, watch it change in real time.
  8. Hit accept and it writes the winner into your actual source files. Slider values included, baked into real CSS.

The part people miss: you can also draw on the element before you hit go. Circle the thing you hate, draw an arrow, cross something out. It reads the annotation and generates against it.

What you need for it to work
A dev server with hot reload (Vite, Next.js, Bun, whatever) or just a static HTML file open in a browser. First run it writes a small config file telling it which HTML file to inject into. Claude handles that setup for you.

The detector: 59 rules that catch slop before you ship

Separate from the commands, Impeccable ships a scanner.

It catches AI-specific tells like purple gradients, radial glow halos, “AI beige,” italic serif headlines, ghost cards, bounce easing, blinking terminal cursors, and fake hero art made of stock geometric shapes.

It also catches normal quality problems: failing contrast, line length, touch targets too small, skipped heading levels, text overflowing its column.

Two things worth knowing:

  • It runs locally. No API key, no tokens burned, no data leaving your machine.
  • You can turn on a hook so it runs automatically every time Claude edits a UI file and reports back what it broke.
/impeccable hooks on

The hook is smart about it. Nagging on every edit made models play it safe, so per-edit checks only flag things that are objectively broken. The full sweep runs once when the work is done.

HOW TO INSTALL

Getting it on your machine

You don't need to know any commands for this. Open Claude Code or Codex in your project and just tell it, in plain English:

Install the impeccable skill found here: impeccable.style

That's it. It goes and gets it, figures out which tool you're running, and installs the right version for you. Same sentence works in Cursor and Gemini CLI.

Want to update it later?
Same deal. Tell it: “update my impeccable skill to the latest version.” It updates itself. New versions ship often, so do this every few weeks.

Already on GitHub Copilot?It's built in. Skip the install and turn it on under Settings, then Experimental.

If you like doing things yourself, the one-line terminal version is npx impeccable install. But you don't need it. Talking to Claude is the whole point.

The exact three commands to run first

Don't start with live. Start here, in this order.

STEP 01
/impeccable init
Teach it your product
Claude interviews you about your product. Who it's for, how it should feel, what you never want it to look like. Writes it all into a PRODUCT.md file. Every command after this reads that file, so the design decisions stop being random.
STEP 02
/impeccable document
Teach it your existing look
If you already have a site, this reads your existing code and writes a DESIGN.md capturing your real colors, type, and spacing. Now Claude stops overwriting your brand with its defaults.
STEP 03
/impeccable polish [your page]
Test it on one real page
Point it at one page you actually care about. Not the whole site. See what it does before you trust it with more. Then go play in live.

One more thing v4 does that nobody talks about

When you ask for a new page, v4 doesn't let the model pick its own favorite direction anymore.

It rolls an outside seed and deals 188 human-reviewed design directionsas challengers against whatever the model came up with. The model's idea has to beat them on merit. Every roll prints a key so you can reproduce it, and you can re-roll as many times as you want.

That's the actual fix for sameness. Not better prompting. Removing the model's ability to default.

When to skip it

Straight talk so you don't waste time.

Backend work
It's a frontend skill. It does nothing for your API.
iOS or Android apps
The commands work and it loads Apple or Material guidelines, but live mode and the detector both need a browser. They sit out on native.
One tiny CSS tweak
Just ask Claude directly. Loading a whole design system for a padding change is overkill.
You have a locked-in design system
Use document and audit only. Don't let it redesign what your team already agreed on.

All Resources

Impeccable on GitHubThe repo. Free and open source, Apache 2.0
impeccable.styleFull docs with before-and-after for all 23 commands
Getting Started guideThe official 3-step setup
Claude CodeDownload it if you don't have it yet
@tenfoldmarcMore AI builds weekly

The Next Step

Guides show you what. AI Builders shows you how.

Inside the community, I walk through every build live, including the stuff that doesn't make it into guides. Regular people (not developers) figuring out AI together, shipping real projects, asking me anything. No fluff, no theory, just the actual work.

Join AI Builders

skool.com/ten-fold