Zum Hauptinhalt springen
Screenshot 2026 05 06 At 14 19 49
Wenn Sie bereit sind, ein Design zu teilen oder weiterzugeben, können Sie es mit Flowstep als statisches Bild exportieren – entweder als JPG oder PNG. Beide Formate sind weit verbreitet in Design-Tools, Präsentationssoftware und Browsern, sodass Sie Ihre KI-generierten Designs überall hin mitnehmen können.

​
So exportieren Sie Ihr Design

1

Design öffnen

Navigieren Sie zum Design, das Sie exportieren möchten, in Flowstep.
2

Export-Menü öffnen

Suchen Sie die Export-Option in der Symbolleiste oder im Design-Bereich. Wählen Sie sie aus, um die Export-Einstellungen zu öffnen.
3

Format auswählen

Wählen Sie je nach Anwendungsfall JPG oder PNG (siehe den Vergleich unten).
4

Datei herunterladen

Bestätigen Sie Ihre Auswahl und laden Sie das exportierte Bild auf Ihr Gerät herunter.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG: Welches Format sollten Sie wählen?

Wenn Sie Ihr Design in eine Folienpräsentation einfügen oder eine schnelle Vorschau an einen Kunden senden, ist JPG normalerweise die richtige Wahl. Wenn Sie scharfe Kanten oder einen transparenten Hintergrund benötigen – z. B. um das Design über ein anderes Bild zu legen – verwenden Sie PNG.

​
Code-Export

Über die Schaltfläche Code exportieren Sie Ihr Design als React + Tailwind-Code – kopieren Sie einen Ausschnitt oder laden Sie das gesamte Paket als ZIP herunter. Sie können einen einzelnen Screen, mehrere ausgewählte Screens oder eine ganze Datei auf einmal exportieren. Wenn Sie mehr als einen Screen exportieren, wird jeder zu einer eigenen Komponentendatei, und jede Navigation, die Sie zwischen Screens eingerichtet haben, wird in den generierten Code integriert, sodass die exportierte App von Anfang bis Ende klickbar ist. Pakete sind in sich geschlossen: Bilder, die im Design verwendet werden (einschließlich derjenigen, die Sie im Chat-Bereich hinzugefügt haben), sind in einem public/assets/-Ordner enthalten, wobei der Code mit lokalen Pfaden darauf verweist, sodass der Export wie vorgesehen ausgeführt wird. Heruntergeladene Dateien – sowohl Bilder als auch Code-Pakete – werden nach dem Screen benannt, zu dem sie gehören (als Fallback wird der Dateiname verwendet, wenn der Screen ohne Namen ist), was das Identifizieren von Exporten bei der Arbeit mit vielen Screens erleichtert.

​
Designs an Ihren Coding Agent senden

Anstatt eine Datei herunterzuladen, können Sie ein Design direkt an einen KI-Coding-Assistenten übergeben. Klicken Sie auf Send to your coding agent in der Symbolleiste – oder öffnen Sie den Export-Dialog und wählen Sie dieselbe Option – um einen vorgefertigten Prompt für Ihren Agent zu kopieren:
Ihr Agent liest diese Screens über MCP und erstellt sie in Ihrem Repository. Fügen Sie diesen Prompt in Claude, Cursor oder Ihren bevorzugten Agent ein.
Der Prompt weist Ihren Agent an, die Screens über den Flowstep MCP Server zu abrufen und in Ihrem Codebase neu zu erstellen. Sie können einen einzelnen Screen, mehrere ausgewählte Screens oder eine ganze Datei auf einmal weitergeben – der Prompt passt sich an das an, was Sie ausgewählt haben. Dies nutzt den Flowstep MCP Server, daher verbinden Sie zunächst einen MCP-Client. Informationen zu unterstützten Clients finden Sie unter MCP Server-Übersicht und unter Quickstart zum Verbinden eines Clients.
Wenn Sie Ihr Design in einen Vektor-Bearbeitungs-Workflow aufnehmen müssen, kopieren Sie es stattdessen direkt in Figma. Siehe Flowstep-Designs sofort in Figma kopieren.