Flowstep generuje ekrany UI na podstawie opisów w języku naturalnym, dzięki czemu przechodzisz od pomysłu do projektu wizualnego w kilka sekund. Niezależnie od tego, czy potrzebujesz jednego ekranu, aby sprawdzić koncepcję, czy pełnego zestawu ekranów obejmującego całą ścieżkę użytkownika, do rozpoczęcia wystarczy dobrze napisany prompt.
Generowanie projektu
1
Otwórz nowy projekt
Z pulpitu Flowstep utwórz nowy projekt lub otwórz istniejący, do którego chcesz dodać ekrany.
2
Napisz prompt
Wpisz opis ekranu lub ekranów, które chcesz uzyskać. Określ typ aplikacji, cel użytkownika i treść, którą chcesz zobaczyć.
3
Określ, ile ekranów chcesz
Domyślnie Flowstep generuje jeden ekran. Jeśli chcesz kilka ekranów, napisz to wprost w prompcie — Flowstep może wygenerować do 6 ekranów z jednego promptu.
4
Generuj
Wyślij prompt. Flowstep tworzy Twoje ekrany i wyświetla je w edytorze, gotowe do przeglądu lub dopracowania.
Gdy utworzysz nowy plik i wyślesz jego pierwszy prompt, Flowstep nada plikowi nazwę na podstawie tego promptu, dzięki czemu łatwiej go będzie później znaleźć. Plik, który ma już nazwę lub wcześniejsze prompty, zachowuje ją, a Ty możesz w dowolnej chwili samodzielnie zmienić nazwę dowolnego pliku.
Zatrzymaj generowanie
Gdy Flowstep odpowiada, przycisk wysyłania zmienia się w przycisk zatrzymania (Stop Flowstep response). Kliknij go, aby zatrzymać generowanie. W żądaniu obejmującym wiele ekranów ekrany, które zostały już ukończone, pozostają na płótnie, a nieukończone są usuwane. Zatrzymanie po tym, jak Flowstep zacznie budować ekrany, nadal zużywa wiadomość — zobacz wiadomości i limity.Jeden ekran a wiele ekranów
Z jednego promptu możesz wygenerować jeden ekran lub do 6 ekranów. Oba podejścia pasują do różnych etapów pracy projektowej.- Jeden ekran — najlepszy do eksplorowania konkretnego 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 ścieżki użytkownika.
Więcej sposobów na prompty
Tekst to nie jedyne wejście. Możesz także:- Dołączyć pliki — dodaj do promptu obrazy (JPG, PNG, WEBP) lub dokumenty (PDF, MD, TXT) o rozmiarze do 3 MB każdy, przeciągając je i upuszczając, wybierając w oknie wyboru plików albo wklejając. Odwołaj się w prompcie do dołączonego obrazu, a Flowstep uwzględni go w wygenerowanych ekranach. Zobacz Używanie referencji.
- Podyktować prompt — kliknij przycisk mikrofonu na pasku promptu (lub naciśnij Cmd+Shift+V na Macu, Ctrl+Shift+V w Windows) i mów przez maksymalnie 60 sekund. Transkrypcja zostanie dopisana do tego, co już wpisałeś.
- Pozwolić Flowstep przeszukać sieć — gdy prompt tego wymaga (na przykład „sklonuj stronę z cennikiem Stripe”), Flowstep może przeszukać sieć i odczytać branding strony — kolory, czcionki, logo, komponenty UI — i użyć go w wygenerowanych ekranach. Flowstep sam decyduje, czy przeprowadzić wyszukiwanie, więc nie uruchomi się przy każdym prompcie. Pamiętaj, że odtworzone strony internetowe używają innych obrazów i nawigacji niż oryginał.
- Ustawić wytyczne projektowe — zdefiniuj stałe zasady stylu, które stosują się do każdego generowania w pliku. Zobacz Wytyczne projektowe.
Pisanie skutecznych promptów
Pamiętaj o tych zasadach, pisząc prompty:- Podaj platformę (mobilną, desktopową, tabletową), aby Flowstep prawidłowo dobrał rozmiar ekranów.
- Opisz cel użytkownika, a nie tylko elementy UI — Flowstep wnioskuje układ z intencji.
- Dodaj kluczową treść, taką jak etykiety, działania lub dane, jeśli mają znaczenie dla projektu.
- Używaj sformułowań takich jak „wygeneruj wiele ekranów” lub „obejmij pełną ścieżkę użytkownika”, aby uzyskać wynik z wieloma ekranami.