App mit Vibe Coding bauen: von der Idee bis zur veröffentlichten App

Um eine App mit Vibe Coding zu bauen, schreibst du eine Ein-Seiten-Beschreibung der ersten Version, gibst sie einem KI-App-Builder als ersten Prompt und lässt die App dann in kleinen, getesteten Schritten wachsen: Daten, Login, der Hauptablauf, Feinschliff, eine Sicherheitsprüfung und schließlich die Veröffentlichung. Dieser Leitfaden begleitet ein Beispielprojekt durch alle Phasen: eine Buchungs-App für ein kleines Yoga-Studio, mit den Prompts für jeden Schritt.

Wenn du so etwas noch nie gebaut hast, beginnt unser Vibe-Coding-Tutorial für Einsteiger kleiner. Einen breiteren Überblick, der nicht an Vibe Coding gebunden ist, findest du unter wie du eine App mit KI baust.

Das Projekt

Stell dir eine Yoga-Studio-Besitzerin namens Sara vor, die jede Woche acht Kurse anbietet. Buchungen kommen über WhatsApp; sie führt für jeden Kurs eine Papierliste und überbucht oft. Sie möchte:

• dass Schülerinnen und Schüler den Wochenplan sehen und einen Platz buchen können.
• dass jeder Kurs eine Kapazität hat.
• eine Liste pro Kurs, die sie an der Tür abhaken kann.
• dass Schüler bis zwei Stunden vorher stornieren können.

Das ist die ganze erste Version. Keine Zahlungen, keine Mitgliedschaften, kein App Store. Das kommt später oder nie.

Schritt 1: Schreib eine Ein-Seiten-Spezifikation

Bevor du ein Werkzeug öffnest, halte die erste Version in einfachen Worten fest. Zehn Minuten hier sparen Stunden des Hin und Her. Eine brauchbare Form:

• Wer nutzt sie: Schüler (buchen und stornieren), Sara (Kurse verwalten, Listen ansehen).
• Bildschirme: Wochenplan, Kursdetails, meine Buchungen, Admin-Kurse, Admin-Teilnehmerliste.
• Daten: Kurse (Name, Lehrkraft, Startzeit, Dauer, Kapazität), Buchungen (Schüler, Kurs, Status), Schüler (Name, E-Mail, Telefon).
• Regeln: Kein Buchen eines vollen Kurses; eine Buchung pro Schüler und Kurs; Stornierung bis zwei Stunden vorher; nur Sara sieht die Admin-Seiten.
• Nicht in v1: Zahlungen, Kurspakete, Warteliste, Erinnerungen.

Die Liste „Nicht in v1“ ist die wichtigste. Sie hält den Bau abschließbar. Unser Leitfaden zu einem Produktanforderungsdokument mit KI schreiben geht weiter, falls du eine ausführlichere Spezifikation willst.

Schritt 2: Wähle ein Werkzeug, das die ganze Schleife abdeckt

Für eine App mit Datenbank, Logins und einer öffentlichen URL brauchst du einen KI-App-Builder, der den Code ausführt, eine Datenbank anschließt und veröffentlicht, und keinen Chat-Assistenten, der dir Dateien übergibt. Unser Vergleich der Vibe-Coding-Werkzeuge listet die Optionen auf. Wir verwenden hier Mythex, weil es jeden Schritt an einem Ort abdeckt: Chat, Live-Vorschau, eine echte Datenbank und Dateispeicher sowie Veröffentlichung mit einem Klick.

Schritt 3: Der erste Prompt

Formuliere die Spezifikation als einen Absatz. Füge nicht das ganze Dokument mit jedem Detail auf einmal ein; gib den Kern und ergänze den Rest schrittweise.

Baue eine Buchungs-App für mein Yoga-Studio. Schüler melden sich mit Name, E-Mail und Telefon an, sehen den Wochenplan und buchen einen Platz in einem Kurs. Jeder Kurs hat einen Namen, eine Lehrkraft, eine Startzeit, eine Dauer und eine Kapazität; ein voller Kurs zeigt „Ausgebucht“ und lässt sich nicht buchen. Schüler sehen ihre Buchungen und können bis zwei Stunden vorher stornieren. Ich bin der Admin: Ich kann Kurse anlegen und bearbeiten und sehe für jeden Kurs, wer gebucht hat. Ruhiges, einfaches Design, das auf dem Handy gut funktioniert.

Wenn du unsicher bist, ob das Werkzeug alles verstanden hat, frage zuerst nach einem Plan. In Mythex legt der Modus Plan die Bildschirme und Daten fest, bevor Code geschrieben wird, und du gibst sie frei.

Schritt 4: Bring die Kernschleife zum Laufen

Die Kernschleife ist das Einzige, wofür die App da ist: Ein Schüler bucht einen Kurs, und Sara sieht es. Teste nur das:

1. Als Schüler registrieren und einen Kurs buchen.
2. Die Admin-Ansicht öffnen. Steht die Buchung dort?
3. Denselben Kurs noch einmal buchen. Es sollte abgelehnt werden.
4. Die Kapazität eines Kurses auf 2 setzen, ihn von zwei Schülerkonten buchen und einen dritten versuchen.

An dieser Stelle tauchen meist zwei Probleme auf. Der Wochenplan zeigt Zeiten in der Zeitzone des Servers, nicht des Studios. Und die Prüfung „Ausgebucht“ findet nur auf der Seite statt, sodass ein schneller Doppelklick zwei Buchungen erzeugt.

Zeige alle Kurszeiten in der Zeitzone des Studios, [Asia/Dubai], unabhängig davon, wie das Gerät des Besuchers eingestellt ist.

Prüfe Kapazität und doppelte Buchungen auf dem Server, wenn eine Buchung angelegt wird, nicht nur auf der Seite. Kommen zwei Anfragen gleichzeitig für den letzten Platz, darf nur eine erfolgreich sein.

Repariere die Kernschleife, bevor du etwas hinzufügst. Alles andere hängt davon ab.

Schritt 5: Ergänze die übrigen Regeln, eine pro Nachricht

Gehe nun die Regeln der Spezifikation einzeln durch:

Schüler können eine Buchung bis zwei Stunden vor Kursbeginn stornieren. Danach blende die Schaltfläche Stornieren aus und lehne die Stornierung auf dem Server mit einer klaren Meldung ab.

Nur mein Konto darf die Admin-Seiten öffnen. Prüfe das bei jeder Admin-Aktion auf dem Server, nicht nur durch das Ausblenden des Menüs.

Teste nach jeder Regel und gehe nur weiter, wenn sie funktioniert. Wenn eine Änderung etwas kaputt macht, setze auf den letzten guten Checkpoint zurück und formuliere die Anfrage klarer, statt Korrekturen auf Korrekturen zu stapeln.

Schritt 6: Poliere, was echte Nutzer bemerken

Echte Nutzer bemerken kleine Dinge. Eine kurze Liste für Saras App:

• Leerzustände: „Diese Woche noch keine Kurse“ statt einer leeren Seite.
• Bestätigung: „Du bist für Vinyasa am Dienstag um 18:00 gebucht“ nach der Buchung.
• Layout für Handys: große Schaltflächen, der Wochenplan auf einem 375-px-Bildschirm lesbar.
• Freie Plätze: „3 Plätze frei“ bei jedem Kurs, damit Schüler schneller buchen.

Zeige auf jeder Kurskarte die freien Plätze, z. B. „3 von 12 frei“. Nach der Buchung zeige eine Bestätigung mit Kursname, Tag und Uhrzeit und eine Schaltfläche zu meinen Buchungen.

Schritt 7: Teste wie ein Fremder

Bevor jemand anderes die App nutzt, verbringe eine halbe Stunde damit, sie zu zerbrechen:

Du kannst die KI auch bitten, Grenzfälle durchzugehen:

Liste zehn Dinge auf, die ein echter Schüler tun könnte und die das Buchen oder Stornieren brechen könnten, teste jedes und behebe, was fehlschlägt. Sag mir, was du geändert hast.

Schritt 8: Eine Sicherheitsprüfung

Diese App speichert Namen, E-Mail-Adressen und Telefonnummern, deshalb lohnt sich eine kurze Sicherheitsprüfung. Die wichtigsten Fragen:

• Kann ein Schüler die Buchungen oder Kontaktdaten eines anderen sehen?
• Stehen Schlüssel oder Passwörter in Code, der im Browser läuft?
• Ist das Anmeldeformular gegen Bots geschützt?
• Gibt es ein Backup der Daten?

Unsere Seite darüber, ob Vibe Coding sicher ist, erklärt jede Prüfung und liefert Prompts dafür, und die Sicherheits-Checkliste für mit KI gebaute Apps ist die ausführliche Version.

Schritt 9: Veröffentlichen

Wenn die Kernschleife, die Regeln und die Prüfungen bestehen, veröffentliche. In Mythex geht das mit einem Klick, und die App bekommt eine öffentliche URL, mit Datenbank und Hosting bereits eingerichtet. Mit Pro kannst du eine eigene Domain verbinden, etwa book.sarasyoga.com; siehe wie du eine eigene Domain verbindest.

Bevor du den Link verschickst, prüfe die veröffentlichte Version noch einmal. Buche einen Kurs von deinem Handy aus. Produktion und Vorschau sollten sich gleich verhalten, aber überprüfe es.

Schritt 10: Erste Nutzer und die nächste Version

Gib den Link zuerst fünf regelmäßigen Schülerinnen und Schülern, nicht allen auf einmal. Bitte sie, ihren nächsten Kurs darüber zu buchen, und sag dir, was verwirrend war. Behebe danach die drei wichtigsten Punkte, die sie nennen.

Nach ein paar Wochen echter Nutzung schreibt sich eine v2-Liste für eine solche App meist von selbst: eine Warteliste für volle Kurse, E-Mail-Erinnerungen am Abend vorher und Kurspakete, die online bezahlt werden. Jede bekommt dieselbe Behandlung: in wenigen Zeilen spezifizieren, prompten, testen, veröffentlichen. Zu Zahlungen siehe wie du Zahlungen in deine App einbaust. Um Aufmerksamkeit zu gewinnen, siehe wie du eine App startest und erste Nutzer gewinnst.

Eine Handy-App daraus machen

Viele Studios wollen ein Symbol auf den Handys ihrer Schüler. Mit Mythex Pro kann die veröffentlichte App zu einer Android-App werden (einer Datei, die du bei Google Play hochladen kannst) und zu einer iPhone-App, die mit deinem eigenen App-Store-Connect-Schlüssel an TestFlight geschickt wird, ohne Mac. Die Handy-App öffnet die veröffentlichte Web-App, sodass jede Veröffentlichung eines Updates auch in der Handy-App ankommt.

Was du daraus mitnehmen kannst

Der eigentliche Bau war der kurze Teil. Was die App brauchbar machte, waren die Liste „Nicht in v1“ der Spezifikation, das Testen der Kernschleife vor allem anderen, serverseitige Regeln für Kapazität und Zugriff und fünf echte Nutzer, bevor es fünfzig werden. So sieht Vibe Coding aus, wenn die App für andere Menschen funktionieren muss.

Bereit, es mit deiner eigenen App zu versuchen? Schreib deine Ein-Seiten-Spezifikation und füge den ersten Absatz in den KI-App-Builder ein. Wenn du weitere App-Typen und die dazugehörigen Prompts sehen willst, lies unsere Beispiele für Vibe Coding.

Fragen