The styling combination that makes a vibe-coded app stop looking vibe-coded.
Pick this when
Your generated app has the default purple-gradient look and you want it to pass as production.
What makes it different
Naming them in the prompt is the entire fix — no design skill required
shadcn's components are the ones every polished AI-built app is quietly using
Works with the reverse-engineering trick: screenshot a UI you like and ask for it in these terms
What it does
Provides utility CSS and a component library the generators already know
Gives vibe-coding platforms a concrete target instead of their default aesthetic
What it does not do
Common wrong expectations
Doesn't give you taste — it gives you competence, which is a different thing
Where it sits in a stack
Said in the prompt at the start of any browser-generated build.
Shelf
Dev libraries & frameworks · Design & whiteboarding
Our status · not-using
The site's CSS is hand-authored in build_site.py and design-approved as-is.
For your projects
The transferable idea is the reverse-engineering move — screenshot a design you like and ask a model to describe it in system terms. That's how the KB's own design vocabulary could be extended without a redesign.
Tailwind CSS + shadcn/ui