Skip to main content
Flowstep generează ecrane UI din prompt-uri în limbaj natural, permițându-ți să treci de la idee la design vizual în secunde. Indiferent dacă ai nevoie de un singur ecran pentru a valida un concept sau de un set complet de ecrane care să acopere o întreagă călătorie a utilizatorului, tot ce trebuie este un prompt bine scris pentru a începe.

​
Generează un design

1

Deschide un proiect nou

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

Scrie prompt-ul tău

Tastează o descriere a ecranului sau a ecranelor pe care le vrei. Fi specific despre tipul de aplicație, scopul utilizatorului și conținutul pe care te aștepți să-l vezi.
3

Specifică câte ecrane vrei

În mod 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 prompt-ul tău. Flowstep produce ecranele și le afișează în editor, gata de revizuit sau rafinat.

​
Un singur 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 lucrării de design.
  • Un singur ecran — cel mai bun pentru explorarea unei stări UI specifice, a unei componente sau a unui concept concentrat.
  • Mai multe ecrane — cel mai bun pentru cartografierea fluxurilor, compararea opțiunilor de aspect sau acoperirea rapidă a unei întregi călătorii a utilizatorului.
Când vrei mai multe ecrane, fi explicit în prompt. Flowstep folosește formularea prompt-ului tău pentru a decide câte ecrane să producă, deci prompt-urile vagi returnează de obicei un singur ecran. Ecranele generate sunt numite Screen 1, Screen 2 și așa mai departe — folosește aceste nume pentru a se referi la un ecran specific în prompt-urile ulterioare.

​
Mai multe moduri de a prompt

Text nu este singura intrare. Poți și:
  • Atașează fișiere — adaugă imagini (JPG, PNG, WEBP) sau documente (PDF, MD, TXT) până la 3 MB fiecare la prompt, prin drag-and-drop, selectorul de fișiere sau prin lipire. Fă referință la o imagine atașată în prompt-ul tău și Flowstep o încorporează în ecranele generate. Vezi Folosește referințe.
  • Dictează prompt-ul tău — dă clic pe butonul mic din bara prompt (sau apasă Cmd+Shift+V pe Mac, Ctrl+Shift+V pe Windows) și vorbește pentru până la 60 de secunde. Transcrierea este adăugată la ceea ce ai deja tastat.
  • Lasă Flowstep să cerceteze web-ul — când prompt-ul tău o cere (de exemplu, “clonează pagina de prețuri Stripe”), Flowstep poate căuta web-ul și citi branding-ul unei pagini — culori, fonturi, logo, componente UI — și să-l folosească în ecranele generate. Flowstep decide singur dacă va cerceta, deci nu va declanșa neapărat pe fiecare prompt; rețineți că site-urile recreate folosesc imagini și navigare diferite de originalul.
  • Setează ghiduri de design — definește reguli de stil permanente care se aplică la fiecare generare din fișier. Vezi Ghiduri de design.

​
Scrierea prompt-urilor eficiente

Exemplu de prompt cu un singur ecran: “Proiectează un ecran de conectare mobil pentru o aplicație de urmărire fitness cu câmpuri de email și parolă, un buton de conectare și o legătură de parolă uitată.”
Exemplu de prompt cu mai multe ecrane: “Generează mai multe ecrane pentru fluxul de integrare a unei aplicații de livrare de mâncare — acoperă selectarea preferințelor de bucătărie, introducerea unei adrese de livrare și confirmarea primei comenzi.”
Exemplu de prompt cu călătoria completă: “Acoperă călătoria completă a utilizatorului într-o aplicație de raportare a cheltuielilor, de la trimiterea unei chitanțe la aprobarea managerului.”
Ține cont de aceste principii atunci când scrii prompt-uri:
  • Numi platforma (mobil, desktop, tablet) pentru ca Flowstep să dimensioneze corect ecranele.
  • Descrie scopul utilizatorului, nu doar elemente UI — Flowstep deduce aspectul din intenție.
  • Includ conținut cheie cum ar fi etichetele, acțiunile sau datele dacă acestea sunt importante pentru design.
  • Folosește expresii cum ar fi “generează mai multe ecrane” sau “acoperă călătoria completă a utilizatorului” pentru a declanșa ieșirea cu mai multe ecrane.