Lovable Tutorial auf Deutsch: Deine erste App in Schritten

Du hast eine Idee für eine kleine App, vielleicht eine Rezeptsammlung oder eine Einkaufsliste für die Familie, und hast von Lovable gehört. Dann öffnest du die Seite, siehst ein leeres Eingabefeld und denkst: Und jetzt? Dieses Tutorial führt dich durch die ersten Schritte, auf Deutsch und ohne Vorkenntnisse.

Falls du noch nicht genau weißt, was hinter dem Begriff steckt: Lies vorher kurz Was ist Vibe Coding? Einfach erklärt für Einsteiger.

Was Lovable eigentlich ist

Lovable ist ein Werkzeug, das komplett im Browser läuft. Du beschreibst in normalen Sätzen, was du bauen willst, und Lovable erzeugt daraus eine funktionierende Web-App, also eine Anwendung, die du im Browser öffnest, ohne etwas zu installieren. Hinter der App steckt echter Code, der dir gehört.

Ein paar Begriffe tauchen in Lovable immer wieder auf:

• Projekt: eine App. Jedes Projekt hat einen eigenen Chat, eine Vorschau und einen Verlauf aller Versionen.
• Workspace: dein Arbeitsbereich, in dem deine Projekte liegen.
• Chat: das Gesprächsfenster, in dem du mit Lovable sprichst.

Du kannst kostenlos starten. Was die Bezahlpläne umfassen, steht direkt bei Lovable.

Schritt 1: Konto anlegen

Du registrierst dich mit E-Mail-Adresse oder einem bestehenden Google-, GitHub- oder Apple-Konto. Danach landest du auf dem Dashboard, der Startseite mit dem großen Eingabefeld. Du kannst auch zuerst deinen Prompt eintippen. Lovable fragt dann beim Absenden nach der Anmeldung und merkt sich, was du geschrieben hast.

Schritt 2: Deine App beschreiben

Im Eingabefeld steht „Ask Lovable to create…“. Achte darauf, dass im Modus-Auswahlfeld Build ausgewählt ist. Jetzt beschreibst du deine Idee. Laut Lovable funktioniert das in jeder Sprache, also auch auf Deutsch.

Baue eine Rezeptsammlung für meine Familie. Jedes Rezept hat einen Titel, eine Zutatenliste, die Zubereitung und eine Kategorie (Frühstück, Hauptgericht, Kuchen). Oben ist ein Suchfeld und ein Filter nach Kategorie. Lege fünf Beispielrezepte an. Gemütliches Design, gut lesbar auf dem Handy. Noch ohne Login und ohne Datenbank.

Der letzte Satz ist wichtig. Lovable empfiehlt selbst, die erste Version ohne Anmeldung und ohne Datenbank, also ohne dauerhaften Datenspeicher, zu bauen. Dann kann weniger schiefgehen, und beides lässt sich später mit einem eigenen Prompt ergänzen.

Schritt 3: Der ersten Version zuschauen

Lovable legt das Projekt an und baut los. Die erste Version braucht ein paar Minuten. Danach siehst du den Editor mit zwei Hälften: links der Chat, rechts die Vorschau, in der deine App live läuft. Klick dich ruhig durch, probiere die Suche und die Filter aus.

Gut zu wissen: Ab jetzt wird jede Änderung als Version gespeichert, die du wiederherstellen kannst. Du kannst also nichts endgültig kaputt machen.

Schritt 4: Eine Sache nach der anderen ändern

Jetzt verbesserst du deine App im Chat. Die wichtigste Regel: Bitte um eine Änderung pro Nachricht und schau danach in die Vorschau.

Füge bei jedem Rezept ein Feld für die Anzahl der Portionen hinzu.

Auch Gefühle sind ein guter Prompt. Wenn dir die Gestaltung nicht gefällt, schreib einfach, was dich stört:

Die Seite wirkt zu kühl. Mach sie wärmer und freundlicher.

Warum kleine Schritte so viel bringen, zeigt sich spätestens, wenn etwas nicht klappt. Dazu mehr in Fehlermeldung? So bringst du die KI dazu, ihren Fehler selbst zu beheben.

Schritt 5: Per Klick nachbessern

Für kleine optische Änderungen ist Zeigen besser als Beschreiben. Über die Werkzeugleiste der Vorschau wählst du ein Element direkt aus, etwa eine Überschrift oder einen Button, und sagst, was sich ändern soll. Texte kannst du mit Edit text inline sogar direkt auf der Seite überschreiben, ganz ohne Prompt.

Schritt 6: Testen, bevor du den Link verschickst

Nimm dir ein paar Minuten und probiere alles aus:

1. Klick jeden Button und jeden Link an.
2. Teste die Suche und jeden Filter.
3. Schalte über das Geräte-Symbol über der Vorschau auf die Handyansicht. Die meisten Menschen öffnen deinen Link auf dem Smartphone.

Wenn etwas nicht stimmt, sag genau, was und wo:

Wenn ich den Filter „Kuchen“ anklicke, erscheinen keine Rezepte. Es sollen alle Kuchenrezepte angezeigt werden.

Schritt 7: Teilen

Mit Publish oben rechts bekommt deine App eine eigene Adresse auf lovable.app, die du weitergeben kannst. Die häufigste Überraschung für Neulinge: Die veröffentlichte Seite ist eine Momentaufnahme. Spätere Änderungen siehst du sofort in der Vorschau, online erscheinen sie aber erst, wenn du erneut auf Publish klickst.

Was das für dein erstes Projekt bedeutet

Lovable fasst den ganzen Ablauf selbst in drei Worten zusammen: beschreiben, verfeinern, veröffentlichen. Jede App, egal wie groß, ist diese Schleife, nur öfter wiederholt. Für dich heißt das:

• Starte mit einer Idee, die in einen Absatz passt.
• Lass Login und Datenbank in der ersten Version weg.
• Ändere immer nur eine Sache und teste sofort.
• Verlass dich auf den Versionsverlauf, wenn etwas schiefgeht.

Fazit

Die Klicks in Lovable sind schnell gelernt. Schwieriger ist das, was dazwischen passiert: die Idee klein genug schneiden, gute Prompts schreiben und ruhig bleiben, wenn die KI etwas kaputt macht. Genau dafür gibt es unsere kostenlose Mini-Anleitung „Deine erste App in 60 Minuten“, die in sieben Schritten auch mit Lovable funktioniert.

Du willst die Schritte zum Abhaken neben dir liegen haben? Hol dir das PDF mit Checkliste und trag dich auf Wunsch auf die Warteliste für den Online-Kurs ein.