Naar hoofdinhoud gaan
Flowstep genereert UI-schermen op basis van prompts in natuurlijke taal, zodat je in enkele seconden van idee naar visueel ontwerp gaat. Of je nu één scherm nodig hebt om een concept te valideren, of een complete set schermen die een volledige gebruikersreis beslaat: met een goed geschreven prompt ben je zo aan de slag.

​
Een ontwerp genereren

1

Open een nieuw project

Maak vanuit je Flowstep-dashboard een nieuw project aan, of open een bestaand project waaraan je schermen wilt toevoegen.
2

Schrijf je prompt

Typ een beschrijving van het scherm of de schermen die je wilt. Wees specifiek over het type app, het doel van de gebruiker en de content die je verwacht te zien.
3

Geef aan hoeveel schermen je wilt

Standaard genereert Flowstep één scherm. Als je meerdere schermen wilt, zeg dat dan expliciet in je prompt. Flowstep kan maximaal 6 schermen uit één prompt genereren.
4

Genereer

Verstuur je prompt. Flowstep maakt je schermen en toont ze in de editor, klaar om te beoordelen of te verfijnen.
Wanneer je een nieuw bestand aanmaakt en de eerste prompt verstuurt, geeft Flowstep het bestand een naam op basis van die prompt, zodat je het later makkelijk terugvindt. Een bestand dat al een naam heeft, of eerdere prompts, behoudt zijn naam. Je kunt elk bestand altijd zelf hernoemen.

​
Een generatie stoppen

Terwijl Flowstep antwoordt, verandert de verzendknop in een stopknop (Stop Flowstep response). Klik erop om de generatie te stoppen. Bij een verzoek voor meerdere schermen blijven schermen die al klaar zijn op je canvas staan, en worden onafgemaakte schermen verwijderd. Stoppen nadat Flowstep is begonnen met het bouwen van schermen, gebruikt nog steeds het bericht. Zie berichten en limieten.

​
Eén scherm versus meerdere schermen

Je kunt met één prompt één scherm of maximaal 6 schermen genereren. Beide benaderingen passen bij verschillende fasen van het ontwerpwerk.
  • Eén scherm: het beste om een specifieke UI-status, component of gericht concept te verkennen.
  • Meerdere schermen: het beste om flows in kaart te brengen, lay-outopties te vergelijken of snel een volledige gebruikersreis te dekken.
Wanneer je meerdere schermen wilt, wees dan expliciet in je prompt. Flowstep gebruikt de formulering van je prompt om te bepalen hoeveel schermen het maakt. Vage prompts leveren daarom meestal één scherm op. Gegenereerde schermen krijgen de namen Screen 1, Screen 2, enzovoort. Gebruik deze namen om in vervolgprompts naar een specifiek scherm te verwijzen.

​
Meer manieren om te prompten

Tekst is niet de enige invoer. Je kunt ook:
  • Bijlagen toevoegen: voeg afbeeldingen (JPG, PNG, WEBP) of documenten (PDF, MD, TXT) van maximaal 3 MB per stuk toe aan de prompt, via slepen en neerzetten, de bestandskiezer of plakken. Verwijs in je prompt naar een bijgevoegde afbeelding, dan verwerkt Flowstep die in de gegenereerde schermen. Zie Ontwerpreferenties gebruiken.
  • Dicteer je prompt: klik op de microfoonknop in de promptbalk (of druk op Cmd+Shift+V op Mac of Ctrl+Shift+V op Windows) en spreek maximaal 60 seconden. Het transcript wordt toegevoegd aan wat je al hebt getypt.
  • Laat Flowstep het web onderzoeken: wanneer je prompt daarom vraagt (bijvoorbeeld “kopieer de prijspagina van Stripe”), kan Flowstep het web doorzoeken en de branding van een pagina lezen, zoals kleuren, lettertypen, logo en UI-componenten. Die branding gebruikt Flowstep in de gegenereerde schermen. Flowstep beslist zelf of het onderzoek doet, dus dat gebeurt niet bij elke prompt. Let op: nagemaakte websites gebruiken andere afbeeldingen en navigatie dan het origineel.
  • Stel ontwerprichtlijnen in: definieer vaste stijlregels die gelden voor elke generatie in het bestand. Zie Ontwerprichtlijnen.

​
Effectieve prompts schrijven

Voorbeeld van een prompt voor één scherm: “Ontwerp een mobiel inlogscherm voor een fitness-tracking-app met velden voor e-mail en wachtwoord, een knop om in te loggen en een link voor wachtwoord vergeten.”
Voorbeeld van een prompt voor meerdere schermen: “Genereer meerdere schermen voor de onboarding-flow van een maaltijdbezorg-app: kies voorkeuren voor keuken, vul een bezorgadres in en bevestig de eerste bestelling.”
Voorbeeld van een prompt voor een volledige reis: “Dek de volledige gebruikersreis van een app voor onkostendeclaraties, van het indienen van een bon tot goedkeuring door de manager.”
Houd deze principes in gedachten bij het schrijven van prompts:
  • Noem het platform (mobiel, desktop, tablet), zodat Flowstep de schermen correct dimensioneert.
  • Beschrijf het doel van de gebruiker, niet alleen de UI-elementen. Flowstep leidt de lay-out af uit de intentie.
  • Neem belangrijke content op, zoals labels, acties of data, als die voor het ontwerp van belang zijn.
  • Gebruik zinnen als “genereer meerdere schermen” of “dek de volledige gebruikersreis” om meerschermoutput te activeren.