Skip to main content
A Flowstep természetes nyelvű promptokból generál UI-képernyőket, így másodpercek alatt eljutsz az ötlettől a vizuális tervig. Akár egyetlen képernyőre van szükséged egy koncepció kipróbálásához, akár egy teljes felhasználói útvonalat lefedő képernyősorozatra, egy jól megírt prompt elég a kezdéshez.

​
Terv generálása

1

Nyiss meg egy új projektet

A Flowstep irányítópultján hozz létre új projektet, vagy nyiss meg egy meglévőt, ahová képernyőket szeretnél tenni.
2

Írd meg a promptot

Írj leírást a kívánt képernyőről vagy képernyőkről. Legyél konkrét az alkalmazás típusát, a felhasználó célját és a látni kívánt tartalmat illetően.
3

Add meg, hány képernyőt szeretnél

Alapértelmezés szerint a Flowstep egy képernyőt generál. Ha több képernyőre van szükséged, ezt kifejezetten írd le a promptban – a Flowstep egyetlen promptból akár 6 képernyőt is képes generálni.
4

Generálás

Küldd el a promptot. A Flowstep elkészíti a képernyőket, és megjeleníti őket a szerkesztőben, készen az áttekintésre vagy finomításra.
Ha új fájlt hozol létre, és elküldöd az első promptját, a Flowstep ez alapján nevet ad a fájlnak, hogy később könnyen megtaláld. A már elnevezett fájl – vagy a korábbi promptokkal rendelkező fájl – megtartja a nevét, és bármelyik fájlt bármikor átnevezheted.

​
Generálás leállítása

Amíg a Flowstep válaszol, az elküldés gomb leállító gombbá alakul (Stop Flowstep response). Kattints rá a generálás leállításához. Többképernyős kérésnél a már elkészült képernyők a vásznon maradnak, a be nem fejezettek pedig eltávolításra kerülnek. Ha a Flowstep már elkezdte a képernyők építését, a leállítás után is felhasználódik az üzenet – lásd: üzenetek és korlátok.

​
Egy képernyő vagy több képernyő

Egy promptból egy vagy akár 6 képernyőt is generálhatsz. A két megközelítés a tervezési munka különböző szakaszaihoz illik.
  • Egy képernyő – egy adott UI-állapot, komponens vagy fókuszált koncepció feltárására a legjobb.
  • Több képernyő – folyamatok feltérképezésére, elrendezési változatok összehasonlítására vagy egy teljes felhasználói útvonal gyors lefedésére a legjobb.
Ha több képernyőt szeretnél, légy egyértelmű a promptban. A Flowstep a prompt megfogalmazása alapján dönti el, hány képernyőt készítsen, így a homályos promptok általában egyetlen képernyőt eredményeznek. A generált képernyők neve Screen 1, Screen 2 és így tovább – ezekkel a nevekkel hivatkozhatsz egy adott képernyőre a követő promptokban.

​
További promptolási módok

A szöveg nem az egyetlen bemeneti mód. Emellett a következőket is megteheted:
  • Fájlok csatolása – adj hozzá képeket (JPG, PNG, WEBP) vagy dokumentumokat (PDF, MD, TXT) legfeljebb 3 MB-os méretben a prompthoz húzással, a fájlválasztóval vagy beillesztéssel. Hivatkozz a csatolt képre a promptban, és a Flowstep beépíti a generált képernyőkbe. Lásd: Referenciák használata.
  • Diktáld be a promptot – kattints a mikrofon gombra a prompt sávban (vagy nyomd meg a Cmd+Shift+V billentyűkombinációt Mac gépen, illetve a Ctrl+Shift+V billentyűkombinációt Windowson), és beszélj legfeljebb 60 másodpercig. Az átirat a már begépelt szöveg után kerül.
  • Hagyd, hogy a Flowstep kutasson a weben – ha a prompt igényli (például „a Stripe árazási oldalának klónozása”), a Flowstep webes keresést végezhet, beolvashatja egy oldal arculati elemeit – színeket, betűtípusokat, logót, UI-komponenseket –, és felhasználhatja őket a generált képernyőkön. A Flowstep maga dönti el, hogy kutat-e, ezért nem minden promptnál aktiválódik. Vedd figyelembe, hogy az újraalkotott weboldalak más képeket és navigációt használnak, mint az eredeti.
  • Állíts be tervezési irányelveket – határozz meg állandó stílusszabályokat, amelyek a fájl minden generálására érvényesek. Lásd: Tervezési irányelvek.

​
Hatékony promptok írása

Egy képernyős példa prompt: „Tervezz egy mobil bejelentkező képernyőt egy fitneszkövető alkalmazáshoz e-mail- és jelszómezőkkel, bejelentkezés gombbal és elfelejtett jelszó linkkel.”
Többképernyős példa prompt: „Generálj több képernyőt egy ételkiszállító alkalmazás bevezető folyamatához – fedd le a konyhai preferenciák kiválasztását, a szállítási cím megadását és az első rendelés megerősítését.”
Teljes útvonal példa prompt: „Fedd le a teljes felhasználói útvonalat egy költségjelentő alkalmazásban, a nyugta beküldésétől a vezetői jóváhagyásig.”
Ezeket az elveket tartsd szem előtt a promptok írásakor:
  • Add meg a platformot (mobil, asztali, tablet), hogy a Flowstep megfelelő méretű képernyőket készítsen.
  • Írd le a felhasználó célját, ne csak a UI-elemeket – a Flowstep az elrendezést a szándékból következteti ki.
  • Adj meg fontos tartalmakat, például címkéket, műveleteket vagy adatokat, ha a tervezés szempontjából számítanak.
  • Használj olyan kifejezéseket, mint a „generálj több képernyőt” vagy a „fedd le a teljes felhasználói útvonalat”, hogy többképernyős kimenetet kapj.