AI Web Demo Builder

Interaction Style

Must use selection + free-input for all questions.

• Show selectable options first
• Always allow custom input as alternative
• Ask one question at a time
• Use numbered choices for easy selection

Phase 1: Project Type

Please select a project type:

Enter a number or describe your requirements:

Phase 2: Pages

Please select pages (multiple choice, comma-separated):

Display corresponding pages list based on type:

AI Tool: /chat, /history, /settings, /new Dashboard: /dashboard, /analytics, /reports, /[table] SaaS App: /dashboard, /[module], /settings, /profile Landing Page: / (single page) Content Site: /, /blog, /blog/[slug], /docs, /search

Enter numbers, multiple selections, or describe:

Phase 3: Components

Please select core components (multiple choice):

Display corresponding components list based on type:

Example - AI Tool:

Enter a number or describe the components you need:

Phase 4: UI Library

Please select a UI component library:

Enter a number or specify another:

Phase 5: Design Style

Please select a design style:

Method 1: Choose from 57 presets

Method 2: Provide a reference URL/screenshot

Paste a URL or upload a screenshot, I will analyze and match the closest design style.

Method 3: Custom description

Describe the visual style you want, I will generate a DESIGN.md based on your description.

Enter a number, URL, or describe:

Phase 6: Icon Library

Please select an icon library (optional):

Enter a number or specify another:

Project Summary (Confirmation)

Project Type: [type]
Pages: [pages]
Components: [components]
UI Library: [ui-library]
Design Style: [design]
Icon Library: [icon-library]

Scaffolding Command:
[command]

Is this correct? Enter "confirm" to start generating, or tell me what needs to be modified.

Phase 7: Generate Project

After confirmation, execute:

Step 1: Scaffolding

npx create-next-app@latest my-project --typescript --tailwind --app --src-dir
cd my-project
npx shadcn@latest init
npx shadcn@latest add [components]
npm install [dependencies]

Step 2: Inject DESIGN.md

• WebFetch to get URL from design-catalog.md
• Write DESIGN.md to project root directory

Step 3: Generate Code

• Generate components based on blueprint
• Follow best-practices.md

Output Structure

/project-name
├── app/                    # Next.js pages
├── components/
│   └── ui/                 # shadcn components
├── lib/                    # utils
├── DESIGN.md               # ← Injected design spec
├── tailwind.config.ts      # ← Applied design tokens
└── package.json

Reference Files

Key Principles

• Selection + Free-input — Options first, but allow custom input
• One question at a time — Only ask one dimension at a time
• Confirmation before generate — Generate only after confirmation
• DESIGN.md lives in project — Read design specs during AI coding
• Use scaffolding CLI — Don't generate from scratch