Design First, Then Build

Establish your visual language before building features. XAIO automatically creates a XAIO.md file after the first generation that captures your design system and conventions. This file persists across all chats.

Before we start building features, let us establish the design system: dark theme, Inter font, blue accent color #3b82f6, 8px border radius, subtle shadows, and generous padding. Apply this to all components.

You don't prompt your way into good design. You prompt from it.

Map the User Journey

Think about transitions between screens, not isolated screens. Ask yourself:

What does the user see first?
What builds trust?
What gives them confidence to act?
Where does that action lead?

Even a simple three-step sketch — Hero → Features → CTA — makes your prompts much more effective.

Build by Component

Instead of prompting for an entire page at once, build section by section:

1. "Create the navigation with logo and menu links"

2. "Add a hero section with headline, subtext, and CTA button"

3. "Add a features grid with 3 cards below the hero"

4. "Add a pricing table with 3 tiers"

This gives you more control and makes it easier to fix individual sections.

Use Real Content from the Start

Generic placeholder text leads to generic layouts. Use actual copy:

Real headlines reveal whether the layout works
Real CTAs show if buttons are sized correctly
Real descriptions test if cards can handle varying text lengths

Think About States Early

Consider different UI states from the beginning:

Create the dashboard page. Include states for: loading (skeleton placeholders), empty state (friendly illustration with "No data yet" message), error state (retry button), and the normal data view.

Set Guardrails

Always tell the AI what NOT to touch:

Add the new feature to the settings page. Do not modify the navigation, sidebar, or any shared components.

Repeat critical instructions across prompts — the AI does not always remember context from much earlier in the conversation.

Break Features Into Steps

For complex features, use a step-by-step approach:

1. Create the page and layout

2. Add the UI components

3. Connect the data

4. Add logic and edge cases

5. Test each user role

Let us build the user management feature step by step. First, create the /admin/users page with a table layout. Do not connect any data yet — just the static UI.

Use Plan Confirmation

For new projects, XAIO shows a plan before building. Review it carefully:

Does it include all sections you need?
Is the tech approach right?
Click "No, refine" if something is missing

For complex changes, 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.

Version Your Milestones

Think in milestones, not just individual changes:

Layout locked ✓
Content added ✓
Logic wired ✓
Polish complete ✓

If you have GitHub connected, each milestone is a commit you can return to. Before risky changes, note the current state.

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. Implement this role-based access for the dashboard page.

Handle Frustration

When things are not working:

Take a breath and be more specific
Show the error: paste the exact error message or describe what is wrong
Ask the AI to investigate: "Investigate this bug but do not change any code yet. Suggest 3 possible causes."
If stuck in a loop: "Undo the last 2 changes and try a completely different approach"

The Golden Rule

Take your time with prompts. The more precise your inputs, the better your outputs. One well-crafted prompt saves ten iterations.

Best Practices