Skip to main content
Motyw to wspólna paleta kolorów i zaokrąglenie narożników dla Twoich ekranów. Każdy plik ma motyw i wygląd (jasny lub ciemny), a ekrany są stylizowane przy użyciu tokenów motywu. Edytujesz motyw, a każdy ekran, który go używa, podąża za zmianą. Dzięki temu Twój zespół pracuje na jednym zestawie decyzji zamiast powtarzać kolory w każdym prompcie. Motywy, które tworzysz lub generujesz, są zapisywane w organizacji i wyświetlane w sekcji Themes na stronie Home, więc każdy plik w organizacji może z nich korzystać.

​
Wybierz motyw dla pliku

Wybierz motyw i wygląd dla nowych ekranów z kompozytora promptów wewnątrz pliku. Przycisk motywu nie jest dostępny w polu promptu na stronie Home.
1

Otwórz menu motywu

W kompozytorze promptów kliknij przycisk motywu. Pokazuje on próbkę koloru bieżącego motywu lub koło kolorów, gdy motyw to Automatic. Menu nosi tytuł Theme for new screens.
2

Wybierz motyw

Wybierz Automatic, jeden z motywów swojej organizacji (wymienionych na początku) lub motyw wbudowany: Default, Blue, Grayscale, Green, Ice, Orange, Red, Rose, Violet lub Yellow.
3

Wybierz wygląd

W sekcji Appearance wybierz Light lub Dark, albo Automatic, aby Flowstep decydował dla każdego ekranu na podstawie promptu — „ciemny dashboard” wyjdzie ciemny.
Twój wybór dotyczy ekranów, które wygenerujesz dalej. Ekrany już znajdujące się na płótnie zachowują swój wygląd.

​
Pozwól Flowstep zaprojektować motyw

Gdy plik nie ma jeszcze motywu — nowy plik, w którym motyw pozostawiono na Automatic — Flowstep projektuje niestandardowy motyw razem z pierwszymi ekranami, które generuje. Gdy będzie nad nim pracować, zobaczysz w czacie krok Designing theme. Flowstep buduje motyw na podstawie: Motyw otrzymuje krótką nazwę, pełną paletę dla trybu jasnego i ciemnego oraz krok zaokrąglenia. Jest zapisywany w organizacji w sekcji Themes na stronie Home, a plik używa go dla każdego ekranu wygenerowanego później. Gdy plik ma już motyw, Flowstep nie projektuje kolejnego z własnej inicjatywy. Aby uzyskać świeży motyw, ponownie wybierz Automatic w menu motywu — kolejne generowanie zaprojektuje nowy motyw, a plik przyjmie go. Jeśli Flowstep nie może zaprojektować motywu, plik korzysta z jednego z motywów wbudowanych.
Wspomnij o kolorach marki w pierwszym prompcie albo ustaw je w wytycznych projektowych przed generowaniem, a wygenerowany motyw zacznie od nich.

​
Zmień motyw jednego ekranu

Aby przestylizować pojedynczy ekran bez zmieniania reszty pliku:
  1. Zaznacz ekran na płótnie.
  2. W menu nad ekranem kliknij przycisk Theme.
  3. Wybierz jeden z motywów swojej organizacji lub motyw wbudowany albo przełącz się między Light a Dark.
Zmiana motywu natychmiast przemalowuje ekran. Przełączenie między Light a Dark prosi AI o ponowną stylizację ekranu, tak samo jak edycja AI. Menu jest niedostępne, gdy trwa generowanie.

​
Edytuj motyw

Otwórz motyw w sekcji Themes na stronie Home. Edytor motywu pokazuje podgląd motywu na żywo, a po prawej stronie widoczne są Theme settings. Użyj przycisków Light i Dark u góry, aby przełączać podgląd, i kliknij nazwę motywu, aby ją zmienić.
  • Colors — każda grupa kolorów ma próbkę dla trybu jasnego i ciemnego: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts i Sidebar. Kliknij próbkę, aby edytować jej kolory — na przykład wypełnienie i kolor tekstu danej grupy — za pomocą selektora kolorów lub wartości hex.
  • Radius — wybierz krok zaokrąglenia (Square, Slight, Balanced, Soft lub Round) albo wybierz Custom i przeciągnij Base radius, aby ustawić własną wartość.
Twoje zmiany zapisują się jako wersja robocza, więc ekrany nie zmieniają się podczas pracy. Gdy będziesz gotowy:
  • Kliknij Publish, aby zaktualizować każdy ekran używający motywu. Flowstep potwierdza komunikatem „Published. Screens using this theme are updating.” (Opublikowano. Ekrany używające tego motywu są aktualizowane.)
  • Kliknij Reset changes, aby odrzucić niepublikowane zmiany. Ekrany używające motywu pozostają bez zmian.
Aby usunąć motyw, kliknij Delete theme na dole Theme settings albo ikonę kosza obok niego na liście Themes na stronie Home. Usunięty motyw nie jest już proponowany w menu motywów, ale ekrany, które go już używają, zachowują swój wygląd, więc nic na płótnie się nie zmienia.
Wszyscy w Twojej organizacji, oprócz osób z rolą Guest (gość), mogą edytować i usuwać motywy.

​
Połącz kolory i zaokrąglenia z motywem

Kolory i zaokrąglenia mogą wskazywać na token motywu zamiast na stałą wartość. Połączona wartość podąża za motywem ekranu, więc gdy motyw się zmieni — na inny motyw, po opublikowanej edycji lub przy przełączeniu między jasnym a ciemnym — połączone kolory i zaokrąglenia zmieniają się razem z nim. Colors — w panelu Fill lub Border kliknij próbkę koloru. Na karcie Token wyszukaj lub wybierz token z grup Theme, Base lub Tailwind. Użyj karty Custom, aby podać dokładny kolor. Połączony kolor pokazuje w panelu nazwę swojego tokenu, a Ty nadal możesz zmieniać jego krycie. Corners — w panelu Corners kliknij podgląd narożnika. Na karcie Token wybierz krok (na przykład md lub lg); na karcie Custom wpisz dokładną wartość w pikselach. Połączony narożnik pokazuje nazwę tokenu, a zmiana zaokrąglenia motywu przelicza go na nowo. Aby zamienić połączoną wartość z powrotem na stałą, kliknij Detach from token. Kolor lub narożnik zachowuje swój obecny wygląd, ale nie podąża już za motywem.

​
Warto wiedzieć

  • Ekrany zachowują własny motyw — każdy ekran pamięta swój motyw i wygląd. Zmiana motywu pliku wpływa tylko na ekrany, które wygenerujesz dalej. Aby przestylizować istniejące, użyj menu Theme przy danym ekranie.
  • Tylko opublikowane wersje — ekrany pokazują opublikowaną wersję motywu. Wersje robocze są widoczne wyłącznie w edytorze motywu, dopóki ich nie opublikujesz.
  • Połączenia z tokenami przetrwają edycje — kolory motywu użyte w cieniach, filtrach i gradientach pozostają połączone z motywem, gdy Flowstep edytuje lub ponownie generuje ekran.
  • Kroki zaokrąglenia, które się nie skalują — tokeny narożników none i full są zawsze odpowiednio kwadratowe i w pełni zaokrąglone, niezależnie od zaokrąglenia motywu.