Skip to main content
Flowstep genererer UI-skjermer fra naturlig språkprompt, slik at du går fra idé til visuelt design på sekunder. Enten du trenger en enkelt skjerm for å validere et konsept eller et helt sett med skjermer som dekker en hel brukerreise, er en godt skrevet prompt alt du trenger for å komme i gang.

​
Generer et design

1

Åpne et nytt prosjekt

Fra Flowstep-dashbordet ditt, opprett et nytt prosjekt eller åpne et eksisterende prosjekt der du vil legge til skjermer.
2

Skriv prompten din

Skriv en beskrivelse av skjermen eller skjermene du vil ha. Vær spesifikk om appens type, brukerens mål og innholdet du forventer å se.
3

Spesifiser hvor mange skjermer du vil ha

Som standard genererer Flowstep en enkelt skjerm. Hvis du vil ha flere skjermer, si det eksplisitt i prompten din — Flowstep kan generere opptil 6 skjermer fra en prompt.
4

Generer

Send prompten din. Flowstep produserer skjermene dine og viser dem i editoren, klar til gjennomgang eller refinement.

​
Enkelt skjerm versus flere skjermer

Du kan generere enten en skjerm eller opptil 6 skjermer fra en enkelt prompt. Begge tilnærminger passer for ulike stadier av designarbeid.
  • En skjerm — best for utforsking av en spesifikk UI-tilstand, komponent eller fokusert konsept.
  • Flere skjermer — best for kartlegging av flows, sammenligning av layoutalternativer eller dekning av en hel brukerreise raskt.
Når du vil ha flere skjermer, vær eksplisitt i prompten din. Flowstep bruker ordlyden i prompten din til å bestemme hvor mange skjermer som skal produseres, så uklare prompter returnerer vanligvis en enkelt skjerm. Genererte skjermer heter Screen 1, Screen 2, og så videre — bruk disse navnene til å referere til en spesifikk skjerm i oppfølgingsprompt.

​
Flere måter å lage prompts på

Tekst er ikke den eneste inndataen. Du kan også:
  • Legg til filer — legg til bilder (JPG, PNG, WEBP) eller dokumenter (PDF, MD, TXT) opptil 3 MB hver til prompten, via drag-and-drop, filvelgeren eller ved å lime inn. Referer til et vedlagt bilde i prompten din og Flowstep inkorporerer det i de genererte skjermene. Se Bruk referanser.
  • Dikter prompten din — klikk mikrofonknappen i promptlinjen (eller trykk Cmd+Shift+V på Mac, Ctrl+Shift+V på Windows) og snakk i opptil 60 sekunder. Transkripsjonen legges til det du allerede har skrevet.
  • La Flowstep søke på nettet — når prompten din krever det (for eksempel “klon Stripe-prissettingssiden”), kan Flowstep søke på nettet og lese en sides branding — farger, skrifter, logo, UI-komponenter — og bruke det i de genererte skjermene. Flowstep bestemmer selv om det skal søke, så det vil ikke nødvendigvis utløses på hver prompt; merk at gjenskapte nettsider bruker ulike bilder og navigasjon enn originalen.
  • Still inn designretningslinjer — definer stående stilregler som gjelder for hver generering i filen. Se Designretningslinjer.

​
Skrive effektive prompts

Eksempel på enkeltskjermsprompt: “Design en mobil påloggingsskjerm for en treningsoppfølgingsapp med e-post- og passordfelt, en påloggingsknapp og en lenke for glemt passord.”
Eksempel på multi-skjermsprompt: “Generer flere skjermer for en matleverings-app onboarding-flow — dekk valg av cuisineprefranser, oppføring av leveringsadresse og bekreftelse av første ordre.”
Eksempel på full journeyprompt: “Dekk hele brukerreisen i en utgiftsrapporteringsapp, fra innsending av kvittering til godkjenning av leder.”
Husk disse prinsippene når du skriver prompts:
  • Nevn plattformen (mobil, skrivebord, nettbrett) slik at Flowstep størrelse skjermer riktig.
  • Beskriv brukerens mål, ikke bare UI-elementer — Flowstep utleder layout fra intensjon.
  • Inkluder nøkkelnavn som etiketter, handlinger eller data hvis de er viktige for designet.
  • Bruk fraser som “generer flere skjermer” eller “dekk hele brukerreisen” for å utløse multi-skjermutdata.