Client brief to live site. Every step.
A complete walkthrough of how agencies use HatchIt to build, refine, and ship production websites — from a blank canvas to a live URL.
Six steps. One session. Live site.
Most agencies complete the full cycle in under 4 hours.
Step 01
Configure
Step 02
Build
Step 03
Refine
Step 04
Design
Step 05
Polish
Step 06
Ship
Configure your brand
Set the rules — every section the AI builds will follow them.
Color palette
Primary and secondary colors with 6 one-click presets. The AI references these in every section it generates.
Typography system
9 font families with separate heading/body selections. Includes DM Sans, Space Grotesk, Playfair Display, and more.
Brand rules
Free-text instructions injected into every AI prompt. "Always use formal language", "No stock photography", etc.
Toolkit toggles
Enable charts (Recharts), animated counters (CountUp.js), and backdrop effects. The AI uses them when enabled.
SEO setup
Title, description, keywords, OG image. Live score indicator validates length and keyword density.
Build section by section
Describe each section in plain English. The AI writes production-ready React + Tailwind.
Describe your Features section
Be specific about layout, content, and style. The AI uses your brand config automatically.
Available section types
Smart prompts
Context-aware placeholder suggestions change per section type. Low-effort inputs are auto-enhanced.
Brand injection
Your colors, fonts, mode, vibe, and brand rules are injected into every AI call automatically.
Cross-section awareness
The AI sees all existing sections on the page and maintains visual consistency across the whole site.
Code validation
Every output is JSX-parsed and containment-tested before rendering. Broken code is caught instantly.
Refine with precision
Natural language changes, element targeting, and screenshot-aware AI.
Section refinement
Inline editing
Text
Click any text to edit in-place
Links
Change hrefs with anchor suggestions
Styles
Sliders for size, weight, color, spacing
Page-wide refinementBusiness+
Send all sections to the AI simultaneously for holistic changes. Six one-click presets:
Fine-tune the design
Live design token sliders change every section simultaneously.
The Design Panel converts your slider values into CSS custom properties injected into the preview iframe. Every section responds instantly — no rebuild needed.
Live preview
Changes reflect instantly in the full-site preview. No regeneration, no waiting.
Coordinated presets
One-click presets (Minimal, Modern, Bold, Soft) apply a coordinated set of values across all sliders.
Per-project
Token values are saved per project and persist across sessions.
Export-ready
Design tokens are included in ZIP and GitHub exports as CSS variables.
Polish and manage
Multi-page sites, section library, AI assistant, and self-healing code.
Multi-page sites
Add pages with smart presets (About, Services, Pricing, etc.). Shared header/footer updates everywhere. Per-page SEO.
Section library
Save any completed section to your personal library. Reuse across projects with one click. Brand config snapshots included.
Hatch AI assistant
Floating chat with full-site context. Debugging, style suggestions, content ideas. Inject any response directly into a section prompt.
Self-healing Overseer
Broken code? The system tries 5 deterministic fixes before calling the AI. Syntax errors, TypeScript, incomplete ternaries — all caught.
AI image generation
Generate brand-aware images with Google Imagen 4, directly in the builder. Replace placeholder images in one click.
Device preview
Switch between mobile (375px), tablet (768px), and desktop views. Every section renders responsively in a live iframe.
Section management
Full control over every piece of your site.
Deploy and export
One-click deploy with auto-fix, or export clean source code you own.
One-click deploy
Deploys to Vercel with SSL, global CDN, and a *.hatchit.dev subdomain. If the build fails, the system automatically fixes the code and redeploys — up to 2 retries.
ZIP export
Download a complete Next.js project with all pages, components, and assets. Clean, maintainable code your team can customise.
GitHub push
Connect via OAuth and push directly to a GitHub repository. Brand config and SEO settings are included in the push.
The Replicator
Paste any website URL. The Replicator extracts its DNA — structure, style, palette, section layout — and populates a fresh project with it. Your AI then builds each section from that blueprint. Not a copy — a reconstruction.
Paste URL
Enter any live website address
Extract DNA
AI analyzes structure, style, and content
Build from blueprint
Each section is AI-generated from the analysis
See it in action
Book a 15-minute demo and bring a real client brief. We'll build a multi-page site from it live on the call.