Claude Sucks at Design. These 3 Skills Fix It.

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 solving 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 — and gives you 18 slash commands to steer the result.

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. Run /teach-impeccable once and Claude picks up your design context.

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 all three in 30 seconds

Easiest path — tell Claude Code in one message:

Prefer the manual route? Use the official skill installer for Impeccable and Design Motion Principles:

For Frontend Design, run /plugin inside Claude Code and enable the frontend-design plugin from the official Anthropic marketplace.

After install, run /teach-impeccableonce in your project so Impeccable picks up your codebase's design context.

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