* MIKE MEANS BUSINESS // THE 21 DROP
↳ You commented 21
Every AI site looks
the same. Here's the
free fix.
Your AI-built site works. It just looks like everyone else's. Same centred hero, same gradient, same rounded buttons.
That is not a prompting problem. It is a parts problem. The model keeps reaching for the same default components. Change the parts, change the site.
A — What 21st.dev actually is
21st.dev is a library of real React and Tailwind components, built by actual designers and engineers and published like npm packages. Think of it as a parts shop for your front end. Most of it is free to browse and copy, and you own anything you pull. No licence strings.
B — The parts that betray an AI build
These are the six pieces that give the game away, and the section on 21st.dev that fixes each. Browse them, grab the one that fits.
Hero sections
The dead giveaway. Look for an off-centre layout or a real product shot, not a headline floating over a gradient.
Navbars
Default nav screams template. Grab one with a considered layout and states that actually respond on hover.
Pricing tables
Most AI pricing is three flat cards. Find one with a monthly/annual toggle and a highlighted tier.
Dashboards
Hard to fake well. Pull a real layout with proper spacing and honest data density.
Login / auth
The page everyone skips and everyone notices. Pick one with a split layout or a branded panel.
Testimonials
Swap the generic three-up grid for a moving marquee or a layered card stack.
C — Way 1
Browse, copy, paste
No setup. No key. Best for grabbing one piece.
1
Open
21st.dev and find a component you like.
2
Hit Copy code (or Copy prompt).
3
Paste it into Claude and say: use this as my hero / pricing / nav.
Free, instant, one part at a time.
D — Way 2 ▸ the real payoff
Wire it into Claude with /ui
Connect 21st.dev to Claude once. Then type /ui, describe what you want, and it pulls real components and builds them live in your project. This is the part the reel was about.
2
Install it
Run one command in your terminal.
terminal
$ npx @21st-dev/cli@latest install claude --api-key YOUR_KEY
Swap claude for cursor, windsurf, or cline if that is your editor.
3
Or wire it by hand
Prefer editing the config yourself? Drop this into your MCP settings.
mcp config
{
"mcpServers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
}
}
}
4
Restart and build
Restart Claude, then type /ui and describe the component. It generates a few variations. Pick one and it writes the files for you.
now try this
/ui a pricing table with three tiers and a monthly/annual toggle
Builder note: each /ui build spends a credit. For a single one-off, copy-paste from the site (Way 1) costs nothing. Save your credits for the pages that actually matter.
What it costs
Browsing and copy-paste are free, no key needed. The MCP runs on monthly credits.
Max
$100
2,000 credits / mo
Start free and see if it earns the upgrade.
Build one page with this and reply to tell me which component you grabbed. I read every reply.
Next issue: the three /ui prompts that build a full landing page in one sitting.
PS. This is the kind of system I build for local businesses at OptiMAX. Want it done for you instead of by you? optimax-ai.com
*
@mikemeansbusiness_ai
Mike Means Business