Salt la conținutul principal
Flowstep generează ecrane UI din prompturi în limbaj natural, ca să poți trece de la idee la design vizual în câteva secunde. Fie că ai nevoie de un singur ecran ca să validezi un concept, fie de un set complet de ecrane care acoperă o întreagă călătorie a utilizatorului, un prompt bine scris este tot ce trebuie ca să începi.

​
Generează un design

1

Deschide un proiect nou

Din tabloul de bord Flowstep, creează un proiect nou sau deschide unul existent în care vrei să adaugi ecrane.
2

Scrie promptul

Scrie o descriere a ecranului sau a ecranelor pe care le vrei. Fii specific în privința tipului de aplicație, a obiectivului utilizatorului și a conținutului pe care te aștepți să îl vezi.
3

Specifică câte ecrane vrei

Implicit, Flowstep generează un singur ecran. Dacă vrei mai multe ecrane, spune-o explicit în prompt. Flowstep poate genera până la 6 ecrane dintr-un singur prompt.
4

Generează

Trimite promptul. Flowstep produce ecranele și le afișează în editor, gata de revizuit sau de rafinat.
Când creezi un fișier nou și trimiți primul prompt al acestuia, Flowstep îi dă un nume pe baza promptului, ca să îl găsești ușor mai târziu. Un fișier care are deja un nume sau prompturi anterioare își păstrează numele, iar tu poți redenumi oricând orice fișier.

​
Un ecran vs. mai multe ecrane

Poți genera fie un singur ecran, fie până la 6 ecrane dintr-un singur prompt. Ambele abordări se potrivesc unor etape diferite ale lucrului de design.
  • Un ecran — cel mai potrivit pentru explorarea unei stări specifice a interfeței, a unei componente sau a unui concept punctual.
  • Mai multe ecrane — cel mai potrivit pentru schițarea fluxurilor, compararea variantelor de layout sau acoperirea rapidă a unei întregi călătorii a utilizatorului.
Când vrei mai multe ecrane, fii explicit în prompt. Flowstep folosește formularea promptului tău ca să decidă câte ecrane produce, deci prompturile vagi returnează de obicei un singur ecran. Ecranele generate sunt numite Screen 1, Screen 2 și așa mai departe. Folosește aceste nume ca să te referi la un anumit ecran în prompturile de continuare.

​
Mai multe moduri de a trimite prompturi

Textul nu este singura intrare. Poți și:
  • Atașează fișiere — adaugă imagini (JPG, PNG, WEBP) sau documente (PDF, MD, TXT) de până la 3 MB fiecare la prompt, prin glisare și plasare, prin selectorul de fișiere sau prin lipire. Fă referire la o imagine atașată în prompt, iar Flowstep o încorporează în ecranele generate. Vezi Folosește referințele de design.
  • Dictează promptul — dă clic pe butonul microfon din bara de prompt (sau apasă Cmd+Shift+V pe Mac, Ctrl+Shift+V pe Windows) și vorbește timp de până la 60 de secunde. Transcrierea se adaugă la ce ai scris deja.
  • Lasă Flowstep să cerceteze web-ul — atunci când promptul o cere (de exemplu, „clonează pagina de prețuri Stripe”), Flowstep poate căuta pe web și poate citi brandingul unei pagini, adică culorile, fonturile, logo-ul și componentele de interfață, pe care apoi le folosește în ecranele generate. Flowstep decide singur dacă face cercetare, deci nu se declanșează neapărat la fiecare prompt. Ține cont că site-urile recreate folosesc alte imagini și altă navigare decât originalul.
  • Setează ghiduri de design — definește reguli de stil permanente care se aplică fiecărei generări din fișier. Vezi Ghiduri de design.

​
Cum scrii prompturi eficiente

Exemplu de prompt pentru un singur ecran: „Proiectează un ecran mobil de autentificare pentru o aplicație de monitorizare a fitnessului, cu câmpuri pentru e-mail și parolă, un buton de autentificare și un link pentru parola uitată.”
Exemplu de prompt pentru mai multe ecrane: „Generează mai multe ecrane pentru fluxul de onboarding al unei aplicații de livrare a mâncării. Acoperă alegerea preferințelor de bucătărie, introducerea adresei de livrare și confirmarea primei comenzi.”
Exemplu de prompt pentru întreaga călătorie: „Acoperă întreaga călătorie a utilizatorului într-o aplicație de raportare a cheltuielilor, de la trimiterea unei chitanțe până la aprobarea managerului.”
Ține cont de aceste principii când scrii prompturi:
  • Numește platforma (mobil, desktop, tabletă), ca Flowstep să dimensioneze corect ecranele.
  • Descrie obiectivul utilizatorului, nu doar elementele de interfață. Flowstep deduce layoutul din intenție.
  • Include conținutul-cheie, precum etichete, acțiuni sau date, dacă sunt importante pentru design.
  • Folosește formulări precum „generează mai multe ecrane” sau „acoperă întreaga călătorie a utilizatorului” ca să declanșezi un rezultat cu mai multe ecrane.