Why vibe-coded websites look cheap

The problem is not the AI tool. It is the absence of creative direction. Vibe coding lets you build software in plain language, and the tools are excellent at logic and structure. Where they are inconsistent is visual design. Describe a style in words ("clean and minimal," "modern SaaS," "professional") and the model fills in the blanks from its most common training examples. Those examples share a visual identity because they were produced quickly and at scale, not because they represent the full range of what web design can be. The output is adequate. It is not distinctive.

The six visual tells of a vibe-coded website

These are the specific signatures that appear when no design reference is given. Each one is fixable. Most vibe-coded websites carry all six simultaneously.

1. Inter at default weight and tracking

Inter is the default typeface in Tailwind CSS and shadcn/ui, which means it appears in the overwhelming majority of open-source React components and Tailwind examples online. The tell is not Inter itself (a good typeface in the right context) but how AI applies it: no negative letter-spacing on display headings, no weight variation at different text sizes, line-height locked at 1.5 across the entire page. Well-crafted products apply tracking of -0.03em to -0.05em at large display sizes and vary weight meaningfully between hierarchy levels. The AI default does neither.

2. The indigo-to-purple gradient hero

Specifically: from-indigo-600 to-purple-600 as a hero background, or a near-black hero with a diffuse indigo glow emanating from the centre of the viewport. This palette was used by the first wave of AI-native SaaS products in 2022 and 2023 and is consequently overrepresented in every model's training data relative to the full design space. Without a different colour reference, almost every dark hero section a vibe coding tool generates lands somewhere in the indigo-to-violet range. The alternative is a Stripe-style gradient hero: a layered CSS radial gradient built from desaturated pastels at low opacity over a near-black base, which reads as premium and distinct rather than AI-default.

3. The pill badge above the headline

A rounded-full element, positioned directly above the hero headline, reading "New," "AI-powered," or the name of a recent feature launch. The styles are effectively identical across every generated site: bg-indigo-50 text-indigo-600 text-xs font-medium px-3 py-1 rounded-full. It is a shadcn/ui UI convention that appears in nearly every component library example AI tools have been trained on. It arrives by default because no prompt said not to include it.

4. Three feature cards in a grid

The default features section is a three-column grid. Each card contains a rounded icon container with an indigo-50 background, a Lucide icon in indigo, a heading of three to five words, and two lines of benefit copy. "Save time." "Scale with confidence." "Built for teams." Three columns because that is the number that fills a 1200px container without visual awkwardness on desktop. The layout is not a design decision. It is the path of least resistance.

5. Placeholder social proof

A statistics row positioned between the hero and the features section: "50,000+ users," "4.9/5 rating," "99.9% uptime." These numbers are generated as placeholders and left in place. They carry the same visual treatment as real data: bold, oversized, centred. Visitors who spend more than ten seconds on the page notice that a product that launched last month is unlikely to have 50,000 users. The numbers undermine rather than build credibility.

6. Uniform 12px border-radius on every element

Tailwind's rounded-xl is 12px. It is the default in most generated output and is applied uniformly across cards, buttons, input fields, images, pricing tables, and modals. The visual effect is that every element on the page has the same softness, regardless of its function or visual weight. Well-designed products calibrate radius by context: tighter on form inputs (4px), medium on buttons (6–8px), full only on pill badges and avatars. Uniform radius reads as a template that was not adjusted.

Why every vibe coding tool produces the same output

The training data for AI code generators is dominated by a small number of ecosystems: Tailwind CSS, shadcn/ui built on Radix, Lucide icons, Vercel deployment templates, and the React component examples documented across GitHub and developer tutorial sites. These ecosystems carry strong embedded opinions: a specific spacing scale, a specific colour palette, a specific component library hierarchy.

When a model generates a landing page from a text description, it reproduces the patterns most common in its reference set. The description "modern SaaS landing page" matches thousands of training examples that share the same visual characteristics. The model is not selecting indigo gradients and Inter because they are the optimal choices. It is selecting them because they are the average of what it has seen.

Why a better text description does not fix it

The instinct is to write a more specific style prompt: "avoid gradients," "use a serif display typeface," "inspired by the Stripe homepage." This shifts the output but does not stabilise it. Every session produces a different interpretation of the same description. The design is not reproducible because it is inferred each time rather than read from a fixed source.

A design reference solves this because it contains explicit values, not intentions. Paste actual HTML with specific font sizes, specific hex colour codes, specific spacing values, and specific border radii into the prompt. The model does not infer those values. It reads them and applies them. The design is now stable across sessions because the values are fixed, not generated.

This is how experienced vibe coders work. They paste a hero template or a features template to establish the visual baseline, then instruct the AI to adapt the copy, data model, and product logic on top of it. The AI handles the parts it performs well: structure, logic, and iteration. The template provides what the AI is systematically inconsistent at: specific visual decisions that hold across the entire build.

How to apply a design reference in practice

The process is the same in Bolt, Replit, Lovable, Claude Code, and Cursor. Copy a Moon template and paste it at the start of your prompt, before any other instructions. Then state the changes: update the headline, change the product name, adjust the primary colour. The AI inherits every design decision embedded in the template: the type scale, the spacing rhythm, the colour values, and the radius calibration. It no longer needs to infer any of them.

The output does not look like a vibe-coded website. It looks like the template, adapted to your product. That is the only method that produces reliable, repeatable results that are visually distinct from the defaults described above.