Hopp til hovedinnhold
Flowstep genererer UI-skjermer fra prompter på vanlig språk, slik at du kan gå fra idé til visuelt design på få sekunder. Enten du trenger én skjerm for å teste et konsept, eller et komplett 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

Opprett et nytt prosjekt fra Flowstep-dashbordet, 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 typen app, brukerens mål og innholdet du forventer å se.
3

Angi hvor mange skjermer du vil ha

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

Generer

Send inn prompten din. Flowstep lager skjermene og viser dem i redigeringsverktøyet, klare til gjennomgang eller finjustering.
Når du oppretter en ny fil og sender den første prompten din, gir Flowstep filen et navn basert på prompten, slik at den er lett å finne senere. En fil som allerede har et navn, eller tidligere prompter, beholder navnet sitt. Du kan gi nytt navn til en fil selv når som helst.

​
Stopp en generering

Mens Flowstep svarer, blir sendeknappen til en stoppknapp (Stop Flowstep response). Klikk på den for å stoppe genereringen. I en forespørsel med flere skjermer blir skjermer som allerede er ferdige, liggende på lerretet, mens skjermer som ikke er ferdige, fjernes. Å stoppe etter at Flowstep har begynt å bygge skjermer, bruker fortsatt meldingen. Se meldinger og grenser.

​
Én skjerm vs. flere skjermer

Du kan generere enten én skjerm eller opptil 6 skjermer fra én prompt. Begge tilnærmingene passer ulike stadier av designarbeidet.
  • Én skjerm – best for å utforske en bestemt UI-tilstand, en komponent eller et fokusert konsept.
  • Flere skjermer – best for å kartlegge flyter, sammenligne layoutalternativer eller dekke en hel brukerreise raskt.
Når du vil ha flere skjermer, må du være eksplisitt i prompten din. Flowstep bruker formuleringene i prompten din til å avgjøre hvor mange skjermer som skal produseres. Vage prompter gir derfor vanligvis én skjerm. Genererte skjermer får navnene Screen 1, Screen 2 og så videre. Bruk disse navnene når du viser til en bestemt skjerm i oppfølgingsprompter.

​
Flere måter å skrive prompt på

Tekst er ikke den eneste inndataen. Du kan også:
  • Legge ved filer – legg til bilder (JPG, PNG, WEBP) eller dokumenter (PDF, MD, TXT) på opptil 3 MB hver i prompten, ved å dra og slippe, bruke filvelgeren eller lime inn. Referer til et vedlagt bilde i prompten din, så tar Flowstep det med i de genererte skjermene. Se Bruk designreferanser.
  • Diktere prompten din – klikk på mikrofonknappen i promptlinjen (eller trykk Cmd+Shift+V på Mac, Ctrl+Shift+V på Windows), og snakk i opptil 60 sekunder. Transkripsjonen legges til etter det du allerede har skrevet.
  • La Flowstep undersøke nettet – når prompten din krever det (for eksempel «klon Stripe-prissiden»), kan Flowstep søke på nettet og lese en nettsides merkevare, som farger, skrifter, logo og UI-komponenter, og bruke dem i de genererte skjermene. Flowstep avgjør selv om den skal undersøke, så det skjer ikke nødvendigvis for hver prompt. Merk at gjenskapte nettsider bruker andre bilder og navigasjon enn originalen.
  • Angi designretningslinjer – definer faste stilregler som gjelder for hver generering i filen. Se Designretningslinjer.

​
Skrive effektive prompter

Eksempel på prompt for én skjerm: “Design en mobil innloggingsskjerm for en app for treningsregistrering, med felt for e-post og passord, en knapp for å logge inn og en lenke for glemt passord.”
Eksempel på prompt for flere skjermer: “Generer flere skjermer for en onboarding-flyt i en matleveringsapp. Dekk valg av matpreferanser, registrering av leveringsadresse og bekreftelse av den første bestillingen.”
Eksempel på prompt for hele reisen: “Dekk hele brukerreisen i en utgiftsrapporteringsapp, fra innsending av en kvittering til godkjenning hos leder.”
Husk disse prinsippene når du skriver prompter:
  • Nevn plattformen (mobil, desktop, nettbrett), slik at Flowstep dimensjonerer skjermene riktig.
  • Beskriv brukerens mål, ikke bare UI-elementene. Flowstep utleder layout fra hensikten.
  • Ta med nøkkelinnhold som etiketter, handlinger eller data hvis det er viktig for designet.
  • Bruk fraser som «generer flere skjermer» eller «dekk hele brukerreisen» for å utløse output med flere skjermer.