Claude Sucks at Design. These 3 Skills Fix It.

This guide first went out in May. A lot moved since. Impeccable went from 18 commands to 23, added a 59-rule detector that scans your code for AI tells, and shipped a live browser mode. It now sits at 61K GitHub stars. Installing is now one pasted message in the Claude Code desktop app, no terminal needed. Frontend Design comes built into the app, so that one needs no install at all. Everything below reflects the current state.

Why Claude designs like every other AI

Claude learned design by reading the internet. The internet is 80% Tailwind defaults, Bootstrap templates, and SaaS boilerplate. So that's the taste it picked up.

Without intervention, Claude will pick the safest font combination on the page (Inter, Roboto, system-ui), use balanced evenly-distributed color palettes, default to centered layouts with three feature cards, add purple gradients on white backgrounds, the #1 AI slop tell, and never commit to a mood or aesthetic.

You don't fix this with one more prompt. You fix it by giving Claude reference material, vocabulary, and a thinking framework it can actually use. Three skills do that. Each solves a different piece.

Impeccable

by Paul Bakaus

The design vocabulary you didn't know you needed

Impeccable's thesis: most people can't fix AI designs because they don't have the words. You look at the page and you know it's ugly but you can't say why. So you type "make it better" and Claude ships the same slop.

Impeccable teaches Claude a real design vocabulary: type hierarchy, contrast, weight, rhythm, grid, spatial density, color theory, motion. Then it gives you 23 commands to steer the result, a 59-rule detector that flags AI tells in your code automatically, and a live browser mode where you click any element and get 3 variants to pick from.

Before the commands, the skill teaches Claude the anti-patterns that make a page feel AI-generated. Flat gradients. Evenly-spaced feature grids. Safe middle-weight fonts. Purple-on-white. You use them by typing a slash, the word impeccable, and the command. Like this: /impeccable polish the pricing page. No code. Just tell it what page and what you want.

Design Motion Principles

by Kyle Zantos

Motion audits from 3 of the best designers on the internet

Motion is where 99% of AI-generated sites fall apart. Everything pops in with the same fade-up. Scattered hover micro-interactions. No sense of physics. No orchestration.

Kyle Zantos' skill trains Claude on the motion philosophies of three of the best designers working today:

The skill audits your codebase's motion through each of their lenses and tells you exactly what's wrong. Not generic "add more animation" advice, but context-aware feedback like "Kowalski would replace this fade with a 200ms opacity + 4px translate-y at ease-out." Then it fixes it.

Frontend Design

by Anthropic

Make Claude think before it codes (the most important one)

This is the skill that runs before Claude writes any code.

The problem it solves: Claude defaults to coding first and designing second. It picks components that exist in its training data, slaps them together, and calls it a page. The design is a side effect of the code, not the other way around.

Frontend Design flips that. It forces Claude to think about design before execution:

• Who is this page for and what emotion should it create?
• What's the dominant mood: minimal, editorial, brutalist, maximalist, warm, technical?
• What's the typographic voice, and what unexpected font choice fits the brand?
• What's the color system? Not a safe palette, but a dominant + a sharp accent?
• What background treatment, motion rhythm, and spatial density match the mood?

Claude makes these design decisions first, writes them down, then writes the code to execute them. The result: every page has a point of view instead of being a pile of components. Arguably the most important skill here. Typography and motion don't matter if the thinking upstream is broken.

The stack: how to use all three together

Each skill solves a different layer. Together they form a real pipeline:

You don't need to pick one. Install all three. They stack cleanly because they live at different points in the workflow: planning → execution → audit.

Install in 30 seconds. No terminal.

You do not need to touch the terminal for any of this. Open the Claude Code desktop app, open your project folder, and paste this message into the chat:

That's it. Claude reads each repo, installs the skill, and tells you when it's done. Give it a minute.

Frontend Design needs zero install.It ships inside the Claude Code desktop app. It's already there the moment you ask Claude to build a page.

Next, teach Impeccable about your business. Type this in the chat:

Claude asks you a few plain-English questions about who your site is for and how it should feel. Answer them once. Every design command after that uses your answers.

From there, you just talk to it. Type /impeccable polish my homepage or /impeccable bolder the hero section. For motion, just say "audit the animations on this page" and the motion skill kicks in on its own.

Comfortable in the terminal? npx impeccable install and npx skills add kylezantos/design-motion-principles do the same thing. Totally optional.

When to skip them

These skills are for when you care about the design. Internal tools, quick prototypes, one-off scripts? Skip them, save the tokens, ship faster.

But anything customer-facing, anything that represents your brand, anything going in front of an audience? Run all three. The difference between "I'm shipping AI slop" and "people think I hired a designer" is these three skills.

All Resources