Two free tools change everything about what Claude can build. Install them once and every website Claude makes looks like a senior designer built it.
Tool 1UI UX Pro Max
Tool 221st.dev Magic MCP
Cost$0
What You're Installing
Two tools. Massive difference.
Without these, Claude builds functional but generic websites. With both installed, it has access to 50+ design styles, 99 UX guidelines, and a full library of animated components.
Skill 01
UI UX Pro Max
Gives Claude a built-in database of 50+ UI styles and 99 UX best practices. Instead of guessing what looks good, Claude follows proven design rules on every element it builds.
MCP Server 02
21st.dev Magic
Connects Claude to a library of pre-built animated UI components. Every button, card, hero section, and transition is production-ready with real motion built in.
Setup
Three steps. Done.
Do these in order. Once they're installed you never need to do it again — they stay active in Claude Code permanently.
1
Install the UI UX Pro Max Skill
Takes 60 seconds
This skill gives Claude its design knowledge. You install it by finding the GitHub link and pasting it directly into Claude Code.
01 Go to Google and search "UI UX Pro Max skill GitHub"
02 Click the first result — it'll be a GitHub repository
03 Copy the full URL from your browser address bar
04 Open Claude Code and paste this exactly:
claude$install this skill: [paste the GitHub URL here]
✅
Done when
Claude confirms the skill is installed and says it's ready to use. Takes about 30 seconds.
2
Install the 21st.dev Magic MCP
Takes 60 seconds
This connects Claude to a library of animated components. It's a one-command install directly from 21st.dev.
01 Go to 21st.dev/magic in your browser
02 Find the MCP install command on the page and copy it
03 Come back to Claude Code and paste it with this message:
claude$install this MCP server: [paste the command from 21st.dev here]
💡
Note
You'll need a free 21st.dev account to get the install command. Takes 30 seconds to sign up.
✅
Done when
Claude confirms the MCP server is connected. You'll see it listed when you type /mcp in Claude Code.
3
Build Your Website
The fun part
Both tools are now active. Just describe the website you want and Claude will use both automatically. The more specific your prompt, the better the result.
🎨
Pro tip
Always describe the vibe, the colors, the feel, and the animations you want. Claude responds to adjectives — "cinematic", "luxurious", "brutalist", "glassmorphism" all produce completely different results.
Copy These
5 prompts for stunning websites.
Each one produces a completely different style. Copy, paste into Claude Code, and watch what comes back.
Dark Cinematic
Build me a single page website with this vibe:
Style: Dark cinematic — like a high-end film studio or creative agency
Background: Pure black with deep purple and electric blue accents
Hero: Full viewport with a dramatic animated headline that loads letter by letter
Animations: Smooth scroll-triggered reveals on every section, subtle particle effects in the background
Sections: Hero with tagline, Services with hover cards, Portfolio grid, Contact CTA
Fonts: Bold display font for headings, clean sans-serif for body
Feel: Premium, mysterious, impressive
Make it feel alive. Every scroll should trigger something beautiful.
Minimal Luxury
Build me a single page website with this vibe:
Style: Minimal luxury — like a high-end fashion brand or boutique hotel
Background: Off-white cream with black typography and gold accents
Hero: Large serif headline, single striking image, elegant fade-in on load
Animations: Subtle — smooth fades, slow parallax, no loud effects
Sections: Hero, About with large typography, Services in clean grid, Testimonial quote, Contact
Fonts: Elegant serif for headings, light weight sans-serif for body
Feel: Understated, expensive, refined
Less is more. Every element should feel intentional and considered.
Bold Brutalist
Build me a single page website with this vibe:
Style: Bold brutalist — raw, unapologetic, high contrast
Background: White with black borders everywhere, yellow as the only accent color
Hero: Massive uppercase headline, hard grid layout, thick black borders on every element
Animations: Abrupt, snappy — no smooth fades, things should snap into place on scroll
Sections: Hero with big statement, Services in bordered grid, Stats with large numbers, Contact
Fonts: Heavy condensed display font, mono for body text
Feel: Confident, loud, unforgettable
Break conventional design rules. Make it impossible to ignore.
Glassmorphism
Build me a single page website with this vibe:
Style: Glassmorphism — frosted glass cards, depth, light effects
Background: Deep gradient (dark blue to purple) with floating blurred orbs
Cards: Frosted glass with subtle borders, backdrop-filter blur, soft shadows
Hero: Animated gradient background, glass card overlay with headline and CTA
Animations: Floating elements, glowing hover effects on cards, smooth scroll reveals
Sections: Hero, Feature cards in glass panels, Pricing in glass cards, CTA
Fonts: Modern geometric sans-serif throughout
Feel: Futuristic, tech-forward, visually rich
Make the depth and layers the star of the design.
Local Business (Sell This)
Build me a single page website for a local med spa called "Glow Studio" in Toronto.
Style: Clean, modern, premium — think high-end skincare brand
Colors: Soft rose, warm white, gold accents
Hero: Full viewport with a compelling headline about feeling confident, book now CTA button
Animations: Smooth fade-ins, gentle parallax on hero image, scroll-triggered section reveals
Sections: Hero with booking CTA, Services grid with icons, Before/After results, Testimonials, Book appointment form
Fonts: Elegant serif for headings, clean light sans-serif for body
Feel: Trustworthy, luxurious, results-focused
This should make someone want to book an appointment the second they land on it.