Przejdź do głównej treści
Flowstep generuje ekrany UI z promptów w naturalnym języku, pozwalając Ci przejść od pomysłu do projektu wizualnego w kilka sekund. Niezależnie od tego, czy potrzebujesz pojedynczego ekranu do walidacji koncepcji, czy pełnego zestawu ekranów obejmujących całą podróż użytkownika, wystarczy dobrze napisany prompt, aby zacząć.

​
Generuj projekt

1

Otwórz nowy projekt

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

Napisz swój prompt

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

Określ, ile ekranów chcesz

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

Generuj

Prześlij swój prompt. Flowstep tworzy Twoje ekrany i wyświetla je w edytorze, gotowe do przeglądu lub udoskonalenia.

​
Pojedynczy ekran vs. wiele ekranów

Możesz wygenerować jeden ekran lub do 6 ekranów z pojedynczego promptu. Oba podejścia nadają się do różnych etapów pracy nad projektowaniem.
  • Jeden ekran — najlepszy do eksploracji określonego stanu UI, komponentu lub skupionej koncepcji.
  • Wiele ekranów — najlepszy do mapowania przepływów, porównywania opcji układu lub szybkiego obejmowania pełnej podróży użytkownika.
Jeśli chcesz wiele ekranów, bądź jawny w swoim promptcie. Flowstep używa sformułowania Twojego promptu, aby zdecydować, ile ekranów wytworzyć, więc niejasne prompty zazwyczaj zwracają pojedynczy ekran. Wygenerowane ekrany mają nazwy Screen 1, Screen 2 i tak dalej — użyj tych nazw, aby odnieść się do określonego ekranu w kolejnych promptach.

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

Tekst to nie jedyne wejście. Możesz również:
  • Dołącz pliki — dodaj obrazy (JPG, PNG, WEBP) lub dokumenty (PDF, MD, TXT) o wielkości do 3 MB każdy do promptu, poprzez przeciągnięcie i upuszczenie, selektor plików lub wklejenie. Odwołaj się do dołączonego obrazu w swoim promptcie, a Flowstep włączy go do wygenerowanych ekranów. Zobacz Użyj referencji.
  • Dyktuj swój 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 zostaje dołączona do tego, co już wpisałeś.
  • Pozwól Flowstep badać sieć — gdy Twój prompt tego wymaga (na przykład, „klonuj stronę cennika Stripe”), Flowstep może przeszukiwać sieć i odczytywać branding strony — kolory, czcionki, logo, komponenty UI — i używać go w wygenerowanych ekranach. Flowstep decyduje sam, czy badać, więc niekoniecznie wyzwoli każdy prompt; pamiętaj, że odtworzone witryny internetowe używają różnych obrazów i nawigacji niż oryginał.
  • Ustal wytyczne projektowe — zdefiniuj trwałe reguły stylu, które mają zastosowanie do każdej generacji w pliku. Zobacz Wytyczne projektowe.

​
Pisanie efektywnych promptów

Przykład promptu dla jednego ekranu: „Zaprojektuj mobilny ekran logowania dla aplikacji śledzenia fitness z polami e-mail i hasła, przyciskiem logowania i linkiem „zapomniane hasło”.”
Przykład promptu wieloekranowego: „Wygeneruj wiele ekranów dla przepływu onboardingu aplikacji dostarczającej jedzenie — obejmij wybór preferencji kuchni, wprowadzenie adresu dostawy i potwierdzenie pierwszego zamówienia.”
Przykład promptu pełnej podróży: „Obejmij pełną podróż użytkownika w aplikacji raportowania wydatków, od przesłania paragonu do zatwierdzenia przez menedżera.”
Pamiętaj o tych zasadach podczas pisania promptów:
  • Nazwij platformę (mobile, desktop, tablet), aby Flowstep prawidłowo ustalić rozmiary ekranów.
  • Opisz cel użytkownika, nie tylko elementy UI — Flowstep wnioskuje układ na podstawie zamiaru.
  • Dołącz kluczową zawartość, taką jak etykiety, działania lub dane, jeśli są ważne dla projektu.
  • Użyj fraz takich jak „generuj wiele ekranów” lub „obejmij pełną podróż użytkownika”, aby wyzwolić wyjście wieloekranowe.