Flowstep genererer UI-skærme fra naturligt sproget prompts, så du kan gå fra idé til visuelt design på sekunder. Uanset om du har brug for en enkelt skærm til at validere et koncept eller et helt sæt skærme, der dækker en hel brugerrejse, er en velformuleret prompt alt, hvad du skal bruge for at komme i gang.
Generer et design
1
Åbn et nyt projekt
Fra dit Flowstep-dashboard kan du oprette et nyt projekt eller åbne et eksisterende projekt, hvor du vil tilføje skærme.
2
Skriv din prompt
Skriv en beskrivelse af den eller de skærme, du ønsker. Vær specifik om appens type, brugerens mål og det indhold, du forventer at se.
3
Angiv, hvor mange skærme du ønsker
Som standard genererer Flowstep en enkelt skærm. Hvis du ønsker flere skærme, skal du angive det eksplicit i din prompt — Flowstep kan generere op til 6 skærme fra en enkelt prompt.
4
Generer
Indsend din prompt. Flowstep producerer dine skærme og viser dem i editoren, klar til at blive gennemgået eller forfinet.
Enkelt skærm versus flere skærme
Du kan generere enten én skærm eller op til 6 skærme fra en enkelt prompt. Begge tilgange egner sig til forskellige faser af designarbejde.- Én skærm — bedst til at udforske en specifik UI-tilstand, komponent eller fokuseret koncept.
- Flere skærme — bedst til at kortlægge flows, sammenligne layoutmuligheder eller dække en hel brugerrejse hurtigt.
Flere måder at skrive prompts på
Tekst er ikke det eneste input. Du kan også:- Vedhæft filer — tilføj billeder (JPG, PNG, WEBP) eller dokumenter (PDF, MD, TXT) op til 3 MB hver til prompten via drag-and-drop, filmarkøren eller indsætning. Referer til et vedhæftet billede i din prompt, og Flowstep inkorporerer det i de genererede skærme. Se Brug referencer.
- Diktér din prompt — klik på mikrofonknappen i promptlinjen (eller tryk Cmd+Shift+V på Mac, Ctrl+Shift+V på Windows) og tal i op til 60 sekunder. Transskriptionen tilføjes til det, du allerede har skrevet.
- Lad Flowstep søge på nettet — når din prompt kalder på det (for eksempel “klon Stripe prissiden”), kan Flowstep søge på nettet og læse en sides branding — farver, skrifttyper, logo, UI-komponenter — og bruge det i de genererede skærme. Flowstep beslutter selv, hvorvidt det skal søge, så det vil ikke nødvendigvis udløses på hver prompt; bemærk at genoprettede websteder bruger forskellige billeder og navigation end originalen.
- Angiv designretningslinjer — definer permanente stilregler, der gælder for hver generation i filen. Se designretningslinjer.
Skriv effektive prompts
Husk disse principper, når du skriver prompts:- Navngiv platformen (mobil, desktop, tablet), så Flowstep dimensionerer skærme korrekt.
- Beskriv brugerens mål, ikke blot UI-elementer — Flowstep udleder layout ud fra hensigt.
- Inkluder vigtige indhold som etiketter, handlinger eller data, hvis de betyder noget for designet.
- Brug fraser som “generer flere skærme” eller “dæk den fulde brugerrejse” til at udløse multiscreen-output.