Make Your App Stop Looking AI-Generated
The component library I point Claude at — and exactly how to hand it a part
The Idea
There's a dead giveaway that an app was vibe-coded: the same fonts, the same grey cards, the same layout as every other AI-built app. It's not Claude being lazy — it's that when you don't give it anything to copy, it designs from memory, and everyone's getting the same memory.
The fix is to stop asking Claude to invent design and start handing it parts to copy — components built by people who can actually design. Claude is far better at matching a pattern you show it than imagining one from a description. Same rule as prompting with examples; this is just examples for your UI.
The Library
21st.dev is a community library of thousands of React components and templates — heroes, pricing sections, cards, buttons, whole landing pages. Their own line is "crafted React components, not AI slop", which is exactly the point: you're browsing work by people who design for a living, and taking the bits you want.
Browse 21st.dev →How To Hand One To Claude
Browse like a catalogue, copy the component
Scroll until something makes you stop — a hero, a pricing section, a button that feels expensive. Open it and copy what it gives you: the component's code (some components come with a ready-made prompt for AI editors — either works).
Paste it into Claude Code and say where it goes
Don't just paste and hope — tell it the job. Something like:
Use this component for my landing page hero.
Keep the animation exactly as it is, but adapt the colours,
fonts and copy to match the rest of my site.Review it like anything else Claude ships
Check it on your phone, click everything, and make sure the styling actually blends with the pages around it. One imported component that ignores your colour scheme looks worse than the grey cards did.
The Honest Bit
It's a community library, so quality varies — judge with your eyes, not the download count. The components are React and Tailwind, which means they're for web apps (if Claude built your site, they'll almost certainly slot in; if you're building something else, this isn't your library). And check the licence on a component before you ship it in something commercial — terms differ per component, and thirty seconds of reading beats an awkward email later.
One more: a library upgrades parts — it won't design your whole product. If every page uses a different beautiful component with different spacing and colours, you've traded "generic" for "jumble". Pick a few that share a feel, and let Claude adapt them to one scheme.