Skip to main content
Ein Theme ist eine gemeinsame Farbpalette und Eckenrundung für Ihre Screens. Jede Datei hat ein Theme und ein Erscheinungsbild (hell oder dunkel), und Screens werden mit den Tokens des Themes gestaltet. Wenn Sie ein Theme bearbeiten, folgt jeder Screen, der es verwendet, dieser Änderung. Ihr Team arbeitet so mit einem gemeinsamen Satz an Entscheidungen, statt Farben in jedem Prompt neu festzulegen. Themes, die Sie erstellen oder generieren, werden in Ihrer Organisation gespeichert und unter Themes auf Home aufgelistet. So kann jede Datei in der Organisation sie verwenden.

​
Ein Theme für eine Datei auswählen

Wählen Sie Theme und Erscheinungsbild für neue Screens im Prompt-Composer innerhalb einer Datei. Die Theme-Schaltfläche ist im Prompt-Feld auf Home nicht verfügbar.
1

Öffnen Sie das Theme-Menü

Klicken Sie im Prompt-Composer auf die Theme-Schaltfläche. Sie zeigt das Farbmuster des aktuellen Themes oder ein Farbrad, wenn das Theme Automatic ist. Das Menü trägt den Titel Theme for new screens.
2

Wählen Sie ein Theme

Wählen Sie Automatic, eines der Themes Ihrer Organisation (oben aufgelistet) oder ein integriertes Theme: Default, Blue, Grayscale, Green, Ice, Orange, Red, Rose, Violet oder Yellow.
3

Wählen Sie ein Erscheinungsbild

Wählen Sie unter Appearance entweder Light oder Dark oder Automatic. Mit Automatic entscheidet Flowstep pro Screen anhand Ihres Prompts. Ein Prompt wie „a dark dashboard“ ergibt einen dunklen Screen.
Ihre Auswahl gilt für die Screens, die Sie als Nächstes generieren. Screens, die bereits auf der Canvas liegen, behalten ihr Aussehen.

​
Flowstep ein Theme entwerfen lassen

Wenn eine Datei noch kein Theme hat, etwa eine neue Datei, bei der das Theme auf Automatic steht, entwirft Flowstep zusammen mit den ersten generierten Screens ein eigenes Theme. Während Flowstep daran arbeitet, sehen Sie im Chat einen Schritt Designing theme. Flowstep erstellt das Theme aus:
  • Farben, die Sie in Ihrem Prompt nennen
  • Farben in Ihren Design-Richtlinien
  • Markenfarben aus Anhängen und Links, die Sie einfügen
  • Dem Produkt und der Stimmung, die Ihr Prompt beschreibt, wenn es keine genaueren Vorgaben gibt
Das Theme erhält einen kurzen Namen, eine vollständige Palette für helle und dunkle Darstellung sowie eine Eckenrundung. Es wird in Ihrer Organisation unter Themes auf Home gespeichert, und die Datei verwendet es für alle danach generierten Screens. Sobald eine Datei ein Theme hat, entwirft Flowstep von sich aus kein weiteres. Wenn Sie ein neues Theme möchten, wählen Sie im Theme-Menü erneut Automatic. Die nächste Generierung entwirft dann ein neues Theme, und die Datei übernimmt es. Wenn Flowstep kein Theme entwerfen kann, greift die Datei auf ein integriertes Theme zurück.
Nennen Sie Ihre Markenfarben in Ihrem ersten Prompt oder legen Sie sie in Ihren Design-Richtlinien fest, bevor Sie generieren. Das generierte Theme startet dann von diesen Farben.

​
Theme eines einzelnen Screens ändern

Um einen einzelnen Screen neu zu gestalten, ohne den Rest der Datei zu berühren:
  1. Wählen Sie den Screen auf der Canvas aus.
  2. Klicken Sie im Menü über dem Screen auf die Schaltfläche Theme.
  3. Wählen Sie eines der Themes Ihrer Organisation oder ein integriertes Theme, oder wechseln Sie zwischen Light und Dark.
Ein Theme-Wechsel färbt den Screen sofort um. Der Wechsel zwischen Light und Dark lässt die KI den Screen neu gestalten, genau wie bei einer KI-Bearbeitung. Das Menü ist nicht verfügbar, während eine Generierung läuft.

​
Ein Theme bearbeiten

Öffnen Sie ein Theme im Bereich Themes auf Home. Der Theme-Editor zeigt eine Live-Vorschau des Themes, rechts mit Theme settings. Verwenden Sie die Schaltflächen Light und Dark oben, um die Vorschau umzuschalten. Klicken Sie auf den Namen des Themes, um es umzubenennen.
  • Colors – jede Farbgruppe hat ein Muster für hell und eines für dunkel: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts und Sidebar. Klicken Sie auf ein Farbmuster, um seine Farben zu bearbeiten, etwa die Füll- und Textfarbe einer Gruppe. Nutzen Sie dafür den Farbwähler oder einen Hex-Wert.
  • Radius – wählen Sie eine Eckenstufe (Square, Slight, Balanced, Soft oder Round). Oder wählen Sie Custom und ziehen Sie Base radius, um Ihren eigenen Wert festzulegen.
Ihre Änderungen werden als Entwurf gespeichert, damit sich Screens während der Arbeit nicht verändern. Wenn Sie so weit sind:
  • Klicken Sie auf Publish, um jeden Screen zu aktualisieren, der das Theme verwendet. Flowstep bestätigt mit „Published. Screens using this theme are updating.“ (sinngemäß: Veröffentlicht. Screens, die dieses Theme verwenden, werden aktualisiert.)
  • Klicken Sie auf Reset changes, um Ihre unveröffentlichten Änderungen zu verwerfen. Screens, die das Theme verwenden, sind davon nicht betroffen.
Um ein Theme zu entfernen, klicken Sie unten in Theme settings auf Delete theme oder auf das Papierkorb-Symbol daneben in der Liste Themes auf Home. Ein gelöschtes Theme wird in Theme-Menüs nicht mehr angeboten. Screens, die es bereits verwenden, behalten jedoch ihr Aussehen, sodass sich auf Ihrer Canvas nichts ändert.
Alle in Ihrer Organisation außer Guests (Gäste) können Themes bearbeiten und löschen.

​
Farben und Ecken mit Ihrem Theme verknüpfen

Farben und Ecken können auf ein Theme-Token statt auf einen festen Wert verweisen. Ein verknüpfter Wert folgt dem Theme des Screens. Ändert sich das Theme, etwa durch ein anderes Theme, eine veröffentlichte Bearbeitung oder einen Wechsel zwischen hell und dunkel, aktualisieren sich verknüpfte Farben und Ecken mit. Colors: Klicken Sie im Panel Fill oder Border auf das Farbmuster. Wählen Sie auf dem Tab Token ein Token aus den Gruppen Theme, Base oder Tailwind, oder suchen Sie danach. Verwenden Sie den Tab Custom für eine exakte Farbe. Eine verknüpfte Farbe zeigt ihren Token-Namen im Panel, und Sie können ihre Deckkraft weiterhin anpassen. Corners: Klicken Sie im Panel Corners auf eine Eckenvorschau. Wählen Sie auf dem Tab Token eine Stufe (zum Beispiel md oder lg). Auf dem Tab Custom geben Sie einen exakten Wert in Pixeln ein. Eine verknüpfte Ecke zeigt ihren Token-Namen, und wenn Sie die Eckenrundung des Themes ändern, wird sie neu gerundet. Um einen verknüpften Wert wieder in einen festen Wert zu verwandeln, klicken Sie auf Detach from token. Die Farbe oder Ecke behält ihr aktuelles Aussehen, folgt dem Theme aber nicht mehr.

​
Gut zu wissen

  • Screens behalten ihr eigenes Theme: Jeder Screen merkt sich sein Theme und Erscheinungsbild. Eine Änderung des Datei-Themes wirkt sich nur auf Screens aus, die Sie als Nächstes generieren. Bestehende Screens passen Sie über das Theme-Menü des jeweiligen Screens an.
  • Nur veröffentlichte Versionen: Screens zeigen die veröffentlichte Version eines Themes. Entwürfe sind nur im Theme-Editor sichtbar, bis Sie veröffentlichen.
  • Token-Verknüpfungen bleiben erhalten: Theme-Farben, die in Schatten, Filtern und Verläufen verwendet werden, bleiben mit dem Theme verknüpft, wenn Flowstep einen Screen bearbeitet oder neu generiert.
  • Rundungsstufen, die sich nicht skalieren: Die Eck-Tokens none und full sind immer eckig beziehungsweise vollständig rund, unabhängig von der Rundung des Themes.