We've built a MCP that gives Claude Code, Cursor, and Codex design superpowers. Here's how it works:
It connects your AI agent to 21st, a catalog of 12,000+ components, templates, and themes made by the best design engineers & ui libraries across the internet
Right now every coding agent ships the same site:
- The same ugly & generic gradients, ui components, logos, etc
- That's AI slop, and it isn't the model's fault. It has just never seen what a professional would build instead, so it guesses every part from scratch.
Think of it as a parts bin full of work by people who design for a living, and your agent reaches into it instead of guessing.
Set it up with two lines in your terminal:
1. npx
@21st-dev/cli@latest init
2. npx skills add 21st-dev/skill
(swap claude for cursor or codex)
Then ask for what you need, in plain words:
- "Make my hero section like Linear's"
- "Swap my pricing for one with a monthly/yearly toggle"
- "Give this page a dark theme that isn't grey"
- "make this submit button look better"
What happens next:
> your agent searches the 21st catalog via MCP and comes back with a few options, each with a preview and the name of the design engineer who made it (in Claude they show up as cards you can click through)
> you pick one and it installs the source into your project, matched to your theme
> the code lands in your repo, so "make it darker" or "drop the animation" works like any other ask
Connect the 21st MCP to your AI agent, and it will generate like a professional designer
Link to the mcp below 👇