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

# Docs

> Flowstep generates production-ready UI from text prompts. Iterate via chat, export to Figma, or connect your IDE via MCP.

<Frame>
  <img alt="V2 Ph Gallery 2" title="V2 Ph Gallery 2" lightAlt="Flowstep-generated music player UI in light mode" darkAlt="Flowstep-generated music player UI in dark mode" src="https://mintcdn.com/flowstep/9tdNFQ3IqDuOMu2P/images/v2-ph-gallery-2.jpg?fit=max&auto=format&n=9tdNFQ3IqDuOMu2P&q=85&s=2a9925e5fd3a12f8bc3e67486212af77" className="dark:hidden" width="2540" height="1520" data-path="images/v2-ph-gallery-2.jpg" />

  <img alt="V2 Ph Gallery 2" title="V2 Ph Gallery 2" lightAlt="Flowstep-generated music player UI in light mode" darkAlt="Flowstep-generated music player UI in dark mode" src="https://mintcdn.com/flowstep/9tdNFQ3IqDuOMu2P/images/v2-ph-gallery-2.jpg?fit=max&auto=format&n=9tdNFQ3IqDuOMu2P&q=85&s=2a9925e5fd3a12f8bc3e67486212af77" className="hidden dark:block" width="2540" height="1520" data-path="images/v2-ph-gallery-2.jpg" />
</Frame>

Flowstep generates production-ready UI screens from plain text prompts. Describe the screen you want — get a designed interface back in seconds. Iterate through follow-up prompts or direct edits, export to Figma or image files, and share with your team via a single link.

For developers and technical designers, Flowstep also runs as an [MCP server](/mcp/overview) — generate and edit screens directly from Cursor, Claude Code, Windsurf, or Claude Desktop without leaving your IDE.

<CardGroup cols={2}>
  <Card title="Get Started" icon="rocket" href="/getting-started">
    Sign up for free and generate your first screen in minutes.
  </Card>

  <Card title="MCP Server" icon="terminal" href="/mcp/overview">
    Use Flowstep from Cursor, Claude Code, or any MCP-compatible client.
  </Card>

  <Card title="Generating designs" icon="wand-magic-sparkles" href="/generating-designs">
    How to write prompts that produce the screens you actually want.
  </Card>

  <Card title="Figma integration" icon="figma" href="/figma-integration">
    Paste Flowstep designs into an existing Figma file with one shortcut.
  </Card>
</CardGroup>

## How it works

<Steps>
  <Step title="Sign up">
    Create a free account at [flowstep.ai](https://flowstep.ai). No credit card required.
  </Step>

  <Step title="Describe what you want">
    Type a prompt — for example, "Onboarding screen for a fitness tracking app with email signup and a progress goal step."
  </Step>

  <Step title="Generate and refine">
    Flowstep returns the screen instantly. Iterate via follow-up prompts, edit the canvas directly, or generate variations.
  </Step>

  <Step title="Export or share">
    Export as PNG/JPG, paste into Figma, or share a view-only link with stakeholders. They don't need an account.
  </Step>
</Steps>

## Explore the docs

<CardGroup cols={2}>
  <Card title="Editing designs" icon="pen-to-square" href="/editing-designs">
    Refine designs through prompts or direct manipulation on the canvas.
  </Card>

  <Card title="Design references" icon="image" href="/design-references">
    Attach images, PRDs, or URLs to guide your designs without long prompts.
  </Card>

  <Card title="Sharing designs" icon="share-nodes" href="/sharing-designs">
    Share view-only links — recipients don't need a Flowstep account.
  </Card>

  <Card title="Billing & plans" icon="credit-card" href="/billing">
    Message limits, billing cycles, and plan options.
  </Card>
</CardGroup>