Submit a tool
Fixes / Vibe Coding

Your AI keeps shipping purple-gradient UI. How to get a polished look

Agents default to the same generic "vibe-coded" look: gradients, glow cards, too many effects. Short answer: 5 steps. 1) Pick a reference, not an adjective; 2) Set design rules in your project file; 3) Use a real component library; 4) Fix the small things; 5) Review on a phone.

Last updated:

The problem: Agents default to the same generic "vibe-coded" look: gradients, glow cards, too many effects.
Asked on X: post 1, post 2

How do I fix this?

  1. Pick a reference, not an adjective

    Show the agent a screenshot or URL of a site whose look you like. "Clean and modern" produces the generic look; a reference doesn't.

  2. Set design rules in your project file

    Write down 2 fonts, 1 accent color, spacing scale and "no gradients, no glow, no emoji in headings" in CLAUDE.md/AGENTS.md or Cursor rules.

  3. Use a real component library

    Ask it to build with shadcn/ui or similar instead of inventing components. Consistency is most of what looks polished.

  4. Fix the small things

    Consistent spacing, aligned edges, readable contrast, real copy instead of lorem ipsum, and empty/loading states matter more than effects.

  5. Review on a phone

    Open it on your phone and screenshot problems back to the agent. Most vibe-coded UIs break on small screens first.

Which tools can do this for me?

shadcn/ui

Copy-in React components with sane defaults; agents know it well.

21st.dev

Community UI components you can drop into React projects.

v0

Vercel's UI generator; good for a first pass you then edit.

Sponsor slot

Open: 1 spot per week

One labeled sponsor for this topic each week; this week's spot is open. See open weeks →

All tools for “Make AI-built UI look less generic” →