Skip to main content
Three ways to work: chat with AI, click and edit visually, or write code. Use whichever feels natural.

​
How Building Works

Tell AI what you want to build: 
Landing page for a coffee shop with online ordering
AI asks clarifying questions:
  • Purpose and audience
  • Key features needed
  • Design preferences (or reference images)
Checks Passed

​
AI Works in Tasks

Your request becomes a task list: 
Task 1: Create hero section - in progress
Task 2: Add menu display - Pending
Task 3: Build order form - Pending
Task 4: Set up Stripe checkout - Pending
Checks Passed
Watch progress in real-time

​
Iterative Refinement

After the first draft: Review in preview:
  • Test on different screen sizes (desktop, tablet, mobile)
  • Navigate through pages
  • Check functionality
Each update creates a version you can roll back to.

​
Three Editing Modes

1

AI Chat

Describe what you want in plain English.
Add a pricing table with three tiers

Make the colors match this reference image

Change the hero section to be more minimal
AI implements your changes and updates the preview.Checks Passed
2

Visual Editor

Click any element to edit it directly.What you can change:
  • Text content (click and type)
  • Colors and styles (select element, modify CSS)
  • Images (upload and replace)
  • Layout and spacing
How it works:
  • Toggle “Edit” mode in the header
  • Click any element on the page
  • Make your changes
  • Submit to apply
Changes apply exactly as you specify—no automatic “fixes” or modifications.Checks Passed
3

Code Editor

Full access to React/TypeScript files.
4

For developers

  • Click “Open in VSCode” to edit files directly
  • Run terminal commands (npm, bun, git)
  • Modify any file in the project
  • Database migrations and scripts
Checks Passed
5

File structure

src/web/     → Frontend (React components)
src/api/     → Backend (Hono server)
public/      → Images and assets
tasks.json   → Work tracking

​
Functional Changes

Through chat: 
Add email validation to the contact form

Make the navigation sticky on scroll

Connect my Stripe account for payments

​
Design Changes

With reference images: 
Make it look more like this [uploads screenshot]
AI analyzes the image and matches:
  • Color palette
  • Typography
  • Layout style
  • Spacing and proportions
Without references: 
Make the design more vibrant and modern
AI interprets and applies design updates.

​
Version Control

Each update creates a snapshot:
  • Full git commit with description
  • Timestamp and change summary
  • Rollback available instantly
Version history: Click “Version History” to see all updates and restore any previous version. Checks Passed

​
Tips for Success

Be specific: “Add a hero section with headline, subtext, and CTA button” beats “Make a homepage” Share references: Upload images instead of describing designs—AI sees what you see Start simple: Build core features first, add polish later Test often: Check preview after each major change
Use the right tool:
  • Quick fixes → Visual editor
  • New features → AI chat
  • Precise control → Code editor
Trust the process: Let AI handle design decisions—it knows what works Iterate naturally: Build, review, refine. Repeat until perfect.

​
Getting Help

Stuck on something ? Ask AI in chat: 
How do I add authentication ?

Show me how to query the database

What's the best way to handle file uploads ?
AI guides you through implementation.
Ready to build ? Start a new AI Website or use an inspiration