AIUIaiui/docs

Build a Landing Page

This walkthrough guides you through creating a complete SaaS landing page with multiple sections and design variants, all from simple prompts.

Time: ~10 minutes
Result: A multi-section landing page with dark mode variant

Step 1: Create a New Web Project

From your dashboard, click New Project:

  1. Name it "Analytics Landing Page"
  2. Select Web as the project type
  3. Click Create

You'll land on an empty canvas ready for your designs.

Step 2: Select a Preset

Before generating, choose a visual style. Click the preset dropdown in the prompt bar and select:

Modern Clean — Minimal design with generous whitespace, subtle shadows, and contemporary typography.

This preset instructs the AI to follow a cohesive visual direction for all generations.

Step 3: Generate the Hero Section

Click the prompt bar and type:

Hero section for a SaaS analytics product with headline, subtitle, CTA button, and a dashboard placeholder image

Press Enter.

Watch as your first node appears. The AI generates a hero section with:

  • Bold headline
  • Supporting subtitle text
  • Call-to-action button
  • Placeholder showing a dashboard mockup

Step 4: View Your First Node

The node now sits on your canvas showing a live preview of the hero section. Click it to select it — you'll see a blue border indicating selection.

Press Shift + Space to open the full-size preview. Interact with the CTA button to see hover states work. Press Escape to close.

Step 5: Add a Pricing Section

With the hero node still selected, type a new prompt:

Add pricing section with three tiers: Starter at $9/mo, Pro at $29/mo, Enterprise with custom pricing

Press Enter.

A new node appears below the hero, connected by a line. This is a child node — it builds on the context of the parent.

Step 6: See the Connection

Your canvas now shows two nodes connected by a line:

[Hero Section]
      |
      v
[Pricing Section]

The connection indicates the pricing section is a continuation/child of the hero. AIUI tracks this relationship for context.

Step 7: Create a Dark Mode Branch

Select the hero node again (click it). Now type:

Dark mode variant with gradient background from purple to blue

Press Enter.

A new node appears to the right of the hero — this is a branch, an alternative version rather than a continuation.

Step 8: Review Your Three Nodes

You now have three nodes on your canvas:

[Hero - Light]  ----  [Hero - Dark Mode]
      |
      v
[Pricing Section]
  • Hero - Light: Your original design
  • Hero - Dark Mode: Alternative color scheme
  • Pricing: Continuation section

Zoom out with Cmd/Ctrl + - to see all three at once.

Step 9: Preview Each Variant

Compare your options:

  1. Click the light hero node, press Shift + Space to preview
  2. Close with Escape
  3. Click the dark mode variant, press Shift + Space
  4. Compare the two approaches side by side on your canvas

This is the power of branching — explore multiple directions without losing work.

Step 10: Share for Team Feedback

Ready to get input from your team?

  1. Click the Share button in the top toolbar
  2. Click Generate Link
  3. Copy the shareable URL
  4. Send to teammates via Slack, email, or wherever you collaborate

Your team can:

  • View all three nodes on the canvas
  • Pan and zoom to explore
  • See the relationships between designs
  • No sign-in required for viewing

What You Built

In 10 minutes, you created:

  • A SaaS landing page hero section
  • A pricing section with three tiers
  • A dark mode design variant
  • A shareable link for team review

Next Steps

Continue building your landing page:

  • Add features, testimonials, or footer sections as child nodes
  • Create more branches to explore different visual directions
  • Use Comments to discuss specific areas with your team
  • Export final designs when ready

Related: