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

# Generera UI-skärmar från textprompts med Flowstep

> Använd Flowstep för att generera en skärm eller upp till 6 skärmar på en gång från en enskild textprompt — perfekt för snabb UI-ideation och att utforska hela flöden.

<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 genererar UI-skärmar från naturliga språkprompts och låter dig gå från idé till visuell design på sekunder. Oavsett om du behöver en enskild skärm för att validera ett koncept eller en fullständig uppsättning skärmar som täcker en helt användarresa, behövs bara en väl skriven prompt för att komma igång.

## Generera en design

<Steps>
  <Step title="Öppna ett nytt projekt">
    Från din Flowstep-instrumentpanel skapar du ett nytt projekt eller öppnar ett befintligt där du vill lägga till skärmar.
  </Step>

  <Step title="Skriv din prompt">
    Skriv en beskrivning av skärmen eller skärmarna du vill ha. Var specifik om appens typ, användarens mål och det innehål du förväntar dig att se.
  </Step>

  <Step title="Ange hur många skärmar du vill ha">
    Som standard genererar Flowstep en enskild skärm. Om du vill ha flera skärmar måste du säga det uttryckligt i din prompt — Flowstep kan generera upp till 6 skärmar från en prompt.
  </Step>

  <Step title="Generera">
    Skicka in din prompt. Flowstep producerar dina skärmar och visar dem i editorn, redo att granskas eller förfinas.
  </Step>
</Steps>

## En skärm eller flera skärmar

Du kan generera antingen en skärm eller upp till 6 skärmar från en enskild prompt. Båda tillvagagångssätten passar olika stadier av designarbete.

* **En skärm** — bäst för att utforska ett specifikt UI-tillstånd, komponent eller fokuserat koncept.
* **Flera skärmar** — bäst för att kartlägga flöden, jämföra layoutalternativ eller täcka en full användarresa snabbt.

När du vill ha flera skärmar måste du vara tydlig i din prompt. Flowstep använder ordalydelsen i din prompt för att bestämma hur många skärmar som ska produceras, så vaga prompts ger vanligtvis en enskild skärm. Genererade skärmar heter **Screen 1**, **Screen 2** och så vidare — använd dessa namn för att referera till en specifik skärm i uppföljningsprompts.

## Fler sätt att skriva prompts

Text är inte den enda inmatningen. Du kan också:

* **Bifoga filer** — lägg till bilder (JPG, PNG, WEBP) eller dokument (PDF, MD, TXT) upp till 3 MB vardera i prompten via dra-och-släpp, filväljaren eller genom att klistra in. Referera till en bifogad bild i din prompt och Flowstep inkorporerar den i de genererade skärmarna. Se [designreferenser](/sv/design-references).
* **Diktera din prompt** — klicka på mic-knappen i promptfältet (eller tryck **Cmd+Shift+V** på Mac, **Ctrl+Shift+V** på Windows) och tala i upp till 60 sekunder. Transkriptionen läggs till det du redan har skrivit.
* **Låt Flowstep söka på webben** — när din prompt kräver det (till exempel "klona Stripe-prissidan"), kan Flowstep söka på webben och läsa en sidas varumärkesidentitet — färger, teckensnitt, logotyp, UI-komponenter — och använda det i de genererade skärmarna. Flowstep bestämmer själv om den ska söka, så det utlöses inte nödvändigtvis på varje prompt; notera att återskapade webbplatser använder olika bilder och navigering än originalet.
* **Ange designriktlinjer** — definierar permanenta formatregler som gäller varje generation i filen. Se [designriktlinjer](/sv/design-guidelines).

## Skriva effektiva prompts

<Tip>
  **Exempel på en-skärms-prompt:** "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>
  **Exempel på flerskärms-prompt:** "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>
  **Exempel på prompt för fullständig användarresa:** "Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval."
</Tip>

Tänk på dessa principer när du skriver prompts:

* Namnge plattformen (mobil, skrivbord, surfplatta) så att Flowstep storleksställer skärmarna korrekt.
* Beskriv användarens mål, inte bara UI-element — Flowstep drar slutsatser om layout från avsikten.
* Inkludera nyckelinnehål som etiketter, åtgärder eller data om de är viktiga för designen.
* Använd fraser som "generate multiple screens" eller "cover the full user journey" för att utlösa flerskärms-utdata.