Tailwind CSS + shadcn/ui
First met in aicp-c3-basecamp-02 · Dev libraries & frameworks · Design & whiteboarding
Tailwind CSS + shadcn/uiFirst met in aicp-c3-basecamp-02 · Dev libraries & frameworks · Design & whiteboarding
The styling combination that makes a vibe-coded app stop looking vibe-coded.
Your generated app has the default purple-gradient look and you want it to pass as production.
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
Provides utility CSS and a component library the generators already know
Gives vibe-coding platforms a concrete target instead of their default aesthetic
Doesn't give you taste — it gives you competence, which is a different thing
Said in the prompt at the start of any browser-generated build.
Dev libraries & frameworks · Design & whiteboarding
The site's CSS is hand-authored in build_site.py and design-approved as-is.
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.
current
lovable: the named fix for its default look
v0: v0 generates in exactly this stack
| Session | Coverage | Moment | What happened |
|---|---|---|---|
| Session 14: Claude Code — Advanced Workflows | demonstrated | 0:58:09 | Component tour, theming; installed into the build via CLI docs paste + skill from skills.sh (230k+ installs) |
| Session 18: Nano Banana + Veo 3.1 Multi-Shot Video — UGC Genie, an AI-UGC Product Built Live | demonstrated | Including the full Vercel→Next.js→shadcn→TweakCN genealogy told as a story ('a guy named Shad who works at Vercel') | |
| Session 19: Content Strategy Pipeline — the YouTube Growth Stack, Built by an Agent Team of Chats | demonstrated | Block + theme recipe again; first render 'really bad,' recovered with a safer sidebar block | |
| Session 20: Complete LinkedIn Agency Automation — Carousels + Newsletter from One Content System | demonstrated | Dashboard block; a learner-contributed theme adopted over Claymorphism mid-session | |
| Session 21: Advanced Data Extraction from PDFs — Parsing, OCR, and the Token-Free Product | demonstrated | Dashboard block; the foundation-before-theme lesson | |
| Session 22: Automate Admin Tasks — Advanced RAG (Enterprise 'Internal Perplexity' Built Live) | demonstrated | Dashboard block + TweakCN 'Cyberpunk' theme, dark-only | |
| Basecamp 2: Vibe Coding | explained | 0:31:57 | Fix for the identical 'purple gradient' Lovable look; name it in prompts or reverse-engineer screenshots of UIs you like |
| Basecamp 2: Vibe Coding | explained | 0:33:58 | With Tailwind, the combo that makes vibe-coded apps look like production apps |