Magic MCP Turns Claude Code Into a UI Designer
The UI Claude Code produces without help is bad. Not "needs polish" bad — genuinely depressing. Gray background, system font, a button that looks like it was styled in 2009. You can write it a perfect prompt and still get something you'd be embarrassed to screenshot.
Magic MCP is the fix. One command in terminal, one restart, and suddenly /ui gives you animated gradient text, glassmorphism cards, floating geometric shapes — the kind of stuff that used to mean three hours in Figma and another two translating it into code.
I ran it on a side project late on a Wednesday night, purely because I was too tired to write CSS. By the time I went to bed, I had a hero section, a pricing table, and a feature grid. All styled. All animated. All actually good.
It's a plugin — technically an MCP server — that plugs into Claude Code (and Cursor, Windsurf, or VSCode). What it does is connect your editor to a library of designer-built React components.
You describe what you want in plain text. Magic opens a browser, shows you several design variations, you pick one, and the code lands in your project. Not a snippet you paste. An actual file, with imports, Tailwind classes, Framer Motion animations, the works.
Without Magic: gray box, Arial, button with no hover state.
With Magic: animated shapes, gradient headings, glow borders on card hover, 3D tilt effects.
That's the whole pitch. It delivers.
Go to 21st.dev/mcp. Sign in with Google or GitHub. The page immediately shows you a ready-made terminal command with your API key already baked in. No digging through a settings panel.
For Claude Code:
claude mcp add magic --scope user --env API_KEY="your-key-here"
For Cursor:
npx @21st-dev/cli@latest install cursor --api-key YOUR_KEY
For Windsurf:
npx @21st-dev/cli@latest install windsurf --api-key YOUR_KEY
Restart your editor. That's genuinely all there is to it — no config files to edit, no JSON to wrangle.
/ui make a hero section with animated gradient text and floating shapes
Magic opens a browser tab with design options. You pick one. The component appears in your project. Done.
Generation is the core use case. Describe a component in natural language, get working React code. The more specific you are, the better the output — more on that below.
Variations — it doesn't give you one option. It shows you several interpretations of your prompt and you pick the one closest to what you had in mind. Saves the back-and-forth of iterating on a single output.
Improvement — you can point it at an existing component file and ask it to upgrade the design. Useful when you've got something that works but looks rough.
Icons and logos — /logo [brand] pulls SVG logos from SVGL, a massive library of branded icons. Way faster than hunting through icon packs.
The commands are simple:
CommandWhat it does/ui [description]Generate a new component/ui improve [file]Redesign an existing component/logo [brand]Find an SVG logo
Vague prompts produce vague results. "Make a nice hero" will get you something generic. Specificity is everything here.
These prompts produced solid output:
/ui dark hero section with floating geometric shapes,
gradient text from orange to amber, animated fade-up on load
/ui 3 feature cards with glow border on hover,
glassmorphism effect, icons and short descriptions
/ui sticky navbar with blur background on scroll,
logo left, nav links right, CTA button, dark theme
/ui pricing table 3 columns, middle column highlighted,
dark theme with gradient accents on the recommended plan
The pattern: style name (glassmorphism, brutalism, minimalist) + specific effect (glow on hover, blur on scroll) + color direction (orange to amber, not just "warm tones"). Give it those three things and the output is consistently usable.
One thing that caught me off guard — if you don't specify dark or light, it sometimes picks for you and picks wrong. Just always state the theme.
best Claude Code plugins and tools
Everyone focuses on the generation feature. The community library at 21st.dev/community/components is actually more useful, and most people skip it.
It's hundreds of components built by designers. Not AI-generated components — actual design work. Animated navigation bars, complex pricing tables, card grids with real visual hierarchy.
Here's the workflow I landed on:
Browse 21st.dev/community/components until you find something close to what you need
Copy the prompt that's shown alongside it
Paste that prompt into Claude Code with /ui
Magic recreates it in your project
Ask it to adjust — swap colors, change copy, add or remove sections
You're not limited to what Magic can imagine from scratch. You're starting from a human designer's component and asking Magic to adapt it. The results are noticeably better than pure generation.
(The component I spent the most time on was a pricing table with an animated gradient border on the recommended plan. Found it in community, had it running locally in about four minutes.)
Yes, and this is where it gets interesting.
Magic gives you components. But components without a consistent design system look like you grabbed a bunch of random pieces from the internet — because you did.
Combining Magic with a design skill like [INTERNAL LINK: UI-UX Pro Max Claude Code skill] changes that. The skill sets rules — typography scale, color palette, spacing system, animation easing — and Magic generates components inside those rules. Instead of random pieces, you get a coherent UI.
The practical difference: without a design skill, you might get one card with an orange accent, another with blue, and a third with gray. With a design skill active, everything derives from the same token set. It feels like a product, not a prototype.
Worth setting up if you're building something you'll actually ship.
Magic is in beta. It mostly works, but here are the failure modes I hit:
Magic doesn't respond at all. Run claude mcp list — check that "magic" appears. If it doesn't, re-run the install command. If it does appear but still doesn't respond, restart Claude Code completely, not just reload the window.
Dependency errors after generation. Magic assumes these are installed:
npm install framer-motion lucide-react clsx tailwind-merge class-variance-authority @radix-ui/react-slot
Run that before you assume anything is broken with Magic itself.
Component renders blank. Three things to check in order: Is "use client" the first line of the file? Is Tailwind configured in the project? Is your Tailwind version v3 or higher? Magic generates v4-compatible syntax that v3 can't parse. That last one killed an hour of my evening before I figured it out.
API key fails. Go back to 21st.dev/mcp and log in before copying the key. If your session had expired when you grabbed it, the key is bad. Happens more often than it should.
Magic MCP is one of those tools where the setup takes four minutes and then you quietly wonder why you spent years writing CSS by hand. The /ui command isn't magic in a hand-wavy sense — it's just a fast path from "I need a component" to "I have a component," with the design already done.
The community library is what makes it worth keeping around long-term. Pure generation has limits. Starting from real design work and asking an AI to adapt it is a different workflow entirely.
Install it. Run one prompt. See what you get.
