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

# Erste Schritte

> Von der ersten Eingabeaufforderung bis zur Full-Stack-App

<div id="overview-of-lovable">
  ## Überblick über Lovable
</div>

Willkommen zu dieser Schritt-für-Schritt-Anleitung zum Erstellen einer Full‑Stack‑Anwendung mit Lovable:

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/lovable-dashboard.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=9740705cec0501ed75b6bddb02ad9dd1" alt="Lovable Dashboard Pn" width="2376" height="1748" data-path="images/lovable-dashboard.png" />

<div id="the-lovable-platform-overview">
  ### Übersicht über die Lovable-Plattform
</div>

<AccordionGroup>
  <Accordion title="Erstelle dein erstes Projekt">
    <Steps>
      <Step title="Schritt 1">
        Um loszulegen, gehe zu [lovable.dev](https://lovable.dev) und erstelle ein Konto. Sobald du registriert bist, kannst du dein erstes Projekt anlegen.
      </Step>

      <Step title="Schritt 2">
        Gib einfach eine erste Eingabeaufforderung ein, um alles zu starten, und Lovable übernimmt den Rest! Das ist der **Ausgangspunkt** für jedes Projekt in Lovable, mit dem du deine Ideen sofort zum Leben erwecken kannst.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Lovable-Dashboard">
    Bei Lovable steht Einfachheit an erster Stelle:

    * [**Hier**](https://lovable.dev/) **startest du dein Projekt** mit einer einzigen Eingabeaufforderung.
    * **Erkunde alle Projekte**, einschließlich der neuesten und hervorgehobenen.
    * **Starte mit einer Vorlage** aus unserer kuratierten Auswahl.
    * **Personalisiere deine Erfahrung**, indem du dein Profil ansiehst und bearbeitest.
    * [**Verwalte dein Konto**](https://lovable.dev/settings), um dein monatliches Guthaben zu prüfen und Einstellungen anzupassen.
    * **Experimentiere mit** [**Labs**](https://lovable.dev/settings/account)**-Features** wie Chat mode – aktiviere oder deaktiviere sie.
    * [**Upgrade oder Downgrade**](https://lovable.dev/settings/plans) **deinen Plan** nahtlos.
  </Accordion>

  <Accordion title="Projektübersicht">
    In Lovable folgt jedes Projekt einem strukturierten Workflow:

    * **Bearbeite mühelos** mit einer chatbasierten Oberfläche.
    * **Füge Bilder hinzu** für präzise Bearbeitungen und Inspiration.
    * **Wähle Komponenten aus und bearbeite sie visuell** für ein nahtloses Design-Erlebnis.
    * **Wechsle mühelos** zwischen Bearbeitungsmodus und Chat mode.
    * **Verfolge Änderungen** mit der Versionshistorie und stelle jede vorherige Version wieder her.
    * **Navigiere mühelos durch die Seiten** deines Projekts.
    * **Aktiviere Remixen** oder benenne dein Projekt bei Bedarf um.
    * **Nutze Lovable Cloud** (oder integriere Supabase) für Backend-Funktionen.
    * **Arbeite über GitHub zusammen**, um deinen Code zu bearbeiten und zu verwalten.
    * **Veröffentliche, stelle bereit und teile** dein Projekt mit einem Vorschau-Link (denk daran, nach Änderungen erneut zu veröffentlichen).
    * **Wechsle zwischen Web- und Mobilansicht** für responsives Design.
    * **Aktualisiere das Vorschau-Modalfenster**, um Updates sofort zu sehen.
    * **Öffne dein Projekt direkt** über den Vorschau-Link.
  </Accordion>

  <Accordion title="Projekteinstellungen">
    Die Einstellungen jedes Projekts ermöglichen dir:

    * **Wichtige Projektdetails anzuzeigen**, wie Gesamtzahl der Bearbeitungen und Erstellungsdatum.
    * **Benutzerdefiniertes Wissen einzurichten**, um den Kontext deines Projekts anzupassen.
    * **Eine Verbindung zu einem GitHub-Repository herzustellen** für nahtlose Zusammenarbeit.
    * **Die Projektsichtbarkeit anzupassen**, wann immer nötig.
    * **Die Anzeige des Badges zu verwalten** (nur für kostenpflichtige Pläne verfügbar).
    * **Dein Projekt jederzeit umzubenennen**.
    * **Dein Projekt zu löschen** (⚠️ Gefahrenbereich).
  </Accordion>

  <Accordion title="Schnellzugriff auf das Projekt">
    Du kannst jederzeit schnell zugreifen auf:

    * **Dashboard** für eine Übersicht deiner Projekte.
    * **Kontoeinstellungen**, um dein Profil und deine Präferenzen zu verwalten.
    * **Dokumentation und Kundensupport** für Anleitungen und Unterstützung.
    * **Melde dich sicher ab** von deinem Lovable-Konto.
  </Accordion>
</AccordionGroup>

<div id="start-your-project">
  ### Starte dein Projekt
</div>

Es gibt mehrere Möglichkeiten, mit Lovable loszulegen – je nach deinen Vorlieben und vorhandenen Ressourcen:

<AccordionGroup>
  <Accordion title="Eingabeaufforderung">
    Das auf Eingabeaufforderungen basierende System von Lovable macht die App-Erstellung einfach.

    * Beschreibe im Eingabeaufforderungsfeld, was du bauen möchtest.
    * Je genauer du bist, desto besser werden die Ergebnisse.
    * Starte mit klaren und detaillierten Eingabeaufforderungen.
    * Du kannst dein Projekt unterwegs weiter verfeinern und anpassen.

    <Info>
      Beispiel:

      *„Erstelle ein Dashboard mit Benutzeranmeldung, monatlichen Verkäufen in einem Liniendiagramm und Kundendemografie in einem Kreisdiagramm.“*
    </Info>
  </Accordion>

  <Accordion title="Ein bestehendes Projekt remixen">
    Du kannst ein bestehendes öffentliches Projekt oder eines deiner eigenen Projekte remixen. Remixen ermöglicht es dir, den aktuellen Zustand eines Projekts als Ausgangspunkt wiederzuverwenden und darauf aufzubauen. Das ist eine großartige Möglichkeit, neue Ideen zu erkunden, Anpassungen vorzunehmen oder mit verschiedenen Änderungen zu iterieren, während die Originalversion erhalten bleibt.

    <Note>
      Du kannst öffentliche Projekte anderer Nutzer nur remixen, wenn das Projekt nicht mit Supabase verbunden ist.
    </Note>
  </Accordion>

  <Accordion title="Figma verwenden">
    Wenn du ein Design in Figma hast, erstelle einen Screenshot eines beliebigen Bereichs. Du kannst den Screenshot direkt in Lovable einfügen oder die Bilddatei per Drag-and-Drop hineinziehen. Sobald du die Eingabetaste drückst, wandelt Lovable dein Design in funktionalen Code um.
  </Accordion>

  <Accordion title="Eine Skizze verwenden">
    <Steps>
      <Step title="Schritt 1">
        Verwende [**Excalidraw**](https://excalidraw.com/) oder ein ähnliches Tool, um dein UI zu skizzieren.
      </Step>

      <Step title="Schritt 2">
        Mache einen Screenshot deiner Zeichnung und füge ihn dann in Lovable ein oder ziehe ihn per Drag-and-Drop hinein. Die Plattform verwandelt deine Skizze in lauffähigen Code.
      </Step>
    </Steps>

    [Weitere Informationen hier.](https://www.youtube.com/watch?v=c0zhLzcVJRI)
  </Accordion>

  <Accordion title="Eine Website oder Anwendung klonen">
    Wenn du eine bestehende Webseite nachbilden möchtest:

    <Steps>
      <Step title="Schritt 1">
        Mache einen Screenshot mit Tastenkürzeln wie *Cmd+Shift+4* auf dem Mac oder mit Tools wie der [GoFullPage Chrome Extension](https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl).
      </Step>

      <Step title="Schritt 2">
        Füge den Screenshot in Lovable ein oder ziehe ihn per Drag-and-Drop hinein. Lovable rekonstruiert die Struktur der Webseite in deinem Projekt.
      </Step>
    </Steps>

    [Weitere Informationen hier.](https://www.youtube.com/watch?v=tYDqBMilHkM)
  </Accordion>
</AccordionGroup>

<div id="edit-your-project">
  ### Bearbeite dein Projekt
</div>

<AccordionGroup>
  <Accordion title="Füge deinem Projekt benutzerdefiniertes Wissen hinzu">
    Das [Custom knowledge](/de/features/knowledge) in Lovable dient als **Bauplan** deines Projekts und organisiert Funktionalität, Design und Ziele an einem Ort.
  </Accordion>

  <Accordion title="Verwende Visual Edits">
    Visual Edits ermöglicht es dir, Elemente auf der Seite auszuwählen und entweder sofort zu bearbeiten, z. B. Text oder Farben zu aktualisieren, oder Eingabeaufforderungen zu verwenden, um Funktionalität und Layout anzupassen.

    Weitere Informationen findest du unter [Visual Edits](https://docs.lovable.dev/features/visual-edit).
  </Accordion>

  <Accordion title="Mache eine Änderung rückgängig oder bearbeite eine Nachricht und setze sie zurück, um einen anderen Ansatz auszuprobieren">
    Geschwindigkeit ist beim Erstellen von KI-gesteuerten Apps wichtig, aber ebenso Stabilität und Kontrolle. Deshalb haben wir die Versionierung erweitert, damit das Nachverfolgen von Änderungen mühelos ist.

    <Steps>
      <Step title="Setze sofort auf frühere Versionen zurück oder probiere einen anderen Ansatz aus">
        Du kannst eine ältere, funktionierende Version in der Vorschau anzeigen und bei Bedarf zu dieser Version zurückkehren oder eine frühere Nachricht bearbeiten und zurücksetzen, um einen anderen Ansatz zu erkunden. Nichts geht verloren – alle Änderungen, die danach vorgenommen wurden, bleiben im Chat und können jederzeit erneut angewendet werden.
      </Step>

      <Step title="Wichtige Bearbeitungen mit Lesezeichen versehen">
        Halte deine Arbeit organisiert, indem du wichtige Bearbeitungen mit Lesezeichen versiehst. So kannst du sie später leicht wiederfinden und erneut aufrufen.
      </Step>

      <Step title="Intuitive Versionshistorie">
        Der Verlaufsbereich funktioniert jetzt wie in Google Docs und macht das Nachverfolgen von Änderungen einfacher.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/history.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=b0b6b8829cd6db5c9b48c09e7c70aba4" alt="" width="391" height="37" data-path="images/history.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/redesign-history.jpeg?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=ff8031e1fe0ac2cf85b22ad5eb26065a" alt="" width="1512" height="982" data-path="images/redesign-history.jpeg" />
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Animationskomponente mit 21st dev hinzufügen">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MJ9pB741sXw?si=7vPZVpe0TyHIgTLp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="Bilder zur Eingabeaufforderung hinzufügen">
    Hänge Bilder direkt an den Chat an, um deinen Eingabeaufforderungen Kontext hinzuzufügen. So kannst du Ideen oder Konzepte leichter veranschaulichen, die sich besser zeigen als beschreiben lassen.

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/uaGnrK5Dkkc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
  </Accordion>

  <Accordion title="Füge deinem Projekt eine neue Seite hinzu">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/h6vnvFKzd0Y?si=cw_zapDQW3hQfVOc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="Code refaktorisieren">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/epVlkdNSVrs?si=ufy8WTXkPcpbhkW6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="Mit GitHub verbinden">
    Integriere dein Projekt mit GitHub, um nahtlos an deiner Anwendung zu iterieren. Du kannst Codeänderungen in GitHub oder deiner bevorzugten IDE vornehmen und gleichzeitig alles mit Lovable synchron halten.

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/zgNkhU4SYgQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    Weitere Informationen findest du unter [GitHub-Integration](https://docs.lovable.dev/integrations/git-integration).
  </Accordion>
</AccordionGroup>

<div id="add-fullstack-capabilities-to-your-project">
  ### Füge deinem Projekt Full-Stack-Funktionen hinzu
</div>

<AccordionGroup>
  <Accordion title="Verbinde ein Backend">
    Wenn du deiner Anwendung Backend-Funktionen hinzufügen möchtest, kannst du:

    * Dich mit dem integrierten Backend von Lovable verbinden –  [Lovable Cloud](https://docs.lovable.dev/features/cloud)
    * Die native [Supabase-Integration von Lovable](https://docs.lovable.dev/integrations/supabase) verwenden
  </Accordion>

  <Accordion title="Füge deiner Anwendung Zahlungsfunktionen mit Stripe hinzu">
    Es gibt viele Möglichkeiten, Stripe mit Lovable zu verbinden, aber der einfachste Weg ist, die integrierten Payment Links von Stripe zu nutzen. Sieh dir die [Stripe-Integration](https://docs.lovable.dev/integrations/stripe) für weitere Informationen an.
  </Accordion>

  <Accordion title="Füge E-Mail-Funktionen mit Resend hinzu">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/w5Xq-Kvt3J0?si=wdSxtbhg3-uH3NZt" title="YouTube-Videoplayer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

    Sieh dir die [Resend-Integration](https://docs.lovable.dev/integrations/resend) für weitere Informationen an.
  </Accordion>
</AccordionGroup>

<div id="deploy-and-publish-your-project">
  ### Projekt bereitstellen und veröffentlichen
</div>

<AccordionGroup>
  <Accordion title="SEO einrichten">
    Sorge für bestmögliche Ergebnisse, indem du unserem Leitfaden [SEO- und GEO-Best Practices umsetzen](https://docs.lovable.dev/tips-tricks/seo-geo) folgst.
  </Accordion>

  <Accordion title="Benutzerdefinierte Domain hinzufügen">
    Du kannst eine benutzerdefinierte Domain hinzufügen mit:

    * Entri (nativ in Lovable verfügbar)
    * Netlify
    * Vercel
    * Namecheap

    Weitere Informationen findest du unter [Benutzerdefinierte Domain](https://docs.lovable.dev/features/custom-domain).
  </Accordion>

  <Accordion title="Mein Projekt veröffentlichen">
    Wenn dein Projekt bereit ist, veröffentliche es, um eine teilbare URL zu erstellen. So kannst du deine Anwendung ganz einfach präsentieren oder sie mit Mitwirkenden und Stakeholdern teilen.

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/GFtWVXkZDTw" title="YouTube-Video-Player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    Weitere Informationen findest du unter [Veröffentlichen](https://docs.lovable.dev/features/publish).
  </Accordion>
</AccordionGroup>