Vibe Coded Marketing Sites: How to Spot and Fix the Problems

"Vibe coded" sites have become a real category of client work. A founder or marketer prompts their way through Cursor, Lovable, or v0 over a weekend, ships something that looks good in a demo, and then comes to your agency three months later when it's silently bleeding leads, breaking on mobile, or eating into their search rankings.

This is the playbook for spotting these sites in the first 10 minutes of an audit, the common failure modes you'll find under the hood, and how to fix them without scrapping the whole project.

What "Vibe Coded" Actually Means

Vibe coding describes a workflow where someone uses AI tools to generate code without rigorous review — accepting outputs because they "look right" rather than because they've been verified. The result is a site that works for the happy path the person tested and falls over for everything else.

This isn't a knock on the tools. Cursor, Claude Code, Lovable, v0, and Replit Agent are all extraordinarily capable. The problem is when the person at the keyboard has no engineering background and doesn't know what they don't know. The AI happily produces working-looking code for invalid patterns, missing accessibility, broken edge cases, and security holes — because nobody asked it to check.

The agencies inheriting these sites are doing a lot of unglamorous remediation work. Knowing what you're walking into matters.

How to Spot a Vibe-Coded Site in 10 Minutes

You don't need to crack open the codebase to recognise a vibe-coded site. The tells are visible from the outside.

1. Inconsistent Component Patterns

Buttons across the site have slightly different styling, sizing, or behaviour. Forms behave differently from page to page. Modals appear with different animations. These small inconsistencies signal that components were generated ad hoc rather than built from a system.

2. Mobile Layout Falls Over

The desktop view looks polished. The mobile view has overlapping elements, text running off-screen, buttons that are unreachable, or scroll behaviour that breaks. Vibe-coded sites are almost always built desktop-first with mobile treated as an afterthought.

3. Page Speed Scores Are Awful

Run the site through PageSpeed Insights. Vibe-coded sites consistently score in the 30–50 range on mobile performance because they ship unoptimised images, bloated JavaScript bundles, and unused CSS. The Core Web Vitals are usually all in the red.

4. The HTML Is Heavy and Weird

View source. Look for deeply nested div soup, inline styles where they shouldn't be, repeated class names with auto-generated suffixes, and very few semantic HTML elements. The DOM tree is usually 2–3x the depth it needs to be.

5. SEO Basics Are Missing

No or duplicate meta descriptions. Multiple H1s on the same page. Missing alt text on images. No structured data. Sitemap that doesn't include all the pages. These are easy to miss when you're prompting an AI to "make a beautiful landing page" — the AI builds what you asked for, not what Google needs.

6. Forms That Don't Quite Work

Submission either silently fails, sends data to an unmonitored endpoint, or works only on the first try and breaks if a user reloads. Form handling is one of the most consistently broken areas in vibe-coded builds because the AI generated the front end without a real backend wired in.

7. Random Console Errors

Open DevTools. Vibe-coded sites usually have a handful of red errors in the console — uncaught promises, 404s on missing assets, deprecation warnings, mixed content issues. None of them might be visible to the user immediately, but they accumulate into bugs and SEO penalties.

The Failure Modes Under the Hood

If you do dig into the code, the failure modes cluster into a handful of categories.

Failure Mode 1: No State Management Discipline

Local state, props, and global state get mixed in ways that mostly work until they don't. A form submission updates one component but not another. A user logs in but the navbar still shows the logged-out version until refresh. The architecture wasn't planned; it grew prompt by prompt.

Failure Mode 2: Auth That Works in Demos, Not Production

Login flows that store tokens in localStorage with no expiry logic. Session handling that breaks on tab refresh. Password resets that send emails but don't actually reset anything because the backend route was never connected. Auth is the area where vibe coding produces the biggest gap between "looks like it works" and "actually works."

Failure Mode 3: No Error Handling

Every API call assumes success. There's no error UI, no retry logic, no logging. When something fails — and something always fails — the user gets a silent blank state or, worse, sees an unfiltered error message from a backend they were never supposed to see.

Failure Mode 4: Data Models That Don't Match Reality

The AI generated database schemas based on the prompts it received. When the actual business needs more complex relationships — multi-tenancy, soft deletes, audit trails — the schema either gets retrofitted clumsily or the founder just adds more fields without restructuring. Result: queries get slower, edge cases multiply, the codebase becomes increasingly hard to change safely.

Failure Mode 5: Security Holes

API keys hardcoded in the front end. Endpoints that don't check authorization. Inputs that aren't sanitised. SQL injection possibilities. CORS configurations that are wide open. These aren't theoretical risks — they're the routine output of asking an AI to "build me a contact form" without specifying security requirements.

Failure Mode 6: Performance Decay

The site was fast when there were 50 items in the database. At 5,000 items, every page loads in 6 seconds because queries don't have indexes, lists aren't paginated, and the front end fetches everything on every render. Vibe-coded sites tend to hit this wall around the 6-month mark.

The Triage Approach: What to Fix First

When a client brings you a vibe-coded site, you can't fix everything at once. Triage by impact.

Priority 1: Stop the Bleeding

Anything actively losing the client money or data. Broken checkout flows. Forms not submitting. Failed payments. Security holes that could be exploited tomorrow. These get fixed in the first sprint regardless of how messy the underlying code is.

Priority 2: Fix the Visible Brand Damage

Mobile layout issues, console errors visible to power users, obvious accessibility failures, missing SEO basics. These don't bleed money immediately but they erode trust and traffic over weeks. Get them fixed before recommending bigger changes.

Priority 3: Stabilise the Foundations

Auth, state management, error handling, basic test coverage. These are the systems the site is built on. If they're rotten, every new feature compounds the technical debt. Investment here is where the long-term ROI is.

Priority 4: Refactor Towards a Real Architecture

Component library consolidation, data model cleanup, performance optimisation, proper deployment pipeline. This is the bigger lift — but it's what makes the site maintainable for the next two or three years.

For most clients, you'll do priorities 1 and 2 in the first month, priority 3 over the next quarter, and priority 4 as a roadmap of work that happens alongside new feature development.

When to Patch vs. When to Rebuild

The hardest call: is this site fixable, or is the right move to rebuild from scratch?

Patch When:

• The codebase has a recognisable structure, even if some parts are messy
• The framework choices are sensible (Next.js, Astro, Remix, even plain WordPress)
• Core business logic mostly works and matches the client's actual model
• The client has time/budget pressure that rules out a rebuild
• The site has SEO equity that's expensive to risk

Rebuild When:

• The architecture is fundamentally wrong (e.g. an e-commerce site built without a real cart abstraction)
• Patching keeps revealing more breakage — every fix uncovers two new bugs
• The framework choice was a mistake (e.g. a content-heavy marketing site built as a fully client-side React app)
• You're paying as much in maintenance as a rebuild would cost
• The client wants to scale significantly in features or traffic

For most marketing sites, patching wins. For SaaS products and complex web apps that vibe-grew past their original scope, rebuild often wins. The honest framework is: if you can't ship a meaningful improvement within a sprint without sinking into the existing codebase, the rebuild is probably the cheaper path even though it sounds more expensive on paper.

This is where bringing in AI-generated app issue specialists pays back — they've seen enough of these to assess patch-vs-rebuild quickly, and to handle the technical remediation work without inheriting the chaos.

How to Have the Conversation With the Client

The client's relationship with the site is emotional. They built it themselves, or paid someone they trusted, and they're proud of what came out. Walking in with "this is a mess" is the wrong move even if it's accurate.

The framing that works:

• "The site looks great — let's make sure it performs as well as it looks"
• "AI tools are amazing for getting to a working version fast. The next step is making it production-grade"
• "We've found some specific issues that are costing you [X] right now — let's start there"
• "Long-term, here are the foundational improvements that will make this site easier to grow"

You're not telling them they made a mistake. You're framing the work as the natural next phase — the same way a good in-house team would harden a prototype into a real product.

The Audit Deliverable

Before quoting remediation work, deliver a structured audit. This protects you on scoping and gives the client a clear picture of what they're buying.

A vibe-coded site audit should cover:

• Performance scores (PageSpeed Insights, Core Web Vitals, Lighthouse)
• Accessibility audit (WAVE, axe DevTools)
• SEO baseline (Screaming Frog crawl, on-page issues, sitemap completeness)
• Security scan (HTTP headers, exposed endpoints, dependency audit)
• Code review (architecture, state management, error handling)
• Mobile review (visual QA across breakpoints)
• Form and conversion path review (every CTA tested end-to-end)

The audit takes a few days of work and is often a paid engagement on its own. It also makes the remediation conversation easier — you're proposing fixes to documented problems, not vague concerns.

The Bigger Picture

Vibe-coded sites are going to be a recurring part of agency work for the foreseeable future. The category isn't going away — it's growing — because the tools that make vibe coding possible keep getting better and more accessible.

The agencies that develop a clean playbook for handling these clients win in two ways: they convert what feels like cleanup work into long-term retainer relationships, and they position themselves as the natural next step after the founder's solo build phase. That positioning is worth a lot.

If you're seeing more of these projects in your pipeline and don't have the internal capacity for the technical remediation, partnering with an experienced AI development team lets you take on the work without distracting your core team from the marketing strategy that's your actual offer. The combination — agency-led strategy plus specialist remediation — is what these clients actually need.