Wie man mit KI eine Buchungs-App baut

Bevor du einen KI-Builder öffnest, schreibe die kleinste sinnvolle Version der App auf.

Für eine Buchungs- oder Termin-App bedeutet das meist:

• wer bucht: Kundinnen und Kunden, Mitarbeitende oder beides
• was gebucht wird: Leistungen, Kurse, Räume, Anrufe, Besuche
• wie Zeit funktioniert: feste Slots, individuelle Dauern, Pufferzeit, Öffnungszeiten
• was Nutzer tun müssen: Verfügbarkeit prüfen, einen Slot wählen, bestätigen, verschieben, stornieren
• was Admins brauchen: Leistungen, Preise, Verfügbarkeit, Buchungen verwalten

Liste die ersten Screens auf, die du brauchst. Eine einfache Version enthält oft:

• Startseite oder Landingpage
• Leistungsübersicht
• Kalender oder Slot-Auswahl
• Buchungsformular
• Bestätigungsseite
• Admin-Ansicht für Buchungen

Definiere dann die wichtigsten Datenobjekte in normaler Sprache:

• Leistung: Name, Dauer, Preis, Beschreibung
• Mitarbeiter oder Ressource: Name, Arbeitszeiten, Verfügbarkeit für Leistungen
• Buchung: Name der Kundin oder des Kunden, Datum, Uhrzeit, Leistung, Status
• Benutzer: Kunden- oder Admin-Konto, falls Login nötig ist

Dieser Planungsschritt ist wichtig, weil der erste Prompt besser funktioniert, wenn er die App-Struktur klar beschreibt, statt nur zu sagen: „Mach mir eine Buchungs-App.“

In Moremade beschreibst du die Website oder App in normaler Sprache, und der KI-Agent schreibt den Quellcode. Du kannst mit einer Web-App in React + Tailwind oder mit einer Mobile-App in React Native mit Expo starten.

Für den ersten Prompt solltest du der KI genug Details geben, um den Ablauf zu bauen, aber nicht so viele, dass du gleich alle Sonderfälle lösen willst.

Ein guter erster Prompt sollte enthalten:

• App-Typ: Website oder Mobile-App
• wer der Nutzer ist
• die wichtigsten Screens
• Buchungsregeln
• Designrichtung
• was später editierbar sein soll

Beispiel für einen ersten Prompt:

Baue eine saubere Web-App für ein kleines Terminbusiness, mit der Kundinnen und Kunden Leistungen online buchen können. Verwende React und Tailwind. Füge eine Startseite, eine Leistungsübersicht, einen Buchungsablauf, einen Kalender mit verfügbaren Zeitfenstern, ein Formular für Kundendaten und eine Bestätigungsseite hinzu. Ergänze eine Admin-Ansicht, um bevorstehende Buchungen zu sehen. Leistungen sollen Name, Dauer, Preis und Beschreibung enthalten. Verwende ein schlichtes, neutrales Design mit klaren Buttons und einem mobilfreundlichen Layout. Starte mit Platzhalterdaten und mache das Layout später leicht editierbar.

Das reicht aus, um eine brauchbare erste Version zu erzeugen, ohne die KI zu stark raten zu lassen.

Nach dem ersten Build solltest du die Live-Vorschau wie eine echte Nutzerin oder ein echter Nutzer prüfen.

Achte auf diese Basics:

• Versteht man, was überhaupt gebucht wird?
• Sind die Leistungsdetails klar?
• Ist die Auswahl von Datum und Uhrzeit einfach?
• Fragt das Buchungsformular die richtigen Informationen ab?
• Zeigt die Bestätigungsseite die Buchungszusammenfassung?
• Funktioniert das mobile Layout gut?

Moremade enthält einen visuellen Inspector, sodass du ein Element anklicken und ändern kannst. Es gibt außerdem eine Code-Ansicht, falls du den generierten Code ansehen willst.

Beim Verfeinern solltest du enge, konkrete Folge-Prompts schreiben. Spezifische Prompts funktionieren meist besser als allgemeine.

Beispiele:

• „Verschiebe die Leistungszusammenfassung auf dem Desktop auf die rechte Seite und lasse sie fixiert, während die Nutzerin oder der Nutzer Datum und Uhrzeit auswählt.“
• „Füge 15 Minuten Pufferzeit zwischen Terminen hinzu und blende nicht verfügbare Zeitfenster aus.“
• „Ändere das Buchungsformular so, dass die Telefonnummer optional ist, E-Mail erforderlich ist und der Bestätigungsbutton deaktiviert bleibt, bis ein Slot ausgewählt wurde.“

In diesem Schritt entsteht der Großteil der Qualität der App. Generieren, prüfen, anpassen, wiederholen.

Moremade speichert außerdem auf kostenpflichtigen Plänen den Versionsverlauf, was hilfreich ist, wenn du Änderungen vergleichen oder zu einem früheren Stand zurückkehren willst.

Starte zuerst mit Platzhalterdaten. Sobald die Screens und der Ablauf sinnvoll sind, entscheide, ob du echte Speicherung, Benutzerkonten oder Zahlungen brauchst.

Nutze Supabase, wenn du Folgendes brauchst:

• eine echte Buchungsdatenbank
• Login für Kunden oder Admins
• Dateispeicherung

Typische Fälle:

• eine Salon-App, die Termine speichert und dem Personal die Verwaltung von Buchungen erlaubt
• eine Coaching-App, in der sich Kundinnen und Kunden einloggen, um kommende Sessions anzusehen oder zu verschieben
• ein Admin-Dashboard zum Nachverfolgen von Buchungen über die Zeit

Nutze Stripe, wenn die Zahlung Teil der Buchung selbst ist.

Typische Fälle:

• kostenpflichtige Beratungen, die im Voraus gebucht werden
• Kurse oder Events mit festem Preis
• Anzahlungen, die vor der Bestätigung eines Termins erforderlich sind

Moremade hat integrierte Verbindungen für Supabase und Stripe. Halte den Integrations-Prompt auf den Ablauf fokussiert, den du brauchst.

Beispiele:

• „Verbinde diese App mit Supabase und speichere Buchungen mit Feldern für Leistung, Datum, Uhrzeit, Kundenname, E-Mail und Status.“
• „Füge einen Admin-Login mit Supabase hinzu und zeige ein privates Dashboard mit den bevorstehenden Buchungen.“
• „Füge Stripe Checkout hinzu, damit Nutzer eine Leistung bezahlen, bevor die Buchung bestätigt wird. Verwende den im Ablauf ausgewählten Leistungspreis.“

Füge Login oder Zahlungen nicht nur hinzu, weil es möglich ist. Für viele frühe Versionen ist ein einfacher Buchungsanfrage-Ablauf leichter mit Nutzern zu testen.

Eine Buchungs-App wird oft überwiegend auf dem Handy genutzt, selbst wenn sie als Website gebaut wurde. Teste das Verhalten auf kleinen Bildschirmen früh.

Achte auf diese typischen Probleme:

• Datumsauswahl oder Slot-Liste sind schwer antippbar
• Sticky-Buttons verdecken Inhalte
• Formulare sind zu lang
• Time-Slot-Karten umbrechen schlecht
• Zusammenfassungstext wird unlesbar

Wenn du eine Mobile-App baust, erzeugt Moremade React Native mit Expo. Wenn du eine Website baust, ist die Ausgabe React + Tailwind, also solltest du Responsive-Layouts trotzdem sorgfältig testen.

Hilfreiche Prompts beim Testen:

• „Verbessere das mobile Layout für die Buchungsschritte, damit jeder Abschnitt sauber untereinander steht und Buttons gut mit dem Daumen bedienbar sind.“
• „Mache die Zeitfenster auf kleinen Bildschirmen größer und reduziere die Anzahl der Spalten.“
• „Wandle den Buchungsablauf in einen schrittweisen Mobile-Wizard mit Fortschrittsanzeige oben um.“

Gehe den gesamten Ablauf selbst mehrere Male durch. Bitte dann ein oder zwei Personen, ohne Anleitung einen Termin zu buchen. Beobachte, wo sie zögern.

Sobald der Ablauf funktioniert, veröffentliche eine arbeitsfähige Version, statt zu warten, bis jedes Detail perfekt ist.

Mit Moremade kannst du mit einem Klick auf eine kostenlose yourname.moremade.ai-Subdomain veröffentlichen. In kostenpflichtigen Plänen kannst du eine eigene Domain verbinden. Domains können auch direkt in Moremade gekauft werden.

Ein einfacher Launch-Prozess sieht so aus:

• zuerst auf eine Subdomain veröffentlichen
• die Live-App komplett testen
• letzte Layout- oder Textprobleme beheben
• bei Bedarf eine eigene Domain verbinden

Du kannst den vollständigen Quellcode jederzeit als ZIP exportieren oder nach GitHub pushen. Das ist wichtig, wenn du eine Kopie behalten, den Code außerhalb der Plattform prüfen oder die Entwicklung später woanders fortsetzen willst.

Für frühes Nutzertesting reicht die kostenlose Subdomain meist aus. Verwende eine eigene Domain, wenn die App kundenorientiert ist oder Teil einer bestehenden Unternehmenswebsite wird.

Die größten Fehler betreffen meist Umfang und Ablauf, nicht den Code.

Achte auf Folgendes:

• Mit einem unklaren Prompt starten. „Baue eine Buchungs-App“ lässt zu viel offen.
• Alles auf einmal hinzufügen. Sorge erst dafür, dass ein Buchungspfad funktioniert, bevor du Konten, Zahlungen, Erinnerungen oder mehrere Rollen für Mitarbeitende hinzufügst.
• Buchungsregeln überspringen. Wenn Dauer, Verfügbarkeit oder Statusregeln unklar sind, wird auch die generierte Oberfläche unklar.
• Zu früh echte Integrationen verwenden. Platzhalterdaten sind schneller, um das Produkt zu formen.
• Stornierung oder Verschiebung nicht testen. Das sind Kernfunktionen von Terminprodukten.
• Mobiles Verhalten ignorieren. Buchungsformulare, die am Desktop gut wirken, brechen auf dem Handy oft auseinander.
• Den Code nicht exportieren. Behalte einen ZIP-Export oder push zu GitHub, damit du immer Zugriff auf den Quellcode hast.

Eine gute Faustregel: Behandle die erste Version als Arbeitsentwurf. Baue den kürzesten nützlichen Ablauf, teste ihn und schärfe dann Logik und Design nach.