Lovable anwenden: Deine erste App, Schritt für Schritt
Ein kompletter Lovable-Walkthrough, neu aufgebaut aus einem echten Anfänger-Build — strukturierte Prompts, Plan-Modus, Google Kalender, Bugfixes, Security-Scan und die Veröffentlichung als PWA. Jeder Schritt mit Screenshot.
Lovable in Kürze
- Der erste Prompt dreht sich um zwei Dinge: was die App macht (das Ziel) und wie der Nutzer durch sie durchläuft (der Flow). Ein bis zwei Features reichen zum Start.
- Vor dem Senden von Build auf Plan umschalten. Lovable stellt zuerst Klärungsfragen und schreibt einen korrigierbaren Plan, bevor Code entsteht.
- Stimmt etwas nicht, hilft ein präziser Prompt — „Aufgaben starten zur nächsten 15-Minuten-Marke, nie in der Vergangenheit“ wirkt besser als „Mach die Zeiten richtig“.
- Vor der Veröffentlichung den Security-Scan ausführen — „Try to fix all“ ist gratis. Ein Satz Alltagsenglisch macht daraus eine PWA für den Homescreen.
Lovable AI Tutorial for Beginners - Build Your First App
Quellvideo von:Kevin Stratvert11:40
Screenshots stammen aus dem Quellvideo und sind mit Zeitstempel-Deep-Links gekennzeichnet. Der Text basiert auf unserem eigenen, vollständigen Transkript — die Fakten entsprechen der Aufzeichnung.
Dieses Tutorial ist eine unabhängige, illustrierte Zusammenfassung für Leserinnen und Leser. Wer die Creator unterstützen möchte, schaut sich das verlinkte Lovable-Partnervideo an.
Eine App in Lovable bauen, Schritt für Schritt
- 1
Den Workspace kennenlernen
Nach der Anmeldung landest du im Lovable-Workspace. In der linken Seitenleiste liegen Home, Suche, Ressourcen und Connectors, darunter die letzten Chats. Das Prompt-Feld in der Mitte ist der Startpunkt jeder App; direkt darunter liegen Template-Kollektionen für Inspiration.
Der Lovable-Workspace: Prompt-Feld mittig, Chats und Connectors links.Bei 0:40 ansehen - 2
Einen strukturierten Erst-Prompt schreiben
Vor dem Tippen zwei Dinge klären: das Ziel (was die App tut) und den Flow (wie der Nutzer sie durchläuft). Dieser Build ist eine Sprache-zu-Kalender-App: du redest Aufgaben vor, sie landen im Google Kalender. Rahmenbedingungen nennen — jede Aufgabe dauert 30 Minuten außer anders gesagt, der Nutzer bestätigt vor dem Speichern — und den Look mit Worten wie clean, sleek, minimal beschreiben. Zum Schluss: „Stell mir alle Fragen, die du brauchst, um genau zu verstehen, was ich will.“
Der komplette Erst-Prompt: Ziel, Flow, Rahmenbedingungen, Look, Einladung für Fragen.Bei 3:20 ansehen - 3
Vor dem Senden in den Plan-Modus schalten
Das Build-Dropdown unter dem Prompt-Feld öffnen und Plan wählen — „erst besprechen, dann bauen“ (Umschalt mit Alt+P). Im Plan-Modus stellt Lovable Klärungsfragen und schreibt zuerst einen Plan. So entsteht nicht die falsche App. Für das erste Projekt die wertvollste Angewohnheit.
Das Build/Plan-Dropdown: Plan heißt erst besprechen, dann bauen.Bei 2:40 ansehen - 4
Die Klärungsfragen beantworten
Lovable kommt mit Fragen zurück — visuelle Wahl wie die Akzentfarbe, dann funktionale: kostenlose eingebaute Spracherkennung oder Drittanbieter, Google Kalender über den Lovable-Connector und so weiter. Ehrlich antworten; vage Antworten werden später vage Features.
Klärungsfragen: Akzentfarbe wählen, dann die funktionalen Optionen beantworten.Bei 4:12 ansehen - 5
Den Plan lesen und freigeben
Der Plan gliedert sich in verständliche Abschnitte — Look & Feel, Screens & Flow, Funktionsweise — plus technische Details. Auch Nicht-Techniker prüfen Screens & Flow: Das ist deine App auf Papier. Stimmt etwas nicht, statt der Freigabe die Änderung ins Prompt-Feld tippen; passt es, auf Approve klicken.
Der generierte Plan: prüfen, Änderungen anfordern, dann freigeben.Bei 5:00 ansehen - 6
Google Kalender auf Aufforderung verbinden
Mitten im Build hält Lovable an und bittet dich, deinen Google Kalender zu verbinden. Auf die Connect-Schaltfläche klicken, mit dem Google-Konto anmelden und mit dem Projekt verknüpfen. In dieser Demo ist der Kalender auf dein Konto fixiert; später lässt sich auf pro-nutzer-Anmeldung umstellen.
Mitten im Build bittet Lovable um die Google-Kalender-Verbindung.Bei 5:35 ansehen - 7
Sprich deine Aufgaben zum Test
Sobald die App-Vorschau erscheint, aufs Mikrofon klicken und wirklich drauflosreden: „Ich muss den TPS-Bericht mit neuem Deckblatt an Bill schicken und die Kundenaufstellung an Charles.“ Aufnahme stoppen, und die App zerlegt die Sprache in Aufgabenkarten, die auf Bestätigung warten.
Erster Sprachtest: die App verwandelt Gerede in Aufgaben.Bei 5:50 ansehen - 8
Verhalten mit präzisen Prompts korrigieren
Erster Bug: Aufgaben wurden genau auf die Sekunde gelegt, in der du sie gesagt hast. Die Korrektur ist eine präzise Anweisung: „Aufgaben sollen zur nächsten 15-Minuten-Marke starten (und nicht in der Vergangenheit), nicht zur aktuellen Zeit.“ Lovable vermerkt die Änderung als kleine Karte — deshalb lohnt sich der saubere Plan vorher.
Ein präziser Korrektur-Prompt rastet Aufgaben auf 15-Minuten-Marken ein.Bei 8:00 ansehen - 9
Ihr deine Datums-Sprache beibringen
Sag „ruf morgen um 10 Uhr Kevin an“ und es landet um 3 Uhr morgens — relative Daten kann die App noch nicht. Die Regeln per Prompt: tomorrow, yesterday, Friday at 3 p.m. erkennen; morning heißt vor 11 Uhr, afternoon ist 13–16 Uhr; next Monday ist der übernächste Montag. Je konkreter die Beispiele, desto weniger Nachbesserung.
Sprach-Datumsregeln: When-Beispiele und Dauer-Beispiele, einzeln aufgelistet.Bei 7:40 ansehen - 10
Mit Screenshots im Plan-Modus debuggen
Die Zeiten weichen um etwa sieben Stunden ab — ein Zeitzonen-Bug. Screenshot der falschen Zeiten direkt ins Prompt-Feld ziehen und die Beobachtung benennen: „Das sieht nach einem Zeitzonen-Problem aus, die Zeiten gehen um rund 7 Stunden fehl.“ Zurück in den Plan-Modus für die Lösung; ist der Plan zu technisch: „Ich bin nicht technisch, erklär es mir in einer Sprache, die ich verstehe.“
Bug abfotografieren, beschreiben, und der Plan-Modus liefert die Lösung.Bei 8:55 ansehen - 11
Veröffentlichen und URL sichern
Vor dem Publish schaltet ein letzter Prompt die App von deinem Kalender auf pro-nutzer-Anmeldung um, damit niemand deine Termine berührt. Dann rechts oben auf Publish: eine kostenlose lovable.app-URL (eigene Domains sind Pro), Sichtbarkeit auf Public, dazu Titel, Beschreibung und Social-Bild.
Publish-Flow: die kostenlose lovable.app-URL und die App-Metadaten.Bei 9:45 ansehen - 12
Security-Scan ausführen, PWA ergänzen
Vor dem Livegang empfiehlt Lovable einen ausführlichen Security-Scan — gerade bei KI-Code wertvoll. Fixes über „Try to fix all“ kosten keine Credits. Danach der Phone-Polish per Satz: „Mach es so, dass ich es als App-Icon auf meinem Handy installieren kann. Nimm ein türkises Mikrofon als Icon.“ Lovable erzeugt PWA-Manifest und Touch-Icons.
Die Security-Fixes sind gratis — der PWA-Prompt macht sie installierbar.Bei 10:40 ansehen - 13
Auf dem Handy installieren
Update veröffentlichen, die URL im Handy-Browser öffnen und aufs Teilen-Symbol tippen. „Zum Home-Bildschirm“ wählen, mit Hinzufügen bestätigen — und das App-Icon landet auf dem Homescreen. Ein Tipp, und es läuft Vollbild wie eine native App, ganz ohne App Store.
Zum Home-Bildschirm hinzufügen macht die App zum Phone-Icon.Bei 11:00 ansehen