GuideApril 9, 2026

From Prompt to Production: How to Ship an AI-Generated Website

A step-by-step guide to turning raw AI output into a polished, deployed website — covering code cleanup, responsive testing, performance, SEO, and hosting.

You pasted a prompt into Claude, ChatGPT, or v0 and got back a beautiful-looking website in seconds. Now what? The gap between raw AI output and a live, production-grade website is where most people get stuck.

This guide covers everything that happens between copying AI-generated code and clicking "deploy" — the cleanup, the testing, the optimization, and the tooling that turns a prototype into a real site.

The Reality of AI-Generated Code

AI tools produce remarkably good first drafts. But a first draft is not a finished product. Here's what typically needs attention:

Inline styles and inconsistent patterns — AI sometimes mixes approaches within the same file
Missing edge cases — empty states, loading indicators, error handling
Placeholder content — lorem ipsum text, stock image URLs, dummy links
Accessibility gaps — missing alt text, poor focus management, low-contrast elements
No build pipeline — raw HTML/CSS doesn't have minification, image optimization, or bundling

None of these are deal-breakers. They're just the difference between a demo and a product.

Step 1: Set Up a Proper Project Structure

Don't work with a single HTML file. Even for a simple landing page, a proper project structure saves time immediately and scales better later.

For Simple Static Sites

my-site/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
├── images/
│   ├── hero.webp
│   └── logo.svg
└── favicon.ico

Move inline styles into a dedicated CSS file. Extract any inline JavaScript into main.js. This separation makes every subsequent step easier.

For React/Next.js Projects

If your AI generated React code (common with v0 or Cursor), initialize a proper project:

npx -y create-next-app@latest my-site

Then move the generated components into the project's src/components/ directory. This gives you routing, build optimization, and deployment tooling out of the box.

Step 2: Clean Up the Code

AI-generated code is functional but rarely organized the way a human would write it. Spend 15–20 minutes on cleanup:

CSS Cleanup

Before (AI output):

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 120px 20px;
  text-align: center;
}

.features {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 20px;
}

After (production-ready):

:root {
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --section-padding: 80px 20px;
  --section-padding-hero: 120px 20px;
}

.hero {
  background: var(--gradient-primary);
  padding: var(--section-padding-hero);
  text-align: center;
}

.features {
  background: var(--gradient-primary);
  padding: var(--section-padding);
}

Extract repeated values into CSS custom properties. This makes future changes — like updating your brand color — a one-line edit instead of a search-and-replace nightmare.

HTML Cleanup

Check for these common AI-generated issues:

Duplicate IDs — AI sometimes reuses the same id across sections
Non-semantic elements — <div> used where <section>, <nav>, <main>, or <footer> should be
Missing lang attribute — the <html> tag needs lang="en" (or your language)
Missing viewport meta tag — critical for responsive design

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Your page description here">
  <title>Your Site Title</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>

Step 3: Replace All Placeholder Content

This sounds obvious, but it's the most commonly skipped step. Go through every line of text and every image:

Headlines and body copy — replace lorem ipsum with real content
Images — replace placeholder URLs with optimized, self-hosted images
Links — update all href="#" to actual destinations or remove them
Contact information — email addresses, phone numbers, physical addresses
Social links — point to your actual profiles
Legal pages — link to real privacy policy and terms pages

Image Optimization

Don't just swap placeholder URLs with full-size images. Optimize them:

Format	Best For	Typical Savings
WebP	Photos, complex graphics	25-35% smaller than JPEG
AVIF	Photos (modern browsers)	50% smaller than JPEG
SVG	Logos, icons, illustrations	Infinitely scalable, tiny file size
PNG	Screenshots, images with transparency	Use only when needed

Tools like Squoosh or the command-line cwebp converter handle this in seconds. Always provide width and height attributes on <img> tags to prevent layout shift.

<img
  src="/images/hero.webp"
  alt="Dashboard showing real-time analytics data"
  width="1200"
  height="675"
  loading="lazy"
>

Step 4: Make It Truly Responsive

AI tools usually generate decent responsive layouts, but they rarely handle all breakpoints well. Test at these widths:

320px — small phones (iPhone SE)
375px — standard phones (iPhone 14)
768px — tablets (iPad)
1024px — small laptops
1440px — standard desktops
1920px+ — large monitors

Common Responsive Fixes

Navigation: Mobile menus almost always need manual work. AI-generated hamburger menus often have z-index issues, don't close when a link is clicked, or have animation quirks.

Typography: Set a fluid type scale instead of fixed sizes:

:root {
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-hero: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
}

Grid layouts: Ensure multi-column grids collapse properly:

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

The auto-fit + minmax pattern handles most responsive grid needs without media queries.

Step 5: Add Performance Optimizations

A beautiful website that takes 5 seconds to load is a website people leave. These optimizations take minimal effort but make a huge difference:

Critical CSS

Inline the CSS needed for above-the-fold content directly in the <head>. This eliminates one render-blocking request:

<head>
  <style>
    /* Critical styles for hero, nav — only what's visible on first load */
    .nav { ... }
    .hero { ... }
  </style>
  <link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">
</head>

Font Loading

Don't let custom fonts block rendering. Use font-display: swap:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-display: swap;
}

Or if using Google Fonts, preconnect to their servers:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Lazy Loading

Add loading="lazy" to every image below the fold. Never lazy-load hero images or anything visible on initial page load — that slows down perceived performance.

Step 6: SEO Essentials

AI-generated code almost never includes proper SEO setup. Add these before deploying:

Meta Tags

<head>
  <title>Your Primary Keyword — Brand Name</title>
  <meta name="description" content="A compelling 150-160 character description that includes your target keyword.">
  <link rel="canonical" href="https://yourdomain.com/page">

  <!-- Open Graph -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Description for social sharing">
  <meta property="og:image" content="https://yourdomain.com/og-image.jpg">
  <meta property="og:url" content="https://yourdomain.com/page">
  <meta property="og:type" content="website">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Page Title">
  <meta name="twitter:description" content="Description for social sharing">
  <meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">
</head>

Structured Data

Add JSON-LD for rich search results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Your Page Title",
  "description": "Your page description",
  "url": "https://yourdomain.com"
}
</script>

Technical SEO Checklist

One <h1> per page — AI sometimes generates multiple
Heading hierarchy — h1 → h2 → h3, never skipping levels
Alt text on every image — descriptive, not just "image"
Internal links — link between your own pages where relevant
robots.txt — allow search engines to crawl your site
sitemap.xml — help search engines discover all your pages

Step 7: Choose Your Hosting and Deploy

The hosting landscape in 2026 makes deployment almost trivially easy. Here are the best options by project type:

Static HTML/CSS Sites

Platform	Free Tier	Custom Domain	Build Pipeline
Cloudflare Pages	Unlimited	✓	✓
Netlify	100GB/month	✓	✓
GitHub Pages	Unlimited	✓	Via Actions
Vercel	100GB/month	✓	✓

For a simple static site, Cloudflare Pages offers the best combination of speed, free tier, and global CDN.

React/Next.js Projects

Vercel is the natural choice for Next.js projects — it's built by the same team. Deployment is as simple as:

npm i -g vercel
vercel

This handles building, CDN distribution, serverless functions, and automatic HTTPS.

The Quick Deploy Checklist

Push to GitHub — connect your repository to your hosting platform
Set environment variables — API keys, analytics IDs
Configure custom domain — point your DNS records
Enable HTTPS — all platforms above handle this automatically
Set up redirects — handle www vs. non-www, old URLs
Test the live site — run Lighthouse, check mobile, verify all links

Step 8: Post-Launch Essentials

Your site is live. Don't stop here:

Analytics

Add a privacy-friendly analytics tool. Google Analytics works, but lighter alternatives like Plausible or Umami load faster and don't require cookie consent banners in most jurisdictions.

Monitoring

Set up uptime monitoring with a free tool like UptimeRobot or Better Stack. Get notified if your site goes down before your users tell you.

Performance Baseline

Run a Lighthouse audit immediately after launch. Save the scores — they're your baseline. Aim for:

Performance: 90+
Accessibility: 95+
Best Practices: 95+
SEO: 95+

If any score is below these thresholds, Lighthouse tells you exactly what to fix.

The Complete Workflow at a Glance

Phase	Time	What You Do
Generate	2 min	Paste prompt into AI tool, get code
Project Setup	5 min	Create proper file/folder structure
Code Cleanup	15 min	CSS custom properties, semantic HTML
Content	30 min	Replace placeholders with real copy and images
Responsive	20 min	Test and fix all breakpoints
Performance	10 min	Fonts, images, lazy loading
SEO	15 min	Meta tags, structured data, heading hierarchy
Deploy	5 min	Push to hosting platform
Total	~2 hours	From AI prompt to live production site

Compare that to the traditional timeline of days or weeks. The AI handles the hardest part — generating a solid design foundation. You handle the part AI can't: making it real.

Start With Better Prompts

The better your initial prompt, the less cleanup you need. A well-structured prompt that specifies colors, typography, layout, and responsive behavior can cut your post-generation work in half. Browse our prompt library for prompts that are engineered for production-quality output from the start.

Back to all articles