--- slug: app-looks-ai-generated title: "Why Your Vibe-Coded App Looks AI-Generated (and How to Fix It)" excerpt: "Every vibe-coded app starts with the same purple gradient hero, three-column features, and rounded buttons. Here's why, and the four spec fields that change it." primaryKeyword: "vibe-coded app design" publishedAt: 2026-04-25 readingTimeMin: 7 author: "Robert Boylan" tags: - design - vibe-coding - ai-app-builder - branding - app-planning --- Scroll through "I built this with Lovable" posts on X for ten minutes. You'll see the same app eight times. Purple-to-blue gradient hero with a glassmorphic card. Three-column feature row underneath, each with a rounded icon in a pastel circle. A "Get started for free" button somewhere middle-right. Inter as the font, probably. Rounded-2xl on every container. It isn't that any single one of those choices is bad. It's that every vibe-coded app design lands in the exact same visual neighbourhood, and the reader's brain pattern-matches it in about a second. "Oh. Another one." This post is about why that happens, and the small handful of decisions you can make before you start prompting that get your app out of the lookalike pile. It's aimed at the people building with Lovable, v0, Bolt, or pairing those with Cursor or Claude Code on the side. None of this requires you to be a designer. ## Why every AI-built app looks the same When you describe an app to Lovable or v0 and don't say anything about how it should look, the model picks the safest, most-trained design pattern it has seen. That pattern is "modern SaaS landing page, 2023 edition." Purple gradient, three columns, rounded corners, neutral CTA copy. This isn't a bug. It's the model doing exactly what models do: when the prompt underspecifies a thing, it falls back on the average of its training data. And the average of "AI app builder gets asked to make a landing page" is precisely that gradient-and-three-columns layout, because that's what 80% of indie SaaS landing pages have looked like for the last three years. The fix is not a longer prompt asking for "something modern and clean." That phrase also has an average, and the average is the same thing. The fix is being specific in a way the model can't average away. ## The four spec fields that change everything There are four design-related decisions that, if you make them up front and pass them in, push the AI off its default path. They're the ones Draftlytic asks about during the guided creation flow, and they're the cheapest single change you can make to your output. **Design style.** Are you going for editorial (lots of whitespace, big serif headings, magazine-style)? Brutalist (raw, asymmetric, sometimes ugly on purpose)? Glass / neumorphic (frosted, layered, soft)? Something dense and information-rich like Linear? Something playful with hand-drawn elements? Picking one of these by name is wildly more effective than asking for "modern." **Copy tone.** Is the product friendly and conversational? Dry and technical? A little snarky? Earnest? The default AI copy tone is "helpful customer support rep at a B2B SaaS." If that isn't you, say so. The button doesn't have to say "Get started for free." It can say "Try the thing." Or "Take it for a spin." Or just "Open it." **Theme colours.** Three or four hex codes will do. The model defaults to indigo and purple because those colours dominate startup landing pages. Pick anything else and your app stops looking like the others on your scroll. Even just specifying "warm earth tones" or "two-tone, black and a single accent" is enough to break the gradient reflex. **Font family.** Inter is fine. Inter is also what every AI-generated app uses. Switching to a serif like Fraunces for headings, or pairing a sharp sans like Geist with something quirky like Caveat for accents, takes about thirty seconds and instantly differentiates the visual identity. Google Fonts is free. Here's a quick before/after on the colour piece, just to make it concrete. Default Lovable-generated landing page: linear-gradient from #6366f1 to #8b5cf6 across the hero, white text, a single CTA button in the same gradient. You've seen this 200 times. Now imagine the same layout but the hero is a flat warm cream background (#f5f0e8) with deep navy text (#1a2332) and a single coral CTA (#e8624c). Same layout, completely different feeling. The model didn't get smarter. You just told it what colours to use. ## Crib from a real app, not from your taste The other reliable way to escape the default is to give the AI a reference. "Make it look like Linear" gives the model a much more specific target than "make it look modern." But the reference has to fit the product, not your personal taste. A few examples of references worth cribbing from, depending on what you're building: - **Linear** for productivity tools where density and keyboard-driven feel matter. Tight spacing, restrained colour, thoughtful empty states. - **Framer** for anything design-adjacent or marketing-heavy. Big typography, generous whitespace, opinionated motion. - **Notion** for tools meant to feel calm and document-like. Lots of white, single accent colour, friendly illustrations. - **Stripe** for anything payments, finance, or "trust matters." Clean grid, restrained palette, dense documentation pages that still feel readable. - **Vercel** for developer tools. High-contrast monochrome, sharp edges, technical-but-not-cold. The mistake people make: picking the one they personally find prettiest. If you're building a finance app and you reference Notion's cosy whitespace, you'll get a finance app that looks like a journaling tool. The reference should match the product's job, not your Pinterest board. Pick whichever real app does the same job as yours, then say "design language similar to [that app]" in the spec. This works better than describing the design from scratch because the model has actually seen these apps thousands of times in its training data. "Like Linear" is information-rich. "Modern and clean" is information-empty. ## Killing the AI-default UX patterns Visual identity is half the lookalike problem. The other half is a small set of UX patterns that AI app builders default to even when they don't make sense. The autoplay carousel on the hero. You don't need it. Almost no real product does this any more, and it screams "the tool put it there because the prompt didn't say not to." A static hero image, or just the text and a CTA, is fine. The generic empty state. Every AI-built app's empty state is a centered illustration of a dashed-outline box with the text "No items yet. Click 'Create' to get started." It's not wrong. It's just lifeless. An opinionated empty state actually says something about the product. A note-taking app could say "Your first note is the hardest. Then they're free." A habit tracker could say "Day zero. The clock starts when you add one." Specific copy in the spot where every other app is generic does more work than a redesign of the rest of the page. The "Get started for free!" banner CTA, complete with the sparkle emoji. Three problems with this. One: the exclamation mark is doing nothing. Two: every app says this. Three: "free" is rarely the most interesting thing about your product. Try the actual promise instead. "See your first PRD in 90 seconds." "Plan your weekend project before you open Cursor or Lovable." Specific outcomes outperform generic invitations. These three patterns are nearly free to swap out and immediately read as "a person made decisions here," not "a model picked the obvious option." ## The one small visual choice that signals a human made this You don't need a custom design system to break out of the lookalike pile. You need one specific, slightly weird visual decision that the AI would never have made on its own. Pick one of these: - **A custom illustration** in the hero. Even one rough drawing in your own style, scanned in, beats any stock SaaS illustration. The wonkiness is the point. - **An unusual font pairing.** A serif headline with a monospace body. A display font for buttons. Anything that isn't Inter-everywhere. - **Real photos** somewhere on the page. A photo of you. A photo of the desk where you built it. A photo of the actual thing the app is for. Photos signal a human in a way illustrations can't easily fake. - **An opinionated empty state** like the ones above, with copy that actually has a voice. - **A weird microinteraction.** A button that wobbles slightly when you hover. A success toast that says something other than "Saved." A 404 page that's actually funny. One of these is enough. Two is generous. The trap is feeling like you have to redesign everything to escape the AI-default look. You don't. The brain reads "this is a real product made by a real person" off a single specific cue, the same way it reads "this is yet another vibe-coded app" off the gradient. Just give it one specific cue. ## So where does this leave you Most of the AI-generated look isn't an AI problem. It's a spec problem. The model picked the average because nothing in the prompt told it not to. Once you've made four small decisions before you open Lovable or v0 (style, tone, colours, fonts), and added one specific cue that proves a human was involved, your app stops looking like everybody else's first try. The decisions take longer to skip than to make. Most people skip them anyway, because deciding on a colour palette and a reference app is the boring part next to actually seeing the thing built. Then they spend the next afternoon trying to fix the resulting lookalike landing page. The design fields in the [spec that fills the gaps Lovable leaves blank](/blog/good-lovable-app-spec) are the cheapest way out of the AI-default look. Draftlytic surfaces them as part of the guided flow, alongside [the rest of the design questions you'd otherwise skip](/blog/how-draftlytic-picks-questions), so by the time you start prompting, the model has something specific to work from instead of falling back to the average. Pick the colours. Name the reference app. Then build the thing.