Skip to main content
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

1

Ö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.
2

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

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

Generera

Skicka in din prompt. Flowstep producerar dina skärmar och visar dem i editorn, redo att granskas eller förfinas.

​
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.
  • 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.

​
Skriva effektiva prompts

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