> ## 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.

# What is Flowstep?

> Flowstep is an AI design tool that generates polished UI screens from text prompts. Learn what it does, who it's for, and what you can build with it.

<iframe src="https://www.youtube.com/embed/ziyHZVaSbvQ" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

Describe the screen you want, get a designed interface back in seconds.

For developers, it's the fastest way to spec a UI before writing the code. For PMs and founders, it's a way to communicate product ideas without ambiguity. For designers, it's a starting point that skips the blank canvas.

## What you can do with Flowstep

* **Generate screens from text** — describe what you want, get a designed UI in seconds
* **Iterate through prompts or direct edits** — refine layouts, copy, and styling without leaving the canvas
* **Preview as an interactive prototype** — Flowstep links your screens into a clickable flow automatically. See [Prototypes](/prototypes).
* **Connect to your IDE via MCP** — generate and edit screens from Cursor, Claude Code, Windsurf, or Claude Desktop. See [MCP Server](/mcp/overview).
* **Export to Figma, code, or as image files** — paste straight into an existing Figma file, export the code, or download screens as PNG/JPG
* **Share with one link** — reviewers don't need a Flowstep account to view or comment

## Who Flowstep is for

* **Developers** building product UI without a designer on call, or who want to spec a screen visually before implementing it
* **Product managers and founders** communicating ideas visually or validating an idea
* **Designers** skipping the blank canvas — start from a generated layout and edit from there

<Note>
  No design experience required. If you can describe a screen in plain English, Flowstep can generate it.
</Note>

## Where to go next

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/getting-started">
    Generate your first screen in under five 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>