5 Design Skills That Stop Claude Code Building 2012 WordPress.

Install once. Use forever. Stop generating UI from scratch.

You're here because you commented DESIGN. Welcome.

If you've ever asked Claude Code to build a landing page and got back the same purple-gradient-on-white, Inter-font, glassmorphism-everywhere AI slop — that's not Claude's fault. It's missing context.

Anthropic call it distributional convergence — the model defaults to the statistical centre of its training data because it has no design opinions of its own. Without guidance, you get generic. With these five skills installed, you get production-grade.

Each one bolts onto Claude Code. None take more than 5 minutes to set up. Here's what they do, why they matter, and how I actually use them.

Impeccable — The Design Vocabulary

What it is: 23 slash commands (originally 18) that give Claude a shared design vocabulary. /audit, /critique, /polish, /distill, /quieter, /bolder — each one is a real design discipline encoded as a command. Built by Paul Bakaus. Open source, 10K+ GitHub stars.

Why it matters: Most of us can't describe what's wrong with a UI. We just feel it's off. Impeccable gives you the words. Tell Claude "make this section quieter so the CTA earns the eye" and it actually knows what that means.

Install it:

How I actually use it:

1. Run /impeccable teach once per project. It runs a 5-minute interview about your audience, brand, anti-references. Saves to PRODUCT.md and DESIGN.md at the project root. Every command reads it after.
2. After Claude builds a page, run /critique landing. You get a numbered design review — hierarchy, clarity, emotional resonance.
3. Then /polish landing for the final pass before shipping.
4. Anything boring? /bolder. Anything overcooked? /quieter.

Pro tip: There's also a standalone CLI npx impeccable detect https://yoursite.com that scans live URLs for AI slop tells (purple gradients, cards-in-cards, side-tab borders). Run it on your competitors. Find what they're doing wrong.

Design Motion Principles — The Animation Auditor

What it is: A Claude Code skill that audits motion design through three of the best UI/UX motion designers alive — Emil Kowalski (Vercel/Linear), Jakub Krehel, and Jhey Tompkins. Each has a different philosophy. The skill picks which one to weight based on what you're building.

Why it matters: Motion is the line between "this looks AI" and "this looks shipped." Without proper transitions, your conditional UI changes flash on/off like a 2008 Geocities page. This skill finds every place that's missing animation and tells you what's broken.

Install it:

How I actually use it:

1. After Claude builds a page or component, prompt: "Audit this motion design". The skill auto-activates.
2. It scans for conditional renders without AnimatePresence, ternary UI swaps, dynamic styles without transitions — all the places motion should be but isn't.
3. You get a per-designer audit: what Emil would say, what Jakub would say, what Jhey would say. Categorised by severity (Critical / Important / Opportunities).
4. It checks prefers-reduced-motion by default — saves you the accessibility audit.

Frontend Design — The Anthropic Foundation

What it is: Anthropic's official frontend-design skill. 277,000+ installs as of March 2026. Forces Claude to think before it codes — purpose, tone, constraints, differentiation — before a single line gets written.

Why it matters: This is the foundation everything else builds on. It explicitly bans Inter, Roboto, Arial, Space Grotesk (overused by AI), purple gradients on white, cards-inside-cards, glowy AI-feeling everything. Then pushes Claude toward bold typography, asymmetric layouts, generous negative space, and high-impact motion moments instead of scattered micro-interactions.

Install it:

How I actually use it:

1. Install once globally. It activates automatically the moment you ask Claude to build a component, page, or app.
2. Before coding, it asks: What's the purpose? Tone? Constraints? Differentiation? Answer fast and Claude commits to a real aesthetic direction instead of defaulting to slop.
3. Pair it with Impeccable. Frontend-design = the foundation. Impeccable = the steering layer on top.

Design Extract — Steal Any Site's Design System

What it is: Point it at any URL. It runs Playwright under the hood, scrapes computed CSS, and outputs the full design system as DTCG tokens — colors, typography, spacing, shadows, motion durations, easing curves, the lot. Drops them straight into your project.

Why it matters: Stop describing what you want. Show Claude what you want. Like Stripe's gradients? /extract-design stripe.com. Now Claude has Stripe's exact tokens. Like Linear's motion language? Same trick. You're not copying — you're matching the architecture so Claude has a real reference instead of guessing.

Install it:

How I actually use it:

1. Pick a reference site whose design DNA you want to match. (Not steal — match the quality.)
2. In Claude Code: /extract-design https://linear.app. It writes 17+ files into ./design-extract-output/: tokens, CSS variables, even an HTML "design report card."
3. Tell Claude: "Use the tokens in design-extract-output/ as the foundation for my landing page." You're now building on Linear's architecture without copying their UI.
4. Bonus: designlang grade https://yoursite.com spits out a letter grade for your existing site across 8 design dimensions. Brutally honest.

21st.dev Magic — Production Components on Demand

What it is: An MCP server that gives Claude Code access to 21st.dev — the largest registry of shadcn/ui-based React Tailwind components, used by 1.4M developers. Real components, made by real designers. /ui create a hero section and you get a curated, production-ready component dropped into your project. Like v0, but inside Claude Code.

Why it matters: Stop generating UI from scratch. Why have Claude reinvent a navbar when 200 designers already shipped beautiful versions you can pull in? This is the difference between a hobby project and a product.

Install it:

1. Sign up at 21st.dev and grab your API key.
2. Add to your .mcp.json:

How I actually use it:

1. Project needs a navbar? /ui create a sticky navbar with mobile menu.
2. Need a hero with animation? /ui hero section with gradient and CTA.
3. Pricing table? Bento grid? Footer? /ui [whatever]. The component lands in your project, fully typed, shadcn-compatible.
4. Then steer it with Impeccable's /polish to align it with your design tokens.

Install in this order. 15 minutes. One time.

1. Frontend Design (foundation) — install globally. It's the soil everything grows in.
2. Impeccable (steering) — install globally. Run /impeccable teach in every new project.
3. Motion Principles (audit) — install globally. Use as the last QA pass before shipping.
4. Design Extract (reference) — install globally. Use at the start of any new project to pull a reference design system.
5. 21st.dev Magic (components) — install per project (MCP server). Use for any component you don't want to build from scratch.

The full workflow, end to end

That's it. 7 steps. About 30 minutes from blank project to production-grade UI. No more 2012 WordPress nephew energy.