Prompting & Best Practices

Writing Great Prompts

The quality of your prompt directly determines the quality of the output. This guide covers proven patterns used by the best XAIO builders.

Plan Before You Prompt

Before typing, answer four questions:

What is this product or feature?
Who is it for?
Why will they use it?
What is the one key action the user should take?

Aligned thinking produces sharp prompts. Vague ideas generate vague outputs.

Ask the AI to Clarify

Add this to any prompt to surface hidden requirements:

Build a booking system for a yoga studio. Ask me any questions you need to fully understand what I want from this feature and how I envision it.

The AI responds with focused follow-up questions that reveal specifications you would not have independently identified.

Example Prompts

Copy and customize these proven prompts:

Website SaaS Landing Page

Create a modern SaaS landing page for a project management tool called "TaskFlow". Dark theme with blue accents. Include: hero section with headline and CTA, 3 feature cards with icons, testimonials carousel, pricing table with Free/Pro/Enterprise tiers, FAQ section, and footer with social links.

Website Restaurant Website

Build a restaurant website for an Italian restaurant called "Bella Cucina". Warm, elegant design with dark wood tones. Sections: hero with food photo, menu with categories (Antipasti, Primi, Secondi, Dolci), about section with story, reservation form, location map, and opening hours.

Website Portfolio

Create a personal portfolio for a UX designer. Minimal, clean design with lots of whitespace. Include: hero with name and title, project gallery with filter by category, about section, skills list, testimonials from clients, and contact form.

Web App Fitness Tracker Dashboard

Build a dashboard for a fitness tracking app. Modern dark UI. Include: sidebar navigation, overview page with stats cards (steps, calories, heart rate), workout history table, progress charts, and settings page with profile form.

Web App CRM System

Build a CRM system for a small sales team. Clean, professional UI with a sidebar. Include: contacts list with search and filters (status, company, last contact date), contact detail page with activity timeline and notes, deal pipeline as a Kanban board with drag-and-drop between stages (Lead, Qualified, Proposal, Won, Lost), simple dashboard with total deals, conversion rate, and revenue chart.

Web App Inventory Management

Create an inventory management app for a small warehouse. Include: product catalog with categories, stock levels, and low-stock alerts, incoming/outgoing shipment forms that auto-update quantities, barcode search field, supplier directory with contact info, and a dashboard showing total items, items below reorder point, and shipments this week.

Web App Project Time Tracker

Build a time tracking tool for freelancers. Include: timer with start/stop and manual entry, project list where each project has an hourly rate and client name, weekly timesheet view as a table (rows = projects, columns = days), monthly report page with total hours, billable amount per project, and a chart of hours per week, and an export button that downloads the report as CSV.

Advanced Examples

Complex prompts that combine multiple features and detailed specifications:

Web App SaaS Analytics Platform

Build an analytics dashboard for a SaaS product. Dark theme, Inter font, accent color #6366f1, border-radius 12px, subtle glassmorphism on cards.

Layout: collapsible sidebar that auto-expands on hover (icons-only when collapsed, full labels when expanded, smooth 200ms transition). Sidebar items: Dashboard, Customers, Reports, Settings. Active item highlighted with accent color.

Pages:
- Dashboard: KPI cards (MRR, churn rate, active users, NPS) with sparkline charts, large area chart for revenue over 12 months, recent activity feed
- Customers: data table with search, sort, status filter (Active/Churned/Trial), row click opens detail drawer from right
- Reports: date range picker, downloadable PDF/CSV export buttons, chart type toggle (bar/line/pie)
- Settings: profile form, team members list with role badges (Admin/Member/Viewer), invite modal

Auth: login page with email/password + Google OAuth button, protected routes redirect to /login, show user avatar + name in sidebar footer.

Responsive: sidebar becomes bottom tab bar on mobile, cards stack vertically, tables switch to card layout below 768px.

Web App Project Management Board

Build a project management tool inspired by Linear. Light theme with option to toggle dark mode. Design: clean, lots of whitespace, SF Pro or Inter font, muted gray borders, accent #2563eb, rounded-lg corners.

Sidebar: auto-collapsing on hover — collapsed shows only icons (24px), expanded shows icon + label. Sections: Projects, My Tasks, Inbox, Settings. Bottom: user avatar with dropdown (Profile, Theme Toggle, Logout).

Main views:
- Board view: Kanban columns (Backlog, Todo, In Progress, Review, Done) with drag-and-drop cards. Each card: title, priority badge (Urgent/High/Medium/Low with color), assignee avatar, due date. Quick-add at column bottom
- List view: sortable table with inline editing for title and status, multi-select with bulk actions (move, assign, delete)
- Timeline view: horizontal Gantt-style chart, draggable bars to adjust dates

Auth: email/password login, role-based access (Owner can delete project, Member can edit tasks, Viewer is read-only). Show permissions error toast when unauthorized action attempted.

Responsive: board scrolls horizontally on tablet, switches to stacked list on mobile. Sidebar becomes slide-out drawer with hamburger menu on screens below 1024px.

Web App Agency Portfolio with Client Portal

Build a digital agency website with an integrated client portal. Design: premium, dark base (#0a0a0f), accent gradient from #8b5cf6 to #ec4899, large bold headings in Clash Display or Inter, body text in light gray, generous spacing (py-20 per section), smooth scroll-triggered fade-in animations.

Public pages (no auth):
- Home: full-screen hero with animated gradient mesh background, headline + subtext + CTA, logo carousel of clients, 3 service cards with hover lift effect, selected case studies grid (image + title + tag), team section, contact form with validation
- Work: filterable portfolio grid (All/Branding/Web/Mobile), click opens case study detail with image gallery
- About: agency story, team grid with hover overlay showing role + LinkedIn link

Client portal (auth required):
- Login with email/password, "Forgot password" flow
- Dashboard: active projects with progress bar, recent file uploads, upcoming milestones
- Project detail: file upload area (drag-and-drop), comment thread per deliverable, approval buttons (Approve/Request Changes)
- Invoices: list with status badges (Paid/Pending/Overdue), PDF download

Sidebar in portal: auto-collapse on hover, icons-only when collapsed, smooth expand. Items: Dashboard, Projects, Files, Invoices, Support.

Responsive: hero text scales down on mobile, portfolio grid goes from 3 columns to 1, sidebar becomes bottom sheet on mobile, tables become card stacks.

Use Design Buzzwords

Specific style keywords influence typography, spacing, shadows, and color palette:

minimal — lots of whitespace, thin borders, subtle shadows
premium — dark backgrounds, gold/silver accents, large typography
cinematic — layered depth, dramatic contrast, motion blur effects
playful — rounded corners, bright colors, bouncy animations
developer-focused — monospace fonts, dark mode, code-like elements

Design a landing page hero that feels premium and cinematic. Use layered depth, translucent surfaces, soft motion blur, and dramatic contrast between headline and background.

Use a calm, wellness-inspired design. Soft gradients, muted earth tones, round corners, and generous padding. Overall tone should feel gentle and reassuring.

Reference Known Sites

Website Stripe-Style Pricing

Design a pricing page similar to Stripe. Three tiers side by side, the middle one highlighted. Clean typography, plenty of whitespace, feature comparison table below.

Website Linear-Style Hero

Create a hero section inspired by Linear.app. Large bold headline, subtle gradient background, floating product screenshot, and a prominent CTA button.

Website Testimonial Cards

Create a testimonial section with 3 cards side by side. Each card has an avatar, name, company, star rating, and quote. Cards should have soft shadows and lift on hover.

A full-page prompt gives you noise. A section-based prompt gives you signal.

Use Real Content

Do not use "lorem ipsum" or generic labels. Real words produce better layouts:

Hero section with headline: "Design Calmly." Subtext: "Turn chaos into structure with TaskFlow." CTA: "Start Building Free." Use copy-centered layout with generous vertical spacing.

Real headlines may need different line breaks, CTAs work better as verbs than nouns, and the AI makes smarter spacing decisions with actual content.

Use UI Vocabulary

Be specific about component types instead of vague descriptions:

Instead of "a popup" → say " with a close button"
Instead of "a notification" → say " notification in the bottom-right"
Instead of "a selection" → say " with search filter"
Instead of "a toggle" → say " component with on/off state"

Create a card with a user profile picture, name, and a follow button. Add a badge for verified users, and show a tooltip when hovering over the badge.

Fix the mobile layout of the pricing table. Only change the pricing section — do not touch any other components.

Iterate in Small Steps

After initial generation, make one change at a time:

Make the hero section taller and change the background to a dark gradient from #0f172a to #1e293b

In the pricing section, add a "Most Popular" badge to the Pro tier and change its border to blue

Add a testimonials section below the features. Show 3 testimonials in cards with avatar, name, company, and quote.

Debugging Prompts

When something breaks:

The page shows a blank screen after the last change. Check the browser console errors and fix the issue.

The API endpoint /api/users returns 500. Read the backend logs, find the error, and fix it.

The button click does nothing. Debug the onClick handler in the HeroSection component and fix it.

When the AI Gets Stuck

If the AI keeps making the same mistake:

Be more specific about the exact file and component
Use Design Mode to click the element, then describe the change
Say: "Undo the last change and try a different approach"
Break the request into smaller steps

Prompt Templates

Reusable patterns for common tasks:

Web App CRUD Interface

Create a CRUD interface for customer contacts. Include: list view with search by name/email and pagination, add/edit form in a modal with name, email, phone, and company fields, delete confirmation dialog, and loading states.

Web App Dashboard Widget

Build a dashboard widget showing monthly revenue. Include: current value in large text, trend indicator (up/down arrow with percentage), comparison to last month, and a small area chart for the last 12 months.

Web App Authentication

Implement email/password authentication. Include: login and register forms with validation, password reset via email link, JWT session management, and protected routes that redirect unauthenticated users to /login.

Progressive Enhancement

Build in layers for best results:

1. Core: "Create a basic todo list with add and delete"

2. Persistence: "Save todos to localStorage so they survive page reload"

3. UX: "Add completion checkboxes, drag-to-reorder, and filter by status"

4. Polish: "Add smooth animations for adding/removing items and an empty state illustration"

XAIO.md — Your Project’s Memory

XAIO.md is a file the AI creates and maintains automatically. It stores your design system, conventions, and decisions — and persists across all chats.

You can use it proactively:

Before we start building, let’s establish the design system: dark theme, Inter font, accent color #3b82f6, 8px border radius, subtle shadows, generous padding. Save this to XAIO.md.

Update XAIO.md: we switched from Tailwind’s default colors to a custom palette. Primary: #1e40af, Secondary: #059669, Background: #0f172a. All new components should use these.

Read XAIO.md and tell me what design system and conventions are defined for this project.

The AI reads XAIO.md at the start of every chat. You can also edit it manually in the Files tab (XAIO.md sub-tab) or view it in Project Settings.

Plan Before You Build

For complex features, ask the AI to plan first:

I want to add a multi-step checkout flow. Before building, describe the approach: which files you will create, what the data flow looks like, and how you will handle validation. Do not write code yet.

Role-Based Prompting

If your app has different user roles, be explicit:

As an Admin, I should see the full dashboard with edit controls. As a Viewer, the same page should show read-only data without edit buttons.

Language

Write in whatever language you prefer — German, English, or any other. The AI responds in your language. All generated code is always in English.