Skip to main content
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.
Når du ønsker flere skærme, skal du være eksplicit i din prompt. Flowstep bruger ordlyden i din prompt til at bestemme, hvor mange skærme der skal produceres, så uklare prompts typisk returnerer en enkelt skærm. Genererede skærme hedder Screen 1, Screen 2 og så videre — brug disse navne til at henvise til en bestemt skærm i opfølgende prompts.

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

Eksempel på single-screen prompt: “Design en mobil loginskærm til en fitness-trackingapp med email- og adgangskodefelter, en login-knap og et link til glemt adgangskode.”
Eksempel på multi-screen prompt: “Generer flere skærme til en mad-leveringsapps onboarding flow — dæk valg af køkkenpræferencer, indgangen af leveringsadresse og bekræftelse af første ordre.”
Eksempel på full journey prompt: “Dæk den fulde brugerrejse i en udgiftsrapporteringsapp, fra indsendelse af en bon til ledergodkendelse.”
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.