Build a website with AI, then harden it for production
Building a website with AI works best as two phases, not one. The first phase is generation. The AI produces a draft of the site quickly. The second phase is hardening. You take the draft and turn it into something that holds up to real production traffic. Both phases are required. Skipping the second one is where most AI-built sites fall apart later.
The reason I want to name this as a two-phase workflow explicitly is that a lot of people assume the AI's "done" signal means the site is production-ready. It usually doesn't. The AI's done signal means the draft is generated. Hardening is its own separate body of work, and treating it as part of the build (rather than skipping it) is what separates AI-built sites that work from AI-built sites that don't.
This site you're reading parts of right now was built exactly this way. AI agents drafted the structure and the content. The hardening pass was deliberate, multi-staged, and ongoing. The posts you can see on the /log mesh are evidence of the pattern: each one drafted in batches, run through gates before promotion, surfaced and reworded when something failed inspection. Drafting is fast. Hardening is the work.
Why draft-then-harden is a real workflow
The instinct is to treat "draft" and "production" as the same thing. AI generates a draft. You publish it. Done.
The reason this instinct produces broken sites is that AI draft outputs are optimized for what looks right in the preview pane. The preview pane is not a production environment. Real visitors, real browsers, real devices, real network conditions, real privacy shields, real spam filters, real search engines. None of those conditions exist in the preview. The draft passes the preview gate without ever encountering the conditions that production has to survive.
Draft-then-harden is the workflow that closes that gap. The draft phase produces structure quickly. The hardening phase puts the structure through real-world conditions before traffic arrives. The result is a site that works at draft speed but holds at production scale.
This isn't a corner-cut. It's the actual workflow that produces durable sites with AI in the loop. The shortcut is skipping the hardening pass. The real workflow includes it.
The eight things draft-stage AI builds skip
Each one of these is a place where the AI's draft passes its own internal check but fails when real visitors arrive. The hardening pass addresses each deliberately.
One: privacy browser compatibility. The draft renders in the AI's standard browser. It doesn't get tested against Brave with shields up, uBlock Origin, or strict tracking protection. Real visitors using those tools encounter blocked iframes, missing forms, broken chat widgets. The hardening pass tests in shielded browsers and either removes third-party iframes or replaces them with native equivalents.
Two: real-device mobile rendering. The draft renders against a desktop preview. The mobile emulator is close but misses real-device failures: keyboard interaction, viewport sizing under cellular conditions, touch-target accuracy, modal dismissal under real conditions. The hardening pass walks the site on actual phones.
Three: form round-trip verification. The draft has a form that submits. The submission goes somewhere. Whether it arrives at your inbox, in what format, in time, not in spam. None of that is verified by the draft. The hardening pass sends real test submissions and confirms the round trip end to end.
Four: search-engine surface validation. The draft has title tags, meta descriptions, structured data. Whether each page has unique titles, whether descriptions are well-written, whether structured data validates against Google's rich-results checker. None of that is verified by the draft. The hardening pass audits the SEO surface page by page.
Five: performance under real conditions. The draft loads fast on the AI's development machine. Real visitors load on real connections (cellular, throttled wifi, older devices, slower networks). The Core Web Vitals scores the draft passes can be misleading. The hardening pass measures performance on real conditions and fixes what fails.
Six: environment variable verification. The draft uses API keys, webhook URLs, authentication tokens that worked in the development environment. Whether they carry over correctly to production and whether each integration actually works in production. None of that is verified by the draft. The hardening pass walks every external integration end to end against production.
Seven: monitoring and observability. The draft has no way of telling you when it breaks in production. Once live, if something fails, you find out from visitors complaining or from a delayed analytics signal. The hardening pass adds uptime monitoring, error tracking, and form-submission alerts so you know when production breaks.
Eight: rate limiting and abuse protection. The draft has no protection against automated abuse, spam submissions, brute-force attempts, or unexpected traffic spikes. The hardening pass adds basic protections appropriate to the site's exposure level.
The eight are not optional. Each one of them is a gap that production traffic will find if you don't close it first. The discipline is to close them deliberately as part of the build, not to skip them and rediscover them after launch costs you visitors.
The hardening pass that closes each
The hardening pass is structured the same way each time:
Run through the pre-launch audit on the draft. The audit is the checklist that surfaces which of the eight gaps are present on your specific draft.
Fix each surfaced gap in priority order. Privacy browser issues and form failures usually come first because they directly affect lead capture. Performance and SEO come next because they affect ranking and traffic. Mobile rendering and monitoring close the pass.
Re-run the audit after each fix. Each pass tightens. The site moves from "draft" through "hardening in progress" to "production-ready" as gaps close.
The hardening pass is bounded. It has a definite scope (the eight items above), a definite end state (the audit returns clean), and a definite output (a site that's actually ready for production traffic, not just ready in the draft sense).
Most AI-built sites need somewhere between a focused afternoon and a few days of hardening, depending on how aggressively the draft cut corners. The cost is small relative to the value of a site that holds up in production.
The signal that hardening is done
You'll know hardening is done when:
The audit returns clean on all eight items.
A real test visitor (you, on the actual conditions a real visitor would arrive at) can complete the conversion task from cold-start without friction.
You receive every test form submission, in your real inbox, not in spam.
The site loads acceptably on a phone over cellular.
Monitoring is in place and you've verified it works (test alert fires, you receive it, you know the system is watching).
When all five are true, the draft has crossed into production-ready. Launch.
Why I run this workflow
This pattern came from real builds, not from theory. The same arc repeats on every AI-assisted site I've worked on, including this one. Draft fast. Surface gaps with the audit. Harden deliberately. Ship.
The discipline is the value. AI is excellent at the generation phase. The hardening phase is where the operator's discipline produces the difference between a site that works for a week and a site that works for years. The two-phase workflow is what makes both fast AND durable.
If you're starting a site with AI, the framing to bring is: draft fast, harden deliberately. The two phases together make AI-built sites genuinely production-grade. Either one alone doesn't.
If you're working through the draft-to-production gap on an AI-built site and want a second pair of eyes on the hardening pass, the conversation's open. → Work with VibeKoded