Skip to main content
Flowstep generuje ekrany UI na podstawie promptów w języku naturalnym, pozwalając przejść od pomysłu do projektu wizualnego w sekundy. Niezależnie od tego, czy potrzebujesz jednego ekranu, aby zatwierdzić koncepcję, czy pełnego zestawu ekranów obejmujących całą podróż użytkownika, dobrze napisany prompt to wszystko, czego potrzebujesz, aby zacząć.

​
Wygeneruj projekt

1

Otwórz nowy projekt

Z pulpitu nawigacyjnego Flowstep utwórz nowy projekt lub otwórz istniejący, w którym chcesz dodać ekrany.
2

Napisz prompt

Wpisz opis ekranu lub ekranów, które chcesz. Bądź konkretny w kwestii rodzaju aplikacji, celu użytkownika i treści, którą spodziewasz się zobaczyć.
3

Określ, ile ekranów chcesz

Domyślnie Flowstep generuje jeden ekran. Jeśli chcesz wiele ekranów, wyraźnie powiedz to w swoim promptie — Flowstep może wygenerować do 6 ekranów z jednego promptu.
4

Generuj

Prześlij prompt. Flowstep tworzy ekrany i wyświetla je w edytorze, gotowe do przeglądu lub ulepszenia.
Gdy utworzysz nowy plik i wyślesz jego pierwszy prompt, Flowstep nadaje mu nazwę na podstawie tego promptu, dzięki czemu łatwo go później znaleźć. Plik, który ma już nazwę — lub wcześniejsze prompty — zachowuje swoją nazwę, a ty możesz zmienić dowolny plik w dowolnym momencie.

​
Pojedynczy ekran vs. wiele ekranów

Możesz wygenerować jeden ekran lub do 6 ekranów z jednego promptu. Oba podejścia pasują do różnych etapów pracy projektowej.
  • Jeden ekran — najlepszy do eksploracji określonego stanu UI, komponentu lub skoncentrowanej koncepcji.
  • Wiele ekranów — najlepszy do mapowania przepływów, porównywania opcji układu lub szybkiego pokrycia pełnej podróży użytkownika.
Gdy chcesz wiele ekranów, bądź wyraźny w swoim promptie. Flowstep używa sformułowania promptu, aby zdecydować, ile ekranów wygenerować, więc niejasne prompty zazwyczaj zwracają jeden ekran. Wygenerowane ekrany noszą nazwy Screen 1, Screen 2 itd. — użyj tych nazw, aby odwołać się do określonego ekranu w następujących promptach.

​
Więcej sposobów na pisanie promptów

Tekst to nie jedyne wejście. Możesz także:
  • Dołącz pliki — dodaj obrazy (JPG, PNG, WEBP) lub dokumenty (PDF, MD, TXT) do 3 MB każdy do promptu poprzez przeciągnięcie i upuszczenie, selektor plików lub wklejenie. Odnieś się do dołączonego obrazu w swoim promptie, a Flowstep włączy go do wygenerowanych ekranów. Patrz Użyj referencji.
  • Dyktuj prompt — kliknij przycisk mikrofonu na pasku promptu (lub naciśnij Cmd+Shift+V na Mac, Ctrl+Shift+V na Windows) i mów przez do 60 sekund. Transkrypcja jest dołączana do tego, co już wpisałeś.
  • Pozwól Flowstep przeszukać sieć — gdy Twój prompt tego wymaga (na przykład „sklonuj stronę cennika Stripe”), Flowstep może przeszukać sieć i przeczytać znakowanie strony — kolory, czcionki, logo, komponenty UI — i użyć ich w wygenerowanych ekranach. Flowstep decyduje sam, czy szukać, więc niekoniecznie zostanie wyzwolone na każdy prompt; pamiętaj, że odtworzone strony internetowe używają różnych obrazów i nawigacji niż oryginał.
  • Ustaw wytyczne projektowe — zdefiniuj stałe zasady stylu, które mają zastosowanie do każdego generowania w pliku. Patrz Wytyczne projektowe.

​
Pisanie efektywnych promptów

Przykład promptu pojedynczego ekranu: „Zaprojektuj mobilny ekran logowania dla aplikacji do śledzenia kondycji z polami e-mail i hasła, przyciskiem logowania i linkiem do resetowania hasła.”
Przykład promptu wieloekranowego: „Wygeneruj wiele ekranów dla przepływu wprowadzenia aplikacji do dostarczania jedzenia — pokryj wybór preferencji kuchni, wprowadzenie adresu dostawy i potwierdzenie pierwszego zamówienia.”
Przykład promptu pełnej podróży: „Pokryj pełną podróż użytkownika w aplikacji do raportowania wydatków, od przesłania paragonu do zatwierdzenia przez menedżera.”
Pamiętaj o tych zasadach podczas pisania promptów:
  • Wymień platformę (mobilną, desktopową, tabletową), aby Flowstep prawidłowo zmieniał rozmiar ekranów.
  • Opisz cel użytkownika, a nie tylko elementy UI — Flowstep wnioskuje układ z intencji.
  • Dołącz kluczową treść, taką jak etykiety, działania lub dane, jeśli są istotne dla projektu.
  • Używaj zwrotów takich jak „generuj wiele ekranów” lub „pokryj pełną podróż użytkownika”, aby wyzwolić wieloekranowe wyjście.