Skip to main content
Flowstep genereert UI-schermen van prompts in natuurlijke taal, zodat je in seconden van idee naar visueel ontwerp gaat. Of je nu een enkel scherm nodig hebt om een concept te valideren of een volledige reeks schermen die een volledige gebruikersreis omvat, een goed geschreven prompt is alles wat je nodig hebt om te beginnen.

​
Een design genereren

1

Open een nieuw project

Maak een nieuw project aan vanuit je Flowstep-dashboard, of open een bestaand project waar 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 inhoud die je verwacht te zien.
3

Geef aan hoeveel schermen je wilt

Standaard genereert Flowstep een enkel scherm. Als je meerdere schermen wilt, zeg dat expliciet in je prompt — Flowstep kan tot 6 schermen van één prompt genereren.
4

Genereren

Dien je prompt in. Flowstep produceert je schermen en toont ze in de editor, klaar om te beoordelen of aan te passen.

​
Één scherm versus meerdere schermen

Je kunt één scherm of tot 6 schermen van één prompt genereren. Beide benaderingen zijn geschikt voor verschillende fasen van ontwerp.
  • Één scherm — het beste voor het verkennen van een specifieke UI-staat, component of gericht concept.
  • Meerdere schermen — het beste voor het in kaart brengen van flows, het vergelijken van lay-outopties, of het snel dekken van een volledige gebruikersreis.
Als je meerdere schermen wilt, wees expliciet in je prompt. Flowstep gebruikt de formulering van je prompt om te bepalen hoeveel schermen het moet produceren, dus vage prompts leveren meestal één scherm op. Gegenereerde schermen heten Screen 1, Screen 2, enzovoort — gebruik deze namen om naar een specifiek scherm in vervolgprompts te verwijzen.

​
Meer manieren om prompts te schrijven

Tekst is niet de enige invoer. Je kunt ook:
  • Bestanden toevoegen — voeg afbeeldingen (JPG, PNG, WEBP) of documenten (PDF, MD, TXT) tot 3 MB per stuk toe aan je prompt, via slepen-en-neerzetten, de bestandskiezer, of door te plakken. Verwijs naar een bijgevoegde afbeelding in je prompt en Flowstep verwerkt deze in de gegenereerde schermen. Zie Referenties gebruiken.
  • Je prompt dicteren — klik op de microfoonknop in de promptbalk (of druk op Cmd+Shift+V op Mac, Ctrl+Shift+V op Windows) en spreek tot 60 seconden. Het transcript wordt toegevoegd aan wat je al hebt getypt.
  • Laat Flowstep het web doorzoeken — wanneer je prompt dit vereist (bijvoorbeeld “kloon de Stripe-pagina met prijzen”), kan Flowstep het web doorzoeken en de branding van een pagina lezen — kleuren, lettertypen, logo, UI-componenten — en deze gebruiken in de gegenereerde schermen. Flowstep besluit zelf of het moet zoeken, dus het triggert niet noodzakelijk op elke prompt; opmerking: gereproduceerde websites gebruiken andere afbeeldingen en navigatie dan het origineel.
  • Stel ontwerprichtlijnen in — definieer staande stijlregels die van toepassing zijn op elke generatie in het bestand. Zie Ontwerprichtlijnen.

​
Effectieve prompts schrijven

Voorbeeld van prompts met één scherm: “Ontwerp een mobiel inlogscherm voor een fitnesstracking-app met e-mail- en wachtwoordvelden, een inlogknop en een link ‘wachtwoord vergeten’.”
Voorbeeld van prompts met meerdere schermen: “Genereer meerdere schermen voor een onboarding-flow van een voedingsbezorgingsapp — behandel de voorkeursselectie voor keuken, het invoeren van een bezorgadres en het bevestigen van de eerste bestelling.”
Voorbeeld van prompts met volledige reis: “Dek de volledige gebruikersreis in een app voor onkostendeclaraties, van het indienen van een ontvangstbewijs tot goedkeuring door de manager.”
Houd deze principes in gedachten bij het schrijven van prompts:
  • Noem het platform (mobiel, desktop, tablet) zodat Flowstep schermen op de juiste manier formateert.
  • Beschrijf het doel van de gebruiker, niet alleen UI-elementen — Flowstep leidt lay-out af van intentie.
  • Voeg belangrijke inhoud toe, zoals labels, acties of gegevens, als deze voor het ontwerp van belang zijn.
  • Gebruik zinnen als “genereer meerdere schermen” of “dek de volledige gebruikersreis” om output met meerdere schermen te activeren.