If you've used Claude Code to build a frontend, you already know the problem.
Every landing page comes out looking the same. Inter font. White background. Blue accents. Soft shadows. Static layout. Zero personality.
It works. But it's forgettable. And your users can smell AI-generated UI from a mile away.
I spent a week figuring out how to fix this. The result: same prompt, same model, completely different output. Here's exactly what I did.
The Problem
Claude Code is incredible at building functional UIs fast. But it has no design taste by default. It reaches for the same safe choices every time:
System fonts (Inter, sans-serif)
White backgrounds with blue primary colours
Box shadows everywhere
Static layouts with no motion
Every component written from scratch
The result looks like every other AI-generated site on the internet. Or worse — a government website.
The Fix: 2 Installs + 1 File + 1 Prompt
Here's the exact setup that transforms Claude Code's output from generic to production-grade.
Step 1: Install Anthropic's Frontend Design Skill
Anthropic quietly released an official frontend skill that most developers don't know about. It's in their GitHub repo and it fundamentally changes how Claude approaches design.
In your Claude Code terminal, run:
/install-github-skill anthropics/claude-code plugins/frontend-design/skills/frontend-design
What this does:
Tells Claude to commit to a bold aesthetic direction before writing code
Bans generic font choices (Inter, Roboto, Arial)
Forces distinctive typography, colour palettes, and spatial composition
Adds motion and animation guidelines
Prevents what Anthropic internally calls "AI slop"
This skill alone makes a noticeable difference. But the real magic is step two.
Step 2: Drop the CLAUDE.md File in Your Project
I built a CLAUDE.md file that gives Claude access to the entire 21st.dev component library — 1,400+ production-ready shadcn/ui components, categorised and linked.
Grab it free from GitHub:
👉 https://github.com/mikeoptimax/claude-frontend-skills-pack
Download the CLAUDE.md file and drop it in your project root. That's it. Claude Code reads it automatically on every session.
What's inside:
The full 21st.dev component catalog (verified counts):
130 Buttons
102 Inputs
79 Cards
73 Hero Sections
62 Selects
45 Sliders
40 Accordions
38 Tabs
37 Modals/Dialogs
36 Feature Sections
34 Calls to Action
34 Calendars
30 Tables
30 AI Chat Components
17 Pricing Sections
15 Testimonials
15 Shaders
14 Footers
11 Navigation Menus
And 20+ more categories
Each category links directly to 21st.dev so Claude can browse, select, and install the right component with one command:
npx shadcn@latest add "[component-url-from-21st.dev]"
Typography rules:
Banned: Inter, Roboto, Poppins, Montserrat, Open Sans, Playfair Display
Recommended display fonts: Sora, Elms Sans, Vend Sans, Zalando Sans
Recommended body fonts: Manrope, Figtree, Source Sans 3, Stack Sans Text
Recommended mono: SUSE Mono, JetBrains Mono
All loaded via
next/font/googlefor automatic optimisation
Design and motion rules:
Framer Motion scroll reveals and staggered animations
Next.js 15 App Router patterns (Server Components by default)
WCAG 2.1 AA accessibility standards
Semantic HTML enforcement
Wiring instructions:
The file explicitly tells Claude to actually USE installed components — not just install them and write custom code anyway. This was a real problem I ran into during testing.
Step 3: Tell Claude Your Style
Now just tell Claude what aesthetic you want. The skill and CLAUDE.md handle the rest.
Example prompt:
Rebuild this UI. Use the frontend-design skill and the 21st.dev
components from CLAUDE.md. Make it neobrutalist with Sora for
headings and Manrope for body. Add Framer Motion scroll reveals
and staggered animations.
You can use any style direction:
Neobrutalist (hard borders, offset shadows, bold colours)
Dark mode minimal (clean, spacious, subtle motion)
Retro-futuristic (gradients, glow effects, monospace accents)
Editorial/magazine (asymmetric layouts, serif headings)
Luxury/refined (muted palette, elegant typography, micro-animations)
Claude picks components from the 21st.dev catalog that match your direction.
The Result: Before & After
I tested this on the same landing page with the same prompt.
Before (default Claude Code):
System fonts (Geist/sans-serif)
White background, blue brand colour
Soft box shadows, zero border-radius creativity
Static layout, no motion
Every component written from scratch
Functional. Forgettable.
After (skills unlocked):
Sora 800 for display headings, Manrope for body, SUSE Mono for data labels
Warm parchment background with grain texture
Full neobrutalist aesthetic (2px black borders, offset shadows)
Framer Motion scroll reveals and staggered card entries
Animated number counters triggering on viewport entry
Scrolling ticker logo bar
Interactive testimonial panel (21st.dev animated-testimonials component)
Floating navigation (21st.dev floating-navbar component)
Diagonal-cut CTA block
Same prompt. Same model. Completely different output.
Why This Works
The key insight: Claude Code doesn't lack capability — it lacks direction.
Without instructions, it defaults to safe, generic choices. The frontend-design skill gives it permission to be bold. The CLAUDE.md file gives it a library of real components instead of writing everything from scratch. And your style prompt gives it a clear target.
It's the difference between asking an artist "paint something" versus "paint something neobrutalist with warm earth tones and hard geometric shadows."
Quick Start (2 Minutes)
Install the frontend skill:
/install-github-skill anthropics/claude-code plugins/frontend-design/skills/frontend-design
Grab the CLAUDE.md file:
👉 https://github.com/mikeoptimax/claude-frontend-skills-packDrop it in your project root
Prompt Claude with your style direction
That's it. Four minutes from generic to production-grade.
Resources
Free GitHub repo: https://github.com/mikeoptimax/claude-frontend-skills-pack
21st.dev component browser: https://21st.dev/community/components
Anthropic's Claude Code plugins: https://github.com/anthropics/claude-code/tree/main/plugins
If this helped you, reply to this email and let me know what you built. I'm collecting before/after screenshots for a follow-up post.
— Mike