Lovable Vibe Code Audit

Lovable Vibe-Code Audit

Lovable (and similar AI builders) all draw from the same starter patterns, component defaults, and default brand colors. A project that skips a deliberate polish pass reads as obviously AI-generated to anyone who's seen a few of these sites — which undermines client trust even when the underlying functionality is solid. This skill is the checklist for catching those tells before a client or the public sees them.

Every item below should be treated as found → flag it → tell the user it should be removed/fixed, not silently noted. The goal of the audit is a punch list, not a vibe check you keep to yourself.

How to run the audit

1. Fetch the live page, not just the Lovable preview iframe — view-source or fetch the actual rendered HTML for <title>, favicon, and meta tags.
2. Capture screenshots at three widths — desktop (1440px), tablet (768px), mobile (~375px). Most responsiveness breaks only show up at the actual breakpoint, not a resized desktop browser window.
3. Click every footer link — Terms, Privacy, credits/attribution — confirm each lands on a real page with real content, not #, a 404, or a copy of the homepage.
4. Read the hero and section copy out loud — AI-formula phrasing is easier to hear than to spot by eye.
5. Report findings grouped by category (below), each with: what you saw, where (page/section), and what to change it to.

Checklist

Browser chrome / site identity

• Default favicon (Vite/React/Lovable placeholder icon) instead of a custom one
• Generic <title> left as something like "vite-react-app" or "lovable-project", or no OG image set
• Leftover "Edit with Lovable" badge/watermark still visible on the published site
• Site still lives on a *.lovable.app preview subdomain instead of the client's custom domain

Copywriting tells

• Heavy use of dashes — hyphens or em-dashes — as a sentence-break/aside punctuation habit. This is one of the single biggest "written by AI" tells, arguably bigger than any individual word choice. Flag any copy that leans on " - " or " — " repeatedly to link clauses instead of a period, comma, or restructured sentence. Note: this is about the punctuation habit, not about dashes existing at all — one dash in a whole page is normal writing, a dash in every other sentence is the tell.
• Em-dash-heavy AI writing rhythm; "not just X, it's Y" / "isn't about X, it's about Y" sentence formulas
• Generic template headlines that could sell any product — "The all-in-one platform for X", "Build X without Y", "Save time and grow your business"
• Unverifiable placeholder trust stats ("100+ happy clients", "Trusted by teams everywhere") with no real source behind them
• Placeholder contact details (you@example.com, (555) 555-5555) left in from scaffolding

Footer / trust signals

• No credits, and no Terms/Privacy links at all
• Terms/Privacy links present but dead — href="#", 404, or a stub page with no real content
• CTAs that go nowhere — "Book a call" that doesn't open a real scheduler, buttons with no handler

Visual design / branding

• Lovable's own blue↔purple gradient reused verbatim in the site's own branding — signals the palette was never customized away from the builder's default
• Soft decorative blur/glow orbs behind headlines — a stock Lovable/shadcn hero pattern
• Heavy glassmorphism (frosted-glass cards, backdrop-blur) used as the site's only visual identity, with nothing else distinguishing it
• Uniform "pill everything" border-radius on every button/card/image with no hierarchy
• The eyebrow dot-badge pattern — "🟢 Label · Label · Label" — used as decorative furniture above a headline; extremely common shadcn/Lovable starter output
• The same accent-color glow/shadow reused on every element regardless of purpose, rather than used deliberately
• Not a tell: an underline used to emphasize a specific word or phrase within body/headline text is a legitimate, common typographic technique — don't flag it on sight. Only raise it if the underlined phrase is arbitrary/meaningless (emphasis with no real reason) rather than genuinely calling out the key word.

Layout / structure

• Templated 3-column icon-in-circle grid repeated identically across unrelated sections (features, services, testimonials all clearly the same component reskinned)
• Identical fade/slide-up scroll animation applied to every section — no purposeful motion design, just the framer-motion default everywhere
• Elements not aligned to a consistent spacing/grid rhythm, especially visible at odd viewport widths

Responsiveness

• Actually broken layout at real mobile/tablet breakpoints (checked per step 2 above, not just a resized desktop window) — overlapping text, overflow, unreadable line lengths, nav that doesn't collapse

Imagery

• Stock or AI-generated headshots/illustrations that don't match the brand's actual style, or that are visibly inconsistent with each other (mismatched lighting, rendering style, aspect ratios)
• Default lucide-react icons at stock size/stroke, never restyled or replaced to fit the brand

When to reach for this skill

Before a Lovable project goes in front of a client for the first time, before a real production launch, or any time the user asks whether a site "looks vibe-coded," looks unpolished, or looks AI-generated. Pair with [[lovable-seo-aeo]] for the metadata/SEO half of pre-launch polish, and [[lovable-rigor]] once you're actually directing Lovable's agent to fix what this audit finds.