How to Fix a Vibe-Coded Website: A Web Designer's Honest Guide

There's a new kind of website showing up in our inboxes. Founders send them over with the same message: "We built this with AI. It mostly works, but something feels off. Can you help us polish it?"

Then we open it up. And it's never just polish.

The hero looks great. The marketing copy is genuinely sharp. But the mobile menu collapses into itself. The button states are inconsistent. The contact form submits to a non-existent endpoint. The lighthouse score is 31. There's no semantic HTML — every element is a div. The CSS file is 14,000 lines of unused utilities. And somewhere in a forgotten component, there's a hardcoded API key.

This is what we now call a vibe-coded website — a site generated end-to-end by an AI assistant, prompted into existence by someone who isn't a developer, and shipped before anyone with engineering instincts has stress-tested it.

The vibes are immaculate. The code is a minefield.

This is a designer's honest guide to what goes wrong with vibe-coded websites, how to triage them, and when it's time to bring in proper engineers to fix a vibe-coded app before it costs the business real money.

Why Vibe Coding Looks So Good at First Glance

To be fair to the AI tools, they've gotten genuinely impressive. Modern code-generating assistants can produce a homepage that looks like it came out of a $30k engagement. Hero sections, gradient backgrounds, well-spaced typography, custom illustrations — the surface layer is often striking.

The problem is that "looks good in a screenshot" and "works as a real product" are not the same thing. A website is not a poster. It's a system. It has to handle real users on real devices with real intentions, and the things that break that system are almost never visible in the marketing screenshot.

When a non-developer prompts an AI into building a site, they evaluate it the only way they know how — by looking at it. The AI optimises for what gets evaluated. So the visible layer gets cared for, and the invisible layer rots.

The Most Common Vibe-Coding Failures

After fixing dozens of these sites, we've seen the same problems repeat with surprising consistency. Here are the ones that come up almost every time.

Broken Responsive Behaviour

The desktop layout looks beautiful. Resize the browser, or pull it up on a phone, and entire sections collapse into illegible stacks. Nav menus disappear. Hero text overflows the viewport. Images that were carefully positioned at desktop widths become full-bleed accidents on mobile.

This happens because AI assistants tend to generate the desktop layout first and then bolt on responsive rules as an afterthought. There's no consistent breakpoint strategy, no tested mobile-first approach, just a sprinkling of md: and lg: classes that mostly work and sometimes don't.

Accessibility Catastrophes

Almost every vibe-coded site we touch has the same accessibility problems:

• No semantic HTML (everything is a div or a span)
• Missing or wrong heading hierarchy (multiple h1s or jumping from h1 to h4)
• No alt text on images, or generated alt text that just describes the file rather than its purpose
• Form inputs without labels
• Colour contrast that fails WCAG AA on at least one section
• No focus states for keyboard users
• Modals and dropdowns that trap focus or don't trap it when they should

These aren't pedantic concerns. They are the difference between a website that legally serves all customers and one that quietly excludes a meaningful percentage of them. In several jurisdictions, accessibility failures are now actively litigated.

UX That Looks Right But Feels Wrong

Vibe-coded sites often have button hierarchies that don't match user intent. The "Buy Now" CTA is the same visual weight as a "Learn More" secondary button. Forms ask for information in the wrong order. Loading states are missing entirely, so users tap a button and stare at a frozen screen. Error messages, when they appear, say things like "Error: undefined."

These aren't bugs in the technical sense. The code runs. But the UX is the product, and a product whose UX is broken is a broken product.

Performance Disasters

A typical vibe-coded site we audit:

• Ships unused CSS frameworks loaded in full
• Imports entire icon libraries to use three icons
• Embeds 4K hero images served at 80% quality with no responsive variants
• Loads JavaScript libraries for animations that could have been done in CSS
• Has zero caching strategy

The result is a Lighthouse performance score in the 20s or 30s, a Largest Contentful Paint over 5 seconds, and a Time to Interactive that means real users abandon before the page even works.

Hidden Security Problems

This is where we stop being polite about vibe coding. We've found:

• API keys hardcoded into client-side JavaScript
• Admin endpoints exposed without authentication
• Form submissions sent over HTTP instead of HTTPS
• User-uploaded content stored in publicly listable buckets
• SQL queries constructed via string concatenation in homemade backends

These aren't theoretical risks. They are operational liabilities. Any of them can become a serious incident the day the site gets enough traffic to attract attention.

The Triage Process: How We Approach a Vibe-Coded Site

When a client sends us their AI-generated site and asks for help, we run a consistent triage to figure out what we're actually dealing with.

Step 1: Lighthouse and PageSpeed audit. Quick objective signal on performance, accessibility, SEO, and best practices. Numbers don't lie.

Step 2: Manual mobile pass. Open the site on an actual phone, not the browser dev tools. Tap every button. Submit every form. Try the navigation while scrolled.

Step 3: Accessibility scan. Run an axe or Lighthouse accessibility audit. Manually keyboard-navigate the entire site. Test with a screen reader on at least one critical flow.

Step 4: Code review. Open the repo. Look at the file structure. Search for hardcoded credentials, exposed endpoints, TODO comments, and console.log statements left in production.

Step 5: Functional pass. Check that every form, button, and link does what it claims. The number of vibe-coded sites where the contact form just silently fails is genuinely alarming.

By the end of this triage we know whether we're looking at a polish job (rare), a refactor (common), or a rebuild (more common than clients expect).

When Polish Is Enough

Some vibe-coded sites really do just need polish. The signs:

• The code is structured cleanly, even if it's verbose
• Components are reusable and reasonably named
• Data flows in expected directions
• Performance issues are about asset weight, not architecture
• Accessibility issues are localised, not systemic

If the foundation is sound, a designer with developer skills can typically clean up a site like this in a few focused days. Improve responsive breakpoints. Add proper alt text. Fix focus states. Optimise images. Tidy the heading hierarchy. Ship.

When You Need a Real Engineer

The harder cases — and they're most cases — are sites where the polish is sitting on top of structural problems. The signs:

• Backend logic is mixed into frontend components
• Authentication is handled inconsistently or insecurely
• The data model doesn't actually match what the UI claims it does
• State management is incoherent, with the same data tracked in three places
• There are TypeScript errors silently being ignored
• The "database" is actually a JSON file in a public folder

You cannot polish your way out of these problems. The site looks done but isn't. It has to be either substantially refactored or, in the worst cases, rebuilt with the visible design preserved but the underlying system replaced.

This is when it makes sense to bring in a team that specifically handles this kind of work. Specialists who fix a vibe-coded app — or rebuild it cleanly when fixing isn't economical — exist precisely because this category of project has become so common.

The honest version of the conversation with the client usually goes: "The visible site is great. The system underneath it is going to fail under real usage. We can preserve everything you love about the design, but the engine needs to be rebuilt before you scale this." Most clients, when shown the actual issues, understand and agree.

Why Designers Should Stop Trying to Fix These Solo

We say this with full respect to the talented designers reading this who do also write code: vibe-coded sites are not a designer's problem to solve alone. They are full-stack problems wearing a designer's clothing.

The visible CSS issues are easy. The accessibility issues are usually within reach. But once you find the hardcoded API key, the missing authentication layer, the mixed-up data model — you are now doing engineering work, often without the original developer (because there wasn't one) and without the test coverage to know whether your fixes break anything.

The leverage move for a designer in this situation is to bring in proper AI developers for hire who can do the engineering work alongside your design refinement. Two specialists in parallel will deliver a stable, beautiful site faster than one designer trying to play both roles.

How to Set Expectations With the Client

The hardest conversation is often the one where you tell the founder that their AI-built site, which they're proud of, has serious issues that aren't visible to them. A few framings that help:

Compare it to a house. The exterior looks great. But the wiring isn't to code, the foundation is half-poured, and the plumbing is leaking inside the walls. We can keep the exterior. We need to fix the rest.

Show the lighthouse and accessibility numbers. Concrete data is much more persuasive than aesthetic critique. A 31 performance score and 14 accessibility violations are unarguable.

Reframe the AI's contribution. The AI gave you a great starting point — much faster than starting from scratch. Now the human work begins. That's not a failure of AI; that's how AI tools should be used.

Quote the alternative. Show what it would have cost to build this site from scratch with a traditional agency. Then show what it costs to fix the AI version. The fix is almost always cheaper than the rebuild — but only if the foundation is salvageable.

The Bigger Picture

Vibe coding isn't going away. AI tools are going to keep getting better, and more non-developers are going to keep generating production sites with them. The web is going to keep filling up with sites that look great and break under usage.

For web designers and design-led agencies, this is actually a significant opportunity. Triage, refinement, and the orchestration of proper engineering on top of AI-generated foundations is becoming a real service line. Clients who would never have hired you to build from scratch are now coming to you to fix what they built themselves.

The agencies that handle this well — honest about what's broken, clear about what's salvageable, and connected to specialists who can do the deep engineering work — will quietly become some of the busiest in the industry over the next two years.

The vibes are not enough. They never were. But the vibes plus a real engineering pass underneath them — that's the version of AI-built websites that actually ships.