PromptWebsites
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.

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

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 —
    used where
    ,
  • Missing lang attribute — the 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:

    FormatBest ForTypical Savings
    WebPPhotos, complex graphics25-35% smaller than JPEG
    AVIFPhotos (modern browsers)50% smaller than JPEG
    SVGLogos, icons, illustrationsInfinitely scalable, tiny file size
    PNGScreenshots, images with transparencyUse only when needed

    Tools like Squoosh or the command-line cwebp converter handle this in seconds. Always provide width and height attributes on 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 . 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

    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

    PlatformFree TierCustom DomainBuild Pipeline
    Cloudflare PagesUnlimited✓✓
    Netlify100GB/month✓✓
    GitHub PagesUnlimited✓Via Actions
    Vercel100GB/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

    PhaseTimeWhat You Do
    Generate2 minPaste prompt into AI tool, get code
    Project Setup5 minCreate proper file/folder structure
    Code Cleanup15 minCSS custom properties, semantic HTML
    Content30 minReplace placeholders with real copy and images
    Responsive20 minTest and fix all breakpoints
    Performance10 minFonts, images, lazy loading
    SEO15 minMeta tags, structured data, heading hierarchy
    Deploy5 minPush to hosting platform
    Total~2 hoursFrom 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