> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superdesign.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow - Generate User Journey Pages

> Flow helps you design the remaining pages of a product once the visual style is confirmed

Flow helps you design the remaining pages of a product once the visual style is confirmed.
Use it to build complete user journeys—such as checkout, onboarding, or account flows—while keeping a consistent design system.

<Frame>
  <img src="https://mintcdn.com/superdesign/ZEW4K16F8uKBax5F/images/flow-4.png?fit=max&auto=format&n=ZEW4K16F8uKBax5F&q=85&s=d509475302b5764cb87c23ef55c17e46" alt="Flow generates complete user journey pages" width="2162" height="1074" data-path="images/flow-4.png" />
</Frame>

***

## How to Access

1. Select a page or frame (this becomes the source style)
2. Click **Create New → Flow**

All pages generated in the flow will inherit the visual style from this source page.

<Frame>
  <img src="https://mintcdn.com/superdesign/ZEW4K16F8uKBax5F/images/flow-1.png?fit=max&auto=format&n=ZEW4K16F8uKBax5F&q=85&s=acb25687bfe981569e15be9fa915fefe" alt="Access Flow from Create New menu" width="1020" height="782" data-path="images/flow-1.png" />
</Frame>

***

## Define the Journey

### Overall Flow Context

Start by describing the journey you want to build.

**Ecommerce**

* "Ecommerce checkout flow from cart to order confirmation"
* "Product discovery to purchase flow for skincare brand"
* "Guest checkout flow with express payment options"

**SaaS**

* "New user onboarding flow from sign-up to first success"
* "Pricing page → upgrade → payment → confirmation flow"
* "Trial user conversion flow"

**Marketplace / Platform**

* "Seller onboarding flow from account creation to first listing"
* "Booking and payment flow for service marketplace"

**Account & Settings**

* "Account setup and profile completion flow"
* "Password reset and security update flow"

This gives the agent high-level intent and structure.

<Frame>
  <img src="https://mintcdn.com/superdesign/ZEW4K16F8uKBax5F/images/flow-2.png?fit=max&auto=format&n=ZEW4K16F8uKBax5F&q=85&s=21de7bac31cd247d2456dc7b278e7dc6" alt="Define the overall flow context" width="2462" height="1502" data-path="images/flow-2.png" />
</Frame>

***

## Plan Pages

You have two ways to define the flow:

### Auto Plan

1. Click **Auto Plan**
2. The agent will:
   * Design the full journey
   * Decide which pages are needed
   * Propose layouts for each page

Best when you want speed or a standard flow.

### Manual Pages

1. Click **+ Page**
2. Define each page yourself:
   * Page purpose
   * Page layout

<Info>
  You only need to specify the layout here. Style automatically follows the source page where the flow was created.
</Info>

<Frame>
  <img src="https://mintcdn.com/superdesign/ZEW4K16F8uKBax5F/images/flow-3.png?fit=max&auto=format&n=ZEW4K16F8uKBax5F&q=85&s=e7e6cea8e91f463bc7269c6d91258dfb" alt="Plan pages with Auto Plan or manually" width="884" height="1530" data-path="images/flow-3.png" />
</Frame>

***

## Using Layout Inspirations

You can reuse layouts from the Superdesign Prompt Library:

1. Go to: [Superdesign Prompt Library](https://app.superdesign.dev/library)
2. Find a page you like
3. Click **Copy layout**
4. Paste it into the Flow page definition

This lets you mix proven layouts with your own journey logic—without restyling.

<Frame>
  <img src="https://mintcdn.com/superdesign/ZEW4K16F8uKBax5F/images/flow-5.png?fit=max&auto=format&n=ZEW4K16F8uKBax5F&q=85&s=a5be5ff4e6f2ebc86b7fe4b7808c0bdb" alt="Copy layouts from the Prompt Library" width="1402" height="1546" data-path="images/flow-5.png" />
</Frame>

***

## When to Use Flow

Use Flow when:

* You've locked in a visual direction
* You want to design connected pages beyond the landing page
* You need consistency across a full user journey

<Info>
  Flow focuses on structure and journey, not visual exploration—that's what Branch is for.
</Info>