The dead giveaways that a site was vibe coded

After reviewing dozens of side projects shipped in the last six months, the pattern is impossible to unsee. You land on a page and within three seconds you know: this wasn't built by someone who sweated over design decisions. It was prompted into existence.

The palette is usually the first clue. Deep charcoal or pure black background, neon green or orange accents, maybe a gradient that screams "I asked for cyberpunk." The font? Almost always Inter or Geist — because those are the defaults every template ships with. Rounded corners at 12px or 16px everywhere. Buttons with that specific transition: all 0.2s ease hover lift. A hero section with a vague tagline like "Build faster with AI" and a CTA that goes to a waitlist form.

None of this is inherently bad. But when you see the exact same combination across five different SaaS landing pages in one afternoon, it stops being a design choice and starts being a fingerprint.

The component library tell

Open dev tools and check the DOM. You'll often find:

• Shadcn/ui components used straight from the docs with zero customization
• Lucide icons at default 24px size
• Tailwind utility classes that read like a tutorial: flex items-center justify-between gap-4 p-6 rounded-xl bg-gray-900/50 backdrop-blur-sm

I've seen the same Card component structure — header, description, footer with a ghost button — copied across projects that have nothing to do with each other. The developer didn't compose. They accepted the first completion.

Motion without purpose

Framer Motion is another giveaway. Every element fades in from opacity: 0, y: 20 with staggerChildren: 0.1. The navbar slides down. The hero text staggers word by word. The feature cards cascade. It looks polished for ten seconds, then you realize nothing responds to your actual input. The animation is decoration, not feedback.

Real motion design answers: what happens when I click? When I hover? When data loads? Vibe-coded motion answers: how do I make this look like a Stripe landing page in thirty seconds?

The copy smells generated

Scroll past the hero. The feature bullets read like a prompt response: "Seamless integration," "Lightning-fast performance," "Enterprise-grade security," "Intuitive dashboard." Zero specificity. No numbers, no use cases, no voice. The FAQ section has five questions nobody would actually ask, answered in perfectly balanced three-sentence paragraphs.

What's missing

The hardest tells are absences:

• No custom illustrations — just abstract blob SVGs
• No opinionated UX decisions — every pattern is "safe"
• No edge-case handling — try resizing to 320px or disabling JS
• No personality in microcopy — error states say "Something went wrong"

Why this keeps happening

The AI workflow most people use optimizes for looking done. You prompt "modern SaaS landing page," get 80% of pixels correct, and ship. The last 20% — the part that makes a product feel crafted — requires taste, iteration, and saying no to defaults. That's the part LLMs can't do for you yet.

I'm not saying don't use tools. I use Claude Code daily for scaffolding, boilerplate, refactoring. But the projects that stick? The ones where the developer treated the AI output as a first draft, not a final deliverable.

You can vibe code the structure. You still have to design the soul.