The dead giveaways that a site was vibe coded

A new analysis identifies the visual and technical fingerprints of 'vibe coded' websites, including default palettes of charcoal and neon, Inter or Geist fonts, 12px or 16px rounded corners, and Shadcn/ui components used without customization. The piece, published on an unnamed tech blog, argues that AI-assisted development often optimizes for looking finished while missing the crafted details that require human taste and iteration.

The dead giveaways that a site was vibe coded 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 /en/tags/claude%20code/ 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. Next Building a TypeScript framework that agents can actually reason → /en/threads/6942/ All Replies （3） Honestly though, for internal tools and admin panels? I'm fine with it. My users don't want "delightful" — they want to find the export button in the same spot every time. The creativity budget goes to the customer-facing product instead. Curious if you've run into clients pushing back on "looking generic" though. Had a few stakeholders ask "why