> ## 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.

# Erste Schritte mit Flowstep: Registrierung und Designgenerierung

> Erstellen Sie ein kostenloses Flowstep-Konto, generieren Sie Ihr erstes UI-Design aus einem Textprompt und teilen Sie es mit Ihrem Team — alles in einer Sitzung.

<iframe src="https://www.youtube.com/embed/yrmvaLi6Cto" 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 />

Die ersten Schritte mit Flowstep dauern nur wenige Minuten. Sie registrieren sich kostenlos, beschreiben, was Sie erstellen möchten, und Flowstep generiert Ihr Design sofort. Von dort aus können Sie es durch weitere Prompts verfeinern, Ihr Team zur Zusammenarbeit einladen und das Ergebnis mit Stakeholdern teilen — ohne Design-Tools oder vorherige Erfahrung erforderlich.

<Steps>
  <Step title="Erstellen Sie Ihr kostenloses Konto">
    Gehen Sie zu [flowstep.ai](https://flowstep.ai) und registrieren Sie sich mit Google oder mit Ihrer E-Mail-Adresse und Ihrem Passwort. Es ist keine Kreditkarte erforderlich, um zu beginnen.

    <Note>
      Wenn Sie sich mit E-Mail und Passwort registrieren, suchen Sie in Ihrem Posteingang nach einer Bestätigungs-E-Mail („Confirm your Flowstep email") und klicken Sie auf den Link, um Ihr Konto zu aktivieren – Sie können sie von der Seite „Check your inbox" erneut senden, wenn sie nicht ankommt. Disposable-E-Mail-Adressen werden nicht akzeptiert. Verwenden Sie eine geschäftliche oder persönliche E-Mail-Adresse.
    </Note>

    Nach der Registrierung landen Sie auf einem kurzen Willkommensscreen: beantworten Sie drei schnelle Fragen und beschreiben Sie dann direkt dort Ihr erstes Design — vier Beispiel-Prompts (Dashboard, Landing page, Mobile app, Checkout) stehen zur Verfügung, wenn Sie einen Ausgangspunkt benötigen.
  </Step>

  <Step title="Beschreiben Sie den gewünschten Screen">
    Geben Sie einen Prompt in einfachem Englisch ein, der die gewünschte Benutzeroberfläche beschreibt. Seien Sie spezifisch über den Zweck des Screens und alle wichtigen Elemente, die er enthalten sollte.

    Ein Prompt wie „Dashboard for a project management app with a task list, progress bars, and a sidebar navigation" gibt Flowstep genug Kontext, um ein fokussiertes, nützliches Design zu erstellen.

    <Tip>
      Sie benötigen kein Design-Vokabular. Konzentrieren Sie sich darauf, wofür der Screen gedacht ist und welche Informationen er anzeigen sollte — Flowstep kümmert sich um Layout, Typographie, Abstände und Farbwahl.
    </Tip>
  </Step>

  <Step title="Generieren Sie Ihre Screens">
    Senden Sie Ihren Prompt ab und Flowstep generiert Ihr Design in Sekunden. Sie können mehrere Screens in einer Sitzung generieren, um verschiedene Richtungen zu erkunden oder einen vollständigen Ablauf zu erstellen.
  </Step>

  <Step title="Durch Konversation verfeinern">
    Nicht ganz richtig? Geben Sie einen Folge-Prompt ein, um das Design anzupassen — ändern Sie das Farbschema, ordnen Sie Elemente neu an, tauschen Sie Inhalte aus oder fordern Sie ein anderes Layout an. Sie können auch Elemente manuell bearbeiten oder Aktionen mit einem Klick im Optionsmenü verwenden.
  </Step>

  <Step title="Exportieren oder teilen Sie Ihre Arbeit">
    Wenn Sie mit dem Ergebnis zufrieden sind, wählen Sie, wie Sie es freigeben möchten:

    * **Exportieren** Sie den Code oder über MCP
    * **Laden Sie** den Screen als JPG- oder PNG-Datei herunter
    * **Kopieren Sie in Figma** mit der Tastenkombination, um direkt in eine vorhandene Figma-Datei einzufügen
    * **Teilen Sie einen Link** mit Ihren Teamkollegen oder Stakeholdern – sie können das Design anzeigen, ohne ein Konto zu erstellen

    <Note>
      Sie können Ihr Team zur Zusammenarbeit an einer Flowstep-Datei einladen. Sie können beitreten und innerhalb von Minuten mit dem Beitrag beginnen.
    </Note>
  </Step>
</Steps>