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

# Schnellstart

> Von einfachen Worten zur Full-Stack-Website.

Willkommen zu dieser Schnellstart-Anleitung zur Erstellung einer Full-Stack-Website mit Lumi.

## Startseite

<img src="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250821-202133.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=97442ddf98e65bf43b19ba56f6c17969" alt="20250821 202133 Jpe" width="3824" height="1682" data-path="images/20250821-202133.jpeg" />

Die Startseite enthält hauptsächlich:

<Columns cols={2}>
  <Card title="Mit einer Anweisung beginnen" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-154846.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=e8fafb96d5faa0c0ec43a0a0dfdb5f05" width="1618" height="358" data-path="images/screenshot-20250825-154846.png">
    Starten Sie Ihr Projekt mit einer einzigen, beschreibenden Anweisung.
  </Card>

  <Card title="Eine Vorlage verwenden" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-154857.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=3a4d7d4389fbc89e96b9014357cb3e40" width="1336" height="98" data-path="images/screenshot-20250825-154857.png">
    Beschleunigen Sie die Entwicklung, indem Sie mit unserer kuratierten Sammlung von Vorlagen beginnen.
  </Card>

  <Card title="Community entdecken" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-155003.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=2ea3bc083fb9a17998db34d75529494f" width="2970" height="1608" data-path="images/screenshot-20250825-155003.png">
    Durchsuchen Sie alle öffentlichen Projekte, einschließlich der neuesten Kreationen und vorgestellten Auswahlen.
  </Card>

  <Card title="Ihre Projekte finden" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-155110.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=f069a5eb78bea9ca0f234038acd526eb" width="3824" height="1916" data-path="images/screenshot-20250825-155110.png">
    Durchsuchen Sie alle von Ihnen erstellten Projekte.
  </Card>

  <Card title="Ihr Konto verwalten" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155323.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=611896281375aa724b885f4f28c03ea8" width="3822" height="1916" data-path="images/20250825-155323.jpeg">
    Überprüfen Sie Ihr monatliches Guthaben und passen Sie die Kontoeinstellungen an.
  </Card>

  <Card title="Ihren Plan anpassen" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155328.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=20009fa87973936ecda6032924e5754e" width="3822" height="1916" data-path="images/20250825-155328.jpeg">
    Führen Sie jederzeit nahtlos ein Upgrade oder Downgrade Ihres Abonnements durch.
  </Card>
</Columns>

## Projektseite

<img src="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-160241.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=a3ad5075591b6b38cc9c65aeb1b99c90" alt="Screenshot 20250825 160241 Pn" width="3814" height="1916" data-path="images/screenshot-20250825-160241.png" />

Die Projektseite ist in 3 Hauptbereiche unterteilt:

<Columns cols={2}>
  <Card title="Der KI-Chat" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155522.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=d3231c7a4837f6899fe90820a7ad4f0e" width="3840" height="1916" data-path="images/20250825-155522.jpeg">
    Dies ist Ihre Kommandozentrale für die Interaktion mit Lumi. Verwenden Sie sie, um Anweisungen zu geben, Änderungen anzufordern, Ideen zu sammeln und die Entwicklung Ihrer Anwendung zu steuern.
  </Card>

  <Card title="Vorschau" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155526.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=5eb8c40ef71ecde175fb7e9b367e2abd" width="3840" height="1916" data-path="images/20250825-155526.jpeg">
    Dies ist eine live, interaktive und vollständig anpassbare Ansicht Ihrer Website. Klicken Sie auf ein beliebiges Element, um dessen Funktionalität zu testen oder direkte Anpassungen mit dem visuellen Editor vorzunehmen.
  </Card>

  <Card title="Arbeitsbereich" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155529.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=8efc9e5f82cc14c5604ff02d1d8751a5" width="3840" height="1916" data-path="images/20250825-155529.jpeg">
    Dieser Bereich enthält Informationen über Ihre Website, Backend-Funktionen, die Nutzung von Tools, den Domainnamen, die Sicherheit usw.
  </Card>
</Columns>

## Der KI-Chat

Die Hauptfunktion des KI-Chats ist die Verwendung von natürlichsprachlichen Anweisungen, um Ihre App zu erstellen und zu verfeinern. Es gibt jedoch Elemente am unteren Rand des Eingabefeldes, die es weiter zu erkunden gilt.

<img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/Result_2.png?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=fbc0b4aeff6eb6c9b60e894f13bc99de" alt="Result 2 Pn" width="1604" height="338" data-path="images/Result_2.png" />

<u>Hinweis</u>: Für jede von Ihnen eingegebene Anweisung können Sie jederzeit in den Chat zurückgehen und auf „Dies rückgängig machen“ klicken, um Ihre Anweisung zu widerrufen. Sie werden gebeten, Ihre Anfrage zu bestätigen, und die App kehrt dann in den Zustand zurück, in dem sie sich unmittelbar vor diesem Zeitpunkt befand.

<Note>
  **<u>Hinweis:</u>** Für jede von Ihnen eingegebene Anweisung können Sie jederzeit in den Chat zurückgehen und auf „Rückgängig machen“ klicken, um Ihre Anweisung zu widerrufen. Sie werden gebeten, Ihre Anfrage zu bestätigen, und die App kehrt dann in den Zustand zurück, in dem sie sich unmittelbar vor diesem Zeitpunkt befand.

  <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-154652.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=5ba3ab426454dfb5f020b99d199d6f32" alt="20250911 154652 Jpe" width="960" height="450" data-path="images/20250911-154652.jpeg" />
</Note>

## Ihre erste App erstellen: Schritt für Schritt

<Steps>
  <Step title="Mit einer klaren Anweisung beginnen">
    Beschreiben Sie die Kernfunktion Ihrer App in einfacher Sprache.

    Zum Beispiel:

    ```mdx theme={null}
    Erstelle einen Aufgaben-Manager für Teams, um Aufgaben zuzuweisen, zu verfolgen und abzuschließen, mit Fortschrittsberichten.
    ```
  </Step>

  <Step title="Ihre App sofort generieren">
    Lumi erstellt automatisch die Benutzeroberfläche und das Backend Ihrer App. Sie können den Prozess live im Vorschau-Panel verfolgen.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-155051.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=e12430ce9ede5193248a77c6c56a4cfb" alt="20250911 155051 Jpe" width="3840" height="1916" data-path="images/20250911-155051.jpeg" />
  </Step>

  <Step title="Verfeinern und Anpassen">
    Verwenden Sie den KI-Chat für allgemeine Anpassungen oder die [Visuellen Bearbeitungen](/de/features/visual-edits) zur Feinabstimmung von Details wie Farben und Layout. Aktivieren Sie den [Diskussionsmodus](/de/features/modes#discuss-mode), um vor der Implementierung mit der KI an komplexer Logik zusammenzuarbeiten.
  </Step>

  <Step title="Gründlich testen">
    Interagieren Sie mit Ihrer Website im Vorschau-Panel wie ein Benutzer und klicken Sie sich durch jede Funktion, um sicherzustellen, dass alles perfekt funktioniert.
  </Step>

  <Step title="Teilen und Veröffentlichen">
    Sobald Sie bereit sind, live zu gehen, klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Seite bereitzustellen und sie der Welt zu präsentieren.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-160827.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=7fd2a73b38e219cc8fcfbb818cac7fe7" alt="20250911 160827 Jpe" width="2896" height="1702" data-path="images/20250911-160827.jpeg" />
  </Step>
</Steps>
