AI-Generated Website Development
From brief to deployed 5-page site via autonomous agents
Live Demonstration
A quick look at the system in action — input, processing, output.
AI-Generated Website Development — Short Demo
Problem & Motivation
Why this system needed to exist.
Building custom websites traditionally takes weeks: discovery, design, development, review cycles, deployment. For small businesses and rapid prototypes, this is too slow and expensive.
I asked: Can Hermes agents generate a complete, production-ready multi-page website from a high-level brief in under an hour?
The answer: Yes, with human-in-the-loop for brand decisions and quality gates.
What I Built
The system architecture and core capabilities.
An agent-driven website generation pipeline demonstrated with a fictional business: "Aura Coffee Roasters" — a specialty coffee subscription service.
The Brief (Input)
BUSINESS: Aura Coffee Roasters
TYPE: Specialty coffee subscription (B2C)
TARGET: Coffee enthusiasts, 25-45, urban, quality-focused
PAGES: Home, About/Story, Subscription Plans, Shop (Beans/Gear), Contact
STYLE: Warm, artisanal, premium but approachable. Earth tones + cream.
FEATURES: Subscription calculator, origin story map, brew guides, account portal
DEPLOY: Static (Astro) → Cloudflare PagesPipeline Stages
- Planning Agent — Parses brief → generates sitemap, component inventory, design token spec, content outline
- Design Agent — Selects design system (editorial/warm), generates Tailwind config, font pairs, color palette, component variants
- Content Agent — Writes all copy: headlines, body, CTAs, FAQs, meta tags. SEO-optimised.
- Code Agent (Agent Zero) — Generates Astro + Tailwind v4 project: Layout, components, pages, styles, scripts
- Verification Agent — Runs build, lint, typecheck, Lighthouse, accessibility audit, visual regression
- Deploy Agent — Pushes to Git, triggers Cloudflare Pages deploy, verifies live URL
System Architecture
How the components connect and data flows.
┌─────────────┐
│ BRIEF │ (Natural language + structured fields)
└──────┬──────┘
▼
┌─────────────┐ ┌──────────────────┐
│ PLANNER │────▶│ SPEC DOCUMENT │
│ (Hermes) │ │ (JSON + MD) │
└─────────────┘ └────────┬─────────┘
│
┌────────────────────┼────────────────────┐
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ DESIGN AGENT │ │ CONTENT AGENT│ │ CODE AGENT │
│ (Tailwind │ │ (Copywriting)│ │ (Agent Zero) │
│ config, │ │ │ │ │
│ tokens) │ │ │ │ │
└───────┬───────┘ └───────┬───────┘ └───────┬───────┘
│ │ │
└────────────────────┼────────────────────┘
▼
┌───────────────┐
│ VERIFICATION │
│ (Build, Test,│
│ Lighthouse) │
└───────┬───────┘
│
▼
┌───────────────┐
│ DEPLOY AGENT │
│ (Git + CF) │
└───────────────┘End-to-End Workflow
Step-by-step from input to output.
Generated Project Structure
aura-coffee/
├── src/
│ ├── components/
│ │ ├── global/ → Header, Footer, StickyCTA
│ │ ├── sections/ → Hero, SubscriptionCalc, OriginMap, BrewGuides, TrustBar
│ │ ├── cards/ → PlanCard, BeanCard, GearCard, TestimonialCard
│ │ └── ui/ → Button, SectionHeading, Badge, Input
│ ├── layouts/
│ │ └── Layout.astro → SEO, JSON-LD, fonts, slots
│ ├── pages/
│ │ ├── index.astro → Home
│ │ ├── about.astro → Our Story
│ │ ├── subscribe.astro → Plans + Calculator
│ │ ├── shop.astro → Beans & Gear
│ │ └── contact.astro → Contact + FormSubmit
│ ├── data/
│ │ └── business.json → Single source of truth
│ └── styles/
│ └── global.css → Tailwind v4 @theme
├── public/
│ ├── images/ → Hero, beans, origins, team
│ └── fonts/ → Self-hosted display font
├── astro.config.mjs
├── package.json
└── README.mdHuman Touchpoints (Quality Gates)
- Design token approval (5 min): Review color palette, font pair, spacing scale
- Copy review (10 min): Scan headlines, CTAs, legal text
- Component spot-check (5 min): Verify 2-3 key components render correctly
- Deploy confirmation (1 min): Approve live URL
Total human time: ~20 minutes. Agent time: ~45 minutes.
Technology Stack
Tools, frameworks, and services used.
Screenshots & Diagrams
Real captures from the running system.
Placeholder — replace with actual generated site captures:
Technical Decisions & Trade-offs
Key choices made during development and why.
Astro over Next.js for Static Sites
Zero-JS by default, faster builds, simpler mental model for content sites. Next.js reserved for apps needing server-side logic.
Tailwind v4 @theme over Config File
Design tokens in CSS — single source of truth, no JS config parsing, works with any tooling. Agents write CSS variables directly.
Single business.json Data File
All content, config, navigation, SEO in one JSON. Agents read/write one file. TypeScript types catch drift at build time.
FormSubmit.co for Forms
No backend needed. First submission activates via email. Honeypot spam protection. Works on static hosting.
Challenges & Solutions
What went wrong and how it was resolved.
Challenge: Agent Generates Invalid Astro Syntax
Solution: Provide Agent Zero with .astro syntax reference + common patterns. Run astro check in verification loop. Retry with error context.
Challenge: Design Token Drift
Solution: Design agent writes global.css @theme block as single source. All components reference var(--color-*). No hardcoded values allowed (enforced by lint rule).
Challenge: Image Handling
Solution: Agent uses Unsplash URLs with verified HTTP 200. For production, human replaces with branded assets. AI-generated images (Flux) as fallback.
Challenge: SEO Meta Tags Not Rendering
Solution: Astro set:html directive for JSON-LD. Frontmatter variables for meta description (not template expressions in attributes). Verified in build output.
Outcome & Lessons Learned
What worked, what didn't, and what I'd do differently.
The pipeline produces a deployable, accessible, performant website in ~1 hour total (20 min human). The Aura Coffee demo serves as a reusable template for future projects.
Key Learnings
- Brief quality determines output quality — structured input beats vague prompts
- Design tokens in CSS variables = agent-friendly, build-time verified
- Single data file (business.json) prevents content/code drift
- Verification loop (build → lint → Lighthouse) catches 95% of agent errors
- Human review at 3 gates = quality without bottleneck
- Static sites + Cloudflare Pages = zero-cost, global, instant deploy
Reusability
- Component library extracted for future projects
- Design system patterns codified in skills
- Verification checklist automated
- Deploy pipeline templated
Note: This demonstrates agent capability. The Aura Coffee site is a fictional demo. No client work represented. Replace placeholder images with real brand assets for production use.
Technical Walkthrough
Extended video covering architecture, code, and implementation details.
AI-Generated Website Development — Technical Walkthrough
Let's discuss how this approach could work for you
Remote roles, contract work, and collaboration — all on the table.