> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Was ist Flowstep?

> Flowstep ist ein KI-Designtool, das polierte UI-Screens aus Textprompten generiert. Erfahren Sie, was es tut, für wen es gedacht ist und was Sie damit erstellen können.

<iframe src="https://www.youtube.com/embed/ziyHZVaSbvQ" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

Beschreiben Sie den gewünschten Screen und erhalten Sie in Sekunden eine gestaltete Benutzeroberfläche.

Für Entwickler ist es die schnellste Möglichkeit, eine Benutzeroberfläche zu spezifizieren, bevor Code geschrieben wird. Für PM und Gründer ist es eine Möglichkeit, Produktideen ohne Unklarheiten zu kommunizieren. Für Designer ist es ein Ausgangspunkt, der die leere Leinwand überspringt.

## Was Sie mit Flowstep tun können

* **Screens aus Text generieren** — beschreiben Sie, was Sie möchten, erhalten Sie in Sekunden eine gestaltete Benutzeroberfläche
* **Durch Prompts oder direkte Bearbeitungen iterieren** — verfeinern Sie Layouts, Kopien und Styling ohne die Canvas zu verlassen
* **Als interaktiven Prototyp in der Vorschau anzeigen** — Flowstep verknüpft Ihre Screens automatisch in einen anklickbaren Ablauf. Siehe [Prototypen](/de/prototypes).
* **Verbindung zu Ihrer IDE über MCP** — generieren und bearbeiten Sie Screens von Cursor, Claude Code, Windsurf oder Claude Desktop. Siehe [MCP Server](/de/mcp/overview).
* **Export zu Figma, Code oder als Bilddateien** — fügen Sie direkt in eine vorhandene Figma-Datei ein, exportieren Sie den Code oder laden Sie Screens als PNG/JPG herunter
* **Mit einem Link freigeben** — Prüfer benötigen kein Flowstep-Konto, um zu sehen oder einen Kommentar zu hinterlassen

## Für wen Flowstep geeignet ist

* **Entwickler**, die Produkt-UI ohne Designer aufbauen oder einen Screen visuell spezifizieren möchten, bevor sie ihn implementieren
* **Produktmanager und Gründer**, die Ideen visuell kommunizieren oder eine Idee validieren
* **Designer**, die die leere Leinwand überspringen — beginnen Sie mit einem generierten Layout und bearbeiten Sie von dort aus

<Note>
  Keine Designerfahrung erforderlich. Wenn Sie einen Screen in einfachem Englisch beschreiben können, kann Flowstep ihn generieren.
</Note>

## Wo soll es weitergehen?

<CardGroup cols={2}>
  <Card title="Schnellstart" icon="rocket" href="/de/getting-started">
    Generieren Sie Ihren ersten Screen in unter fünf Minuten.
  </Card>

  <Card title="MCP Server" icon="terminal" href="/de/mcp/overview">
    Verwenden Sie Flowstep von Cursor, Claude Code oder einem beliebigen MCP-kompatiblen Client.
  </Card>

  <Card title="Designs generieren" icon="wand-magic-sparkles" href="/de/generating-designs">
    Wie Sie Prompts schreiben, die die Screens produzieren, die Sie wirklich möchten.
  </Card>

  <Card title="Figma-Integration" icon="figma" href="/de/figma-integration">
    Fügen Sie Flowstep-Designs mit einer Verknüpfung in eine vorhandene Figma-Datei ein.
  </Card>
</CardGroup>