Hey, it's Cindy 🌱 You commented sites, so here are all three, plus the order I actually use them in and the prompt I paste to make them fit together.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
the outcome
What you're getting
You provide a design effect you like. This performs a copy of that component's prompt. You receive the effect running in your own site, in your own colours, without writing the code.
💡 The order matters. Pick the design language first, then the components. Doing it the other way round is how you end up with a page of effects that don't belong together.
start here
designprompts.dev, for the whole look
Free, and it's a style explorer rather than a component library. You pick a design language and it gives you the prompt that produces that look consistently.
Go to designprompts.dev. It has to be the .dev, because designprompts.com is a parked for-sale domain.
Browse the styles and pick one that fits what you're building. Monochrome, SaaS and sketch are all in there.
One-click copy the prompt.
Paste it into Claude Code before you add any components, so everything after it inherits the look.
the biggest library
21st.dev, for the parts
Over 12,000 React components, templates and shadcn themes, built by design engineers. Their own words: "Hit Copy prompt on any component and paste it into your AI tool, Cursor, Claude Code, v0, Lovable."
Paste it into Claude Code, Codex or Cursor. You're handing over the intent, not a file you have to place.
⚠️ Free tier is two component copies a day. Membership unlocks unlimited. Worth knowing before you plan a build around it.
for hero sections
Aceternity UI, for the show-off pieces
Around 150 components, strongest on hero sections, backgrounds and scroll effects. Free, with a one-time paid all-access tier for templates.
Go to ui.aceternity.com and open the component you want. Open it properly, because the copy prompt button is on the individual component page, not on the index.
Hover the preview to see the effect actually run.
Hit Copy prompt and paste it in.
the part that makes it cohesive
How I combine them
Components are parts. Taste is every decision around them, the spacing, the type scale, how restrained the colour is. A card doesn't carry any of that, which is why a page built from three great components can still look like a mess.
So after you've pasted your components in, run this:
Here's my site. I've pulled components in from a few different libraries and they don't feel like one design yet.
Using [the design language prompt I gave you earlier] as the source of truth, go through the whole page and make it cohesive:
- One type scale across everything, and tell me what it is
- One spacing system, applied consistently
- Reduce to a maximum of two accent colours, and tell me which you kept and why
- Make the motion consistent: same easing, same duration family, so nothing feels borrowed
- Flag anything that fights the design language, and either restyle it or tell me to cut it
Then show me a before and after list of what you changed.
be honest with yourself
What to watch for
More effects is not better. Two or three deliberate ones beat eight. The failure mode here isn't a bad component, it's too many good ones.
Check the free tier before you plan. 21st.dev gives two copies a day free, Aceternity keeps templates behind a one-time payment, designprompts.dev is free.
Watch the domain. designprompts.dev, not .com.
Read what you paste. A copied prompt is still a prompt. If it describes a dark neon aesthetic and your site is warm and light, tell Claude to adapt it rather than accepting the default.