AI Website Builder - Technical Analysis

Main Goal & Objective

Primary Goal: Build an AI-powered one-page website generator that enables users to create custom websites through natural language interaction.

Core Functionality:

• Natural language chat interface for gathering requirements
• Logo upload with AI-powered smart placement
• Custom background generation using DALL·E 3
• Style-guide extraction from any public URL (colors, fonts, tone)
• Real-time browser preview (desktop view)
• One-click downloadable ZIP bundle

Value Proposition: Prompt → Background → Logo → Style cues → Website → One-click download

Tech Stack Requirements

Frontend Stack

• Framework: React with Vite build tool
• Styling: Tailwind CSS
• State Management: Zustand
• UI Components: Chat interface, logo uploader, iframe preview, download interface
• File Handling: JSZip for bundle creation

Backend Stack

• API Framework: FastAPI (Python)
• Containerization: Docker + Docker Compose
• Screenshot Service: Playwright for deterministic PNG capture
• Image Processing: Pillow for resize and optimization
• Storage: S3 or Cloudinary for temporary assets
• Infrastructure: Dockerized with development-production parity

AI/ML Stack

• Chat Agent: Claude 4 for conversation and orchestration
• Code Generation: Claude 4 for HTML/CSS/JS generation
• Image Generation: DALL·E 3 for background creation
• Vision Processing: GPT-4o Vision for style-guide extraction
• Primary LLM: GPT-4o for general AI operations

Timeline & Scope

Development Breakdown:

• Backend Development: 63 hours
• Frontend Development: 44.5 hours
• AI, Vision & Imaging: 58 hours
• Base Engineering Total: 166.5 hours
• Risk Buffer: 25% (41 hours)
• Total Project Time: 208 hours

Timeline Estimates:

• Base development: 18-21 working days
• With buffer: ~4 weeks
• Target: Demo-ready in four weeks
• Performance goal: Full site generation < 60 seconds end-to-end

Architecture Overview

Agent & Tool Topology

1. Chat Agent (Claude 4)
   • Handles user conversation
   • Gathers requirements
   • Orchestrates other agents
   • Calls Vision tool for style-guide extraction
2. Code-Gen Agent (Claude 4)
   • Generates HTML/CSS/JS code
   • Creates complete one-page website structure
3. Image-Gen Agent (DALL·E 3)
   • Creates custom background images
   • Processes image generation prompts
4. Vision Tool Integration
   • Extracts style guides from URL screenshots
   • Returns palette, fonts, and brand voice data

Data Flow Architecture

User URL → Playwright screenshot (PNG → base64)
└→ Chat Agent → Vision tool → {palette, fonts, voice}

Logo upload → Chat Agent
Prompt → Chat Agent

Chat Agent orchestrates:
- Code-Gen Agent → website files
- Image-Gen Agent → background (base64)

Assets stored (S3) → Preview iframe → ZIP download

Technical Implementation Details

• Image Handling: All screenshots, backgrounds, and logos processed as Base-64 strings (data:image/<type>;base64,…)
• Preview System: Live iframe rendering for desktop view
• Storage Strategy: Temporary asset storage with cleanup mechanisms
• Error Handling: Comprehensive error states and recovery
• Rate Limiting: Built-in handling for Vision API limits

Deliverables & Output Format

Core Deliverables

1. Three-Agent System with Vision tool integration
2. Custom Background Generator powered by DALL·E 3
3. Logo Upload & Smart Placement system
4. Style-Guide Extractor with URL processing capabilities
5. Preview & Download Interface with real-time rendering
6. Dockerized Backend with CI/CD pipeline
7. Documentation including README and OpenAPI specs

Output Format Specifications

• Primary Output: Frontend-only HTML/CSS/JS bundle
• File Structure: Single-page website with all necessary UI/UX code
• Download Format: ZIP file containing:
  • index.html (complete website)
  • Image assets (backgrounds, logos)
  • styleguide.json (downloadable style guide data)
• Asset Integration: All components embedded or properly referenced
• Browser Compatibility: Desktop-optimized preview and output

Technical Constraints

• Scope Limitation: No backend logic or server-side components in output
• Modularity Trade-off: Single-file approach chosen over modular architecture for MVP timeline
• File Format: Complete self-contained HTML/CSS/JS bundle
• Preview Requirements: Real-time iframe rendering for immediate feedback

Quality Assurance

• Performance Target: Sub-60 second generation time
• Error Handling: Comprehensive error states and user feedback
• Cross-tool Integration: Seamless handoffs between AI agents
• Screenshot Sandboxing: Secure URL processing and capture