Flowstep genererar UI-skärmar från prompter skrivna på naturligt språk, så att du kan gå från idé till visuell design på några sekunder. Oavsett om du behöver en enda skärm för att validera ett koncept eller en komplett uppsättning skärmar som täcker en hel användarresa, är en välskriven prompt allt du behöver 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 den skärm eller de skärmar du vill ha. Var specifik om typen av app, användarens mål och det innehåll du förväntar dig att se.
3
Ange hur många skärmar du vill ha
Som standard genererar Flowstep en enda skärm. Om du vill ha flera skärmar ska du säga det uttryckligen i din prompt — Flowstep kan generera upp till 6 skärmar från en prompt.
4
Generera
Skicka din prompt. Flowstep skapar dina skärmar och visar dem i editorn, redo att granskas eller förfinas.
När du skapar en ny fil och skickar dess första prompt namnger Flowstep filen åt dig utifrån prompten, så att den är lätt att hitta senare. En fil som redan har ett namn — eller tidigare prompter — behåller sitt namn, och du kan byta namn på alla filer själv när som helst.
Stoppa en generering
Medan Flowstep svarar förvandlas skickaknappen till en stoppknapp (Stop Flowstep response). Klicka på den för att stoppa genereringen. I en begäran om flera skärmar finns de skärmar som redan är klara kvar på din canvas, och de som inte är klara tas bort. Om du stoppar efter att Flowstep har börjat bygga skärmar används ändå meddelandet — se meddelanden och gränser.En skärm eller flera skärmar
Du kan generera antingen en skärm eller upp till 6 skärmar från en enda prompt. Båda sätten passar olika stadier i designarbetet.- En skärm — bäst för att utforska ett specifikt UI-tillstånd, en komponent eller ett avgränsat koncept.
- Flera skärmar — bäst för att kartlägga flöden, jämföra layoutalternativ eller snabbt täcka en hel användarresa.
Fler sätt att skriva prompter
Text är inte den enda indatan. Du kan också:- Bifoga filer — lägg till bilder (JPG, PNG, WEBP) eller dokument (PDF, MD, TXT) på upp till 3 MB vardera i prompten, genom att dra och släppa, med filväljaren eller genom att klistra in. Hänvisa till en bifogad bild i din prompt så tar Flowstep med den i de genererade skärmarna. Se Använd referenser.
- Diktera din prompt — klicka på mikrofonknappen i promptfältet (eller tryck på Cmd+Shift+V på Mac, Ctrl+Shift+V på Windows) och tala i upp till 60 sekunder. Transkriptionen läggs till efter det du redan har skrivit.
- Låt Flowstep söka på webben — när din prompt kräver det (till exempel “klona Stripes prissida”) kan Flowstep söka på webben och läsa en sidas varumärkesprofil — färger, typsnitt, logotyp och UI-komponenter — och använda den i de genererade skärmarna. Flowstep avgör själv om den ska söka, så det utlöses inte nödvändigtvis för varje prompt. Observera att återskapade webbplatser använder andra bilder och navigering än originalet.
- Ange designriktlinjer — definiera stilregler som gäller för alla genereringar i filen. Se Designriktlinjer.
Skriva effektiva prompter
Tänk på dessa principer när du skriver prompter:- Ange plattformen (mobil, desktop, surfplatta) så att Flowstep dimensionerar skärmarna korrekt.
- Beskriv användarens mål, inte bara UI-element — Flowstep härleder layouten från avsikten.
- Ta med viktigt innehåll, till exempel etiketter, åtgärder eller data, om det spelar roll för designen.
- Använd fraser som “generera flera skärmar” eller “täck hela användarresan” för att utlösa utdata med flera skärmar.