Templates

Starting a Project

When you create a new project, you have two options:

1. Describe from scratch

Type a detailed prompt and the AI builds everything from your description. Best for unique designs and custom requirements.

2. Use example prompts

The dashboard shows popular example prompts you can click to start:

• "Modern SaaS landing page with pricing"
• "Portfolio website with project gallery"
• "Restaurant website with menu and reservations"
• "E-commerce store with product catalog"

Click an example to fill the prompt, then customize it before building.

Design Inspiration

Reference known sites or styles in your prompt:

• "Stripe-style pricing page"
• "Notion-inspired dashboard"
• "Apple-style product showcase"

The AI understands these references and applies similar design patterns.

What the AI Generates

For every project, XAIO creates:

• React components — Modular, reusable UI components
• Tailwind styling — Responsive, modern CSS
• File structure — Organized project layout
• Routing — Multi-page navigation (if needed)
• Responsive design — Works on desktop, tablet, and mobile

After Generation

Once the initial project is built, iterate with chat:

• Change any aspect of the design
• Add new sections or features
• Upload your own brand assets
• Connect integrations (database, GitHub, etc.)