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:

#TypeDescription1AI ToolChatGPT, Claude, AI assistant2DashboardAnalytics, admin panel3Landing PageProduct homepage, landing page4SaaS AppNotion, Linear multi-module app5Content SiteBlog, documentation site6ToolJSON formatter, image processor7E-commerceOnline shop, shopping cart8CommunityForum, social community9MarketplaceTwo-sided marketplace

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:

#ComponentDescription1ChatInputAI input box2ChatMessageMessage bubble3ChatStreamStreaming output4ConversationListHistory list5ModelSelectorModel selector

Enter a number or describe the components you need:

---

Phase 4: UI Library#

Please select a UI component library:

#UI LibraryDescription0Use recommendedshadcn/ui + Tailwind (default)1shadcn/uiHighly customizable, Radix-based2Chakra UIFast prototyping, theme system3MantineFull-featured, modern feel4Ant DesignEnterprise admin, strict规范

Enter a number or specify another:

---

Phase 5: Design Style#

Please select a design style:

Method 1: Choose from 57 presets

#DesignDescription1claudeClaude AI style2linearLinear dark & minimal3stripeStripe light & business4openaiOpenAI style5vercelVercel minimalist...Others 52Full list

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):

#Icon LibraryDescription0Use recommendedLucide React (default)1Lucide ReactModern & minimal, default option2IconfontAlibaba icon set, custom icons3HeroiconsTailwind official icons4Phosphor IconsRich & diverse5No icons needed-

Enter a number or specify another:

---

Project Summary (Confirmation)#

text

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

bash

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#

text

/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#

FilePurposereferences/templates.mdBlueprint definition (pages, components, scaffolding)references/design-catalog.md57 design style URL mappingsreferences/best-practices.mdTech stack best practicesreferences/tech-catalog.mdTech documentation URL mappings

---

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