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

# Generate UI screens from text prompts with Flowstep

> Use Flowstep to generate one screen or up to 6 screens at once from a single text prompt — ideal for fast UI ideation and exploring full flows.

<iframe src="https://www.youtube.com/embed/hHNwjKz_264" 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 />

Flowstep generates UI screens from natural language prompts, letting you go from idea to visual design in seconds. Whether you need a single screen to validate a concept or a full set of screens covering an entire user journey, a well-written prompt is all it takes to get started.

## Generate a design

<Steps>
  <Step title="Open a new project">
    From your Flowstep dashboard, create a new project or open an existing one where you want to add screens.
  </Step>

  <Step title="Write your prompt">
    Type a description of the screen or screens you want. Be specific about the type of app, the user goal, and the content you expect to see.
  </Step>

  <Step title="Specify how many screens you want">
    By default, Flowstep generates a single screen. If you want multiple screens, say so explicitly in your prompt — Flowstep can generate up to 6 screens from one prompt.
  </Step>

  <Step title="Generate">
    Submit your prompt. Flowstep produces your screens and displays them in the editor, ready to review or refine.
  </Step>
</Steps>

## Single screen vs. multiple screens

You can generate either one screen or up to 6 screens from a single prompt. Both approaches suit different stages of design work.

* **One screen** — best for exploring a specific UI state, component, or focused concept.
* **Multiple screens** — best for mapping out flows, comparing layout options, or covering a full user journey quickly.

When you want multiple screens, be explicit in your prompt. Flowstep uses the wording of your prompt to decide how many screens to produce, so vague prompts typically return a single screen. Generated screens are named **Screen 1**, **Screen 2**, and so on — use these names to refer to a specific screen in follow-up prompts.

## More ways to prompt

Text isn't the only input. You can also:

* **Attach files** — add images (JPG, PNG, WEBP) or documents (PDF, MD, TXT) up to 3 MB each to the prompt, via drag-and-drop, the file picker, or by pasting. Reference an attached image in your prompt and Flowstep incorporates it into the generated screens. See [Use References](/design-references).
* **Dictate your prompt** — click the mic button in the prompt bar (or press **Cmd+Shift+V** on Mac, **Ctrl+Shift+V** on Windows) and speak for up to 60 seconds. The transcript is appended to whatever you've already typed.
* **Let Flowstep research the web** — when your prompt calls for it (for example, "clone the Stripe pricing page"), Flowstep can search the web and read a page's branding — colors, fonts, logo, UI components — and use it in the generated screens. Flowstep decides on its own whether to research, so it won't necessarily trigger on every prompt; note that recreated websites use different images and navigation than the original.
* **Set design guidelines** — define standing style rules that apply to every generation in the file. See [Design Guidelines](/design-guidelines).

## Writing effective prompts

<Tip>
  **Single-screen prompt example:** "Design a mobile login screen for a fitness tracking app with email and password fields, a sign-in button, and a forgot password link."
</Tip>

<Tip>
  **Multi-screen prompt example:** "Generate multiple screens for a food delivery app onboarding flow—cover selecting cuisine preferences, entering a delivery address, and confirming the first order."
</Tip>

<Tip>
  **Full journey prompt example:** "Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval."
</Tip>

Keep these principles in mind when writing prompts:

* Name the platform (mobile, desktop, tablet) so Flowstep sizes screens correctly.
* Describe the user's goal, not just UI elements—Flowstep infers layout from intent.
* Include key content like labels, actions, or data if they matter to the design.
* Use phrases like "generate multiple screens" or "cover the full user journey" to trigger multi-screen output.
