Vibe-Coding-Beispiele: 10 echte App-Typen, Prompts und typische Fehler

Die häufigsten Vibe-Coding-Beispiele sind kleine, nützliche Web-Apps: Tracker, Buchungsseiten, interne Tools, Kundenportale, Landingpages, Quizze, Dashboards und einfache KI-Tools. Unten findest du zehn davon. Zu jeder siehst du, wer sie baut, den ersten Prompt, was meist schiefgeht und den Folge-Prompt, der es behebt.

Das sind Sammelbeispiele aus den Projekten, die Leute am häufigsten zu KI-App-Buildern mitbringen, keine Fallstudien einer einzelnen Person. Die Prompts kannst du kopieren. Die Fehler sind die, die immer wieder auftreten, und genau deshalb sind sie der nützliche Teil. Wenn Vibe Coding für dich neu ist, fang mit Was ist Vibe Coding an.

1. Ein persönlicher Budget-Tracker

Wer ihn baut: Privatleute, die Tabellen ausprobiert und aufgegeben haben.

Erster Prompt:

Baue einen monatlichen Budget-Tracker. Ich füge Ausgaben mit Betrag, Kategorie (Essen, Miete, Verkehr, Freizeit, Sonstiges), Datum und Notiz hinzu. Zeige die Summe dieses Monats pro Kategorie als Balkendiagramm und eine Liste der letzten Ausgaben. Ich kann pro Kategorie ein Budget festlegen und sehen, wie viel übrig ist.

Was schiefging: Das Diagramm zählte jede jemals eingegebene Ausgabe, nicht nur die dieses Monats, sodass im zweiten Monat jede Kategorie überzogen aussah. Außerdem wurden Beträge mit Komma („1,200“) als 1 gespeichert.

Fix-Prompt:

Diagramm und Summen sollen nur Ausgaben des gewählten Monats enthalten. Füge oben eine Monatsauswahl hinzu, standardmäßig der aktuelle Monat. Akzeptiere außerdem Beträge mit Komma oder Leerzeichen und speichere sie als Zahlen.

Lektion: „Dieser Monat“ ist eine Regel. Sprich Regeln laut aus.

2. Eine Buchungsseite für einen kleinen Friseursalon

Wer sie baut: Inhaber kleiner Betriebe, die genug von Buchungen per Telefon und DM haben.

Erster Prompt:

Baue eine Buchungsseite für meinen Salon. Kunden wählen eine Leistung, ein Datum und einen freien Termin und geben dann Name und Telefonnummer ein. Ich habe eine private Admin-Seite hinter einem Login, die Buchungen nach Tag zeigt.

Was schiefging: Zwei Kunden buchten innerhalb einer Minute denselben Termin um 10:00 Uhr, weil die Seite die Verfügbarkeit nur beim ersten Laden prüfte. Eine 90-minütige Farbbehandlung blockierte außerdem die Termine danach nicht.

Fix-Prompt:

Wenn ein Kunde eine Buchung abschickt, prüfe auf dem Server, dass jeder davon abgedeckte Termin noch frei ist, und lehne sie sonst mit „Dieser Termin wurde gerade vergeben“ ab. Eine Leistung blockiert ihre volle Dauer, eine 90-minütige Buchung um 10:00 blockiert also 10:00, 10:30 und 11:00.

Lektion: Alles, was zwei Personen gleichzeitig tun können, braucht eine Prüfung auf dem Server. Die ausführliche Version findest du unter So baust du eine Buchungs-App.

3. Eine Speisekarte mit QR-Code für ein Restaurant

Wer sie baut: Café- und Restaurantbesitzer, die Speisekarten zu oft neu drucken.

Erster Prompt:

Baue eine mobile Speisekarten-Website für mein Café. Abschnitte für Frühstück, Mittagessen, Getränke und Desserts, jedes Gericht mit Name, Preis, Kurzbeschreibung und Ernährungs-Tags (vegan, glutenfrei). Ich brauche eine Admin-Seite, um Gerichte zu bearbeiten und als ausverkauft zu markieren. Zeige einen QR-Code, den ich drucken kann und der zur Speisekarte führt.

Was schiefging: Nichts ging kaputt, aber die Karte war im Café-WLAN langsam, weil für jedes Gericht Handyfotos in voller Größe geladen wurden.

Fix-Prompt:

Die Fotos der Speisekarte sind zu schwer. Verkleinere hochgeladene Bilder auf maximal 800 px Breite, komprimiere sie und lade sie verzögert (Lazy Loading), während der Besucher scrollt.

Lektion: Teste mit einer langsamen Verbindung, nicht nur im Büro.

4. Ein Geräte- oder Lagerbestands-Tracker für ein Team

Wer ihn baut: Leute aus dem Betrieb, die eine gemeinsame Tabelle ersetzen.

Erster Prompt:

Baue ein Inventar-Tool für unser Lagerteam. Artikel haben Name, SKU, Menge, Standort und einen Mindestbestand. Mitarbeitende melden sich an und können Bestand hinzufügen, Bestand mit Begründung entnehmen und eine Liste der Artikel unter dem Mindestbestand in Rot sehen. Führe einen Verlauf aller Änderungen und wer sie vorgenommen hat.

Was schiefging: Der Verlauf zeigte „Nutzer 3“ statt Namen, und wer mehr entnahm, als da war, machte den Bestand negativ.

Fix-Prompt:

Zeige im Verlauf den Namen der Person, nicht ihre ID. Erlaube keine Entnahme, die die Menge unter null bringt; zeige stattdessen „Nur 4 auf Lager“.

Lektion: Beschreibe, was unmöglich sein soll, nicht nur, was möglich sein soll. Unser Guide zum Bauen einer Inventar-App deckt den Rest ab.

5. Ein Kundenportal für Freelancer oder Studios

Wer es baut: Designer, Buchhalter, Berater und Agenturen.

Erster Prompt:

Baue ein Kundenportal. Ich lade Kunden per E-Mail ein. Jeder Kunde meldet sich an und sieht nur seine eigenen Projekte, Dateien und Rechnungen und kann Kommentare hinterlassen. Ich melde mich als Admin an und sehe alles.

Was schiefging: Das ist der wichtigste Fehler auf der Liste. Die Seiten zeigten jedem Kunden nur seine eigenen Projekte, aber der Server lieferte jedes Projekt, wenn man die Zahl in der Adressleiste änderte. Als einzelner Kunde herumzuklicken, deckte das nie auf.

Fix-Prompt:

Prüfe jede Server-Route, die Projekte, Dateien, Kommentare oder Rechnungen zurückgibt. Jede muss bestätigen, dass der angemeldete Kunde den Datensatz besitzt, und sonst „nicht gefunden“ zurückgeben. Teste es dann: Melde dich als Kunde A an und versuche, das Projekt von Kunde B über seine ID zu öffnen.

Lektion: Etwas auf dem Bildschirm zu verstecken heißt nicht, es zu schützen. Mehr dazu in Ist Vibe Coding sicher?.

6. Eine Launch-Seite mit Warteliste

Wer sie baut: Gründer, die eine Idee testen, bevor sie sie bauen.

Erster Prompt:

Baue eine Landingpage für eine App, die Nachhilfelehrern hilft, Stunden zu planen und Zahlungen einzuziehen. Hero-Überschrift, Unterzeile, E-Mail-Anmeldung, drei Vorteile, ein Abschnitt „So funktioniert es“ und ein FAQ. Speichere Anmeldungen mit Datum in einer Datenbank und lass mich sie auf einer privaten Seite als CSV herunterladen.

Was schiefging: Binnen Tagen füllte sich die Liste mit Spam-Anmeldungen von Bots, und die Seite hatte keinen Titel und keine Beschreibung, sodass geteilte Links eine leere Vorschau zeigten.

Fix-Prompt:

Füge dem Anmeldeformular einen einfachen Bot-Schutz hinzu (ein verstecktes Honeypot-Feld und ein Limit von 5 Anmeldungen pro IP und Stunde). Füge einen Seitentitel, eine Meta-Beschreibung und ein Bild für Social Sharing hinzu.

Lektion: Ein öffentliches Formular wird gefunden. Siehe So baust du eine Wartelisten-Seite.

7. Eine Quiz-App für eine Lehrkraft

Wer sie baut: Lehrkräfte und Trainer, die etwas Leichteres als ein LMS wollen.

Erster Prompt:

Baue eine Quiz-App für meine Klasse. Ich erstelle Quizze mit Multiple-Choice-Fragen und je einer richtigen Antwort. Schüler treten mit einem Code und ihrem Vornamen bei, beantworten die Fragen und sehen am Ende ihre Punktzahl. Ich sehe pro Quiz eine Ergebnistabelle.

Was schiefging: Die richtigen Antworten wurden zusammen mit den Fragen an den Browser geschickt, sodass ein neugieriger Schüler sie im Seitenquelltext lesen konnte. Schüler konnten außerdem so lange erneut abgeben, bis sie 100 % hatten.

Fix-Prompt:

Sende keine richtigen Antworten an den Browser. Prüfe Antworten nach dem Absenden auf dem Server. Erlaube eine Abgabe pro Schülername und Quiz und zeige der Lehrkraft, wenn jemand es erneut versucht.

Lektion: Der Browser gehört dem Nutzer. Alles, was dort liegt, kann gelesen werden.

8. Ein kleines KI-Tool

Wer es baut: Marketer, Autoren und Gründer, die einen fokussierten KI-Helfer wollen.

Erster Prompt:

Baue ein Tool, das aus einer Produktbeschreibung fünf Social-Media-Posts in verschiedenen Tonlagen macht (freundlich, fachlich, verspielt, kurz, lang). Nutze eine KI-API. Ich füge die Beschreibung ein, wähle eine Plattform und erhalte die Posts mit Kopieren-Buttons.

Was schiefging: Die erste Version rief den KI-Dienst direkt aus dem Browser auf, mit dem API-Schlüssel mitten in der Seite, wo ihn jeder kopieren und die Rechnung in die Höhe treiben konnte.

Fix-Prompt:

Verlege den KI-Aufruf auf den Server. Speichere den API-Schlüssel als Secret, nie im Frontend-Code. Begrenze jeden Besucher auf 20 Generierungen pro Tag.

Lektion: Schlüssel gehören als Secrets auf den Server. Siehe API-Schlüssel sicher aufbewahren und KI-Funktionen in deine App einbauen.

9. Eine arabisch-englische Unternehmenswebsite

Wer sie baut: Unternehmen am Golf und in der arabischen Welt, die zwei Sprachen bedienen.

Erster Prompt:

Baue eine Website für mein Innenarchitektur-Unternehmen auf Arabisch und Englisch, mit Sprachumschalter. Seiten: Start, Leistungen, Portfolio, Über uns und Kontakt. Arabisch soll vollständig rechts-nach-links sein.

Was schiefging: Der arabische Text war rechtsbündig, aber das Layout wurde nicht gespiegelt: Pfeile zeigten noch in die falsche Richtung und das Menü saß auf der falschen Seite. Telefonnummern wurden an manchen Stellen auch rückwärts angezeigt.

Fix-Prompt:

Spiegle auf Arabisch das gesamte Layout: Setze die Seitenrichtung auf rechts-nach-links, platziere das Menü rechts, drehe Richtungs-Icons um und lass Telefonnummern und E-Mail-Adressen innerhalb des arabischen Textes links-nach-rechts.

Lektion: Rechts-nach-links ist ein Layout, keine Ausrichtung. Mythex beherrscht Arabisch und andere Rechts-nach-links-Layouts, und du kannst direkt auf Arabisch prompten.

10. Ein Tracker, der zur Handy-App wird

Wer ihn baut: Coaches, Fitnessstudios und Communities, deren Nutzer am Handy leben.

Erster Prompt:

Baue ein Trainingslog für meine Personal-Training-Kunden. Jeder Kunde meldet sich an, sieht den Plan, den ich für die Woche zugewiesen habe, hakt Übungen ab und trägt Gewichte ein. Ich sehe den Fortschritt jedes Kunden in einem Diagramm.

Was schiefging: Die Web-App funktionierte, aber auf dem Handy waren die Buttons mitten im Training zu klein zum Tippen und das Diagramm unlesbar.

Fix-Prompt:

Gestalte das für die einhändige Bedienung am Handy: große Tippflächen am unteren Bildschirmrand, eine Übung pro Bildschirm mit großen Buttons „Weiter“ und „Fertig“ und ein einfaches Wochen-Fortschrittsdiagramm.

Lektion: Wenn Leute es am Handy nutzen, gestalte zuerst fürs Handy. Mit Mythex Pro kann die veröffentlichte App dann zu einer Android-App für Google Play und einer iPhone-App für TestFlight werden; die Handy-App öffnet deine veröffentlichte App, sodass jedes Publish sie aktualisiert. Siehe die Seite Mobile-App-Builder.

Die Muster hinter diesen Beispielen

Bei allen zehn lassen sich die Fehler in wenige Gruppen einteilen:

Keines davon verlangt, dass du Code liest. Es verlangt, dass du wie ein neugieriger, leicht feindseliger Nutzer testest und genau beschreibst, was du siehst.

Probiere selbst eins aus

Wähle das Beispiel, das deiner Idee am nächsten kommt, kopiere seinen ersten Prompt und ändere die Details. Nutze dann den Fix-Prompt als Checkliste, bevor du die App teilst. Unser Spickzettel mit Vibe-Coding-Prompts hat 30 weitere, und So baust du eine App mit Vibe Coding führt ein Projekt von der Idee bis zur veröffentlichten App. Wenn du bereit bist, starte im KI-App-Builder oder stöbere in den Vorlagen für einen Vorsprung.

Fragen