30 Vibe-Coding-Prompts zum Kopieren (Spickzettel)

Die besten Vibe-Coding-Prompts sind kurz, konkret und beschreiben Verhalten: wer die App nutzt, was man darin tun kann, was sie speichert und wie sie aussieht. Unten findest du 30 Prompts zum Kopieren und Einfügen, nach deiner Phase gruppiert, vom ersten Build bis zur Veröffentlichung. Ersetze die Teile in [eckigen Klammern] durch deine eigenen Angaben.

Sie funktionieren in jedem KI-App-Builder oder Coding-Agent. Wenn du die Überlegungen dahinter willst, erklärt unser längerer Guide So schreibst du Prompts für KI-App-Builder die Grundsätze. Diese Seite ist der Spickzettel.

So nutzt du diesen Spickzettel

• Beginne mit einem Prompt für den ersten Build, dann nutze die anderen einzeln.
• Teste nach jedem Prompt. Klicke die Änderung durch, bevor du den nächsten sendest.
• Behalte, was funktioniert. Die meisten Folge-Prompts hier enden nicht umsonst mit „Lass alles andere unverändert“.
• Füge exakten Text ein. Fehlermeldungen, Button-Beschriftungen und die Worte auf dem Bildschirm schlagen jede Beschreibung.

Prompts für den ersten Build

Diese bestimmen die Form der App. Jeder nennt Nutzer, Aktionen, Daten und Optik.

1. Ein einfacher Tracker

Baue mir einen [Habit]-Tracker. Ich kann einen [Habit] mit Namen und Farbe hinzufügen, ihn einmal pro Tag abhaken und ein 30-Tage-Raster und meine aktuelle Serie sehen. Speichere alles, damit es nach einem Neuladen noch da ist. Sauberes, minimalistisches Design, das auf dem Handy funktioniert.

2. Eine Buchungsseite für ein kleines Unternehmen

Baue eine Buchungsseite für meinen [Friseursalon]. Kunden wählen eine Leistung ([Schnitt 30 Min., Farbe 90 Min.]), ein Datum und einen freien Termin zwischen [9:00 und 18:00] und geben dann Name, Telefon und E-Mail ein. Zwei Personen können nicht denselben Termin buchen. Ich brauche eine private Admin-Seite hinter einem Login, die anstehende Buchungen nach Tag auflistet.

3. Ein internes Tool

Baue ein internes Tool, mit dem mein Team [Geräteausleihen] verfolgt. Jeder Artikel hat einen Namen, einen Code und einen Status (verfügbar, verliehen, defekt). Mitarbeitende melden sich an, können einen Artikel für sich ausleihen und wieder zurückgeben. Zeige eine Tabelle mit Filtern nach Status und einen Verlauf, wer jeden Artikel hatte.

4. Eine Landingpage mit Warteliste

Baue eine einseitige Website für [mein Produkt: eine Essensplanungs-App für vielbeschäftigte Eltern]. Hero mit Überschrift, einem Satz als Unterzeile und E-Mail-Anmeldung. Danach drei Vorteile, ein kurzer Abschnitt „So funktioniert es“ und ein FAQ. Speichere Anmelde-E-Mails in einer Datenbank und zeige mir die Liste auf einer privaten Admin-Seite.

5. Ein Kundenportal

Baue ein Kundenportal für mein [Designstudio]. Jeder Kunde meldet sich an und sieht nur seine eigenen Projekte, mit Status, von mir hochgeladenen Dateien und einem Kommentar-Thread. Ich melde mich als Admin an und sehe alle Kunden. Kunden dürfen nie die Daten anderer sehen.

6. Ein Rechner oder Angebotstool

Baue einen Angebotsrechner für mein [Reinigungsunternehmen]. Eingaben: Anzahl der Schlafzimmer, Bäder, Zusatzleistungen (Ofen, Fenster, Kühlschrank) und Häufigkeit (einmalig, wöchentlich, monatlich). Zeige den Preis mit einer Aufschlüsselung, während sich die Optionen ändern. Preise: [füge deine Preisliste ein]. Füge einen Button hinzu, der die Angebotsanfrage per E-Mail an mich schickt.

Planungs-Prompts

Nutze sie vor einer großen Funktion oder wann immer du nicht weißt, wie du etwas beschreiben sollst.

7. Plane, bevor du baust

Bevor du Code schreibst, beschreibe in normalen Worten die Bildschirme, die du baust, die Daten, die du speicherst, und alle Entscheidungen, die du von mir brauchst. Warte auf mein OK.

8. Aus einer wirren Idee eine erste Version machen

Das ist meine Idee: [Notizen einfügen]. Schlage die kleinste erste Version vor, die trotzdem nützlich ist, in 5–8 Stichpunkten. Liste auf, was du auf später verschieben würdest und warum.

9. Frage, was fehlt

Welche Fragen würde ein Entwickler mir stellen, bevor er das baut? Stelle sie nacheinander und fasse dann meine Antworten als kurze Spezifikation zusammen.

10. Eine große Änderung zuerst prüfen

Ich möchte [Team-Konten hinzufügen, in denen mehrere Personen einen Workspace teilen]. Erkläre, was sich in den Daten, den Bildschirmen und den Berechtigungen ändern muss und was kaputtgehen könnte. Ändere noch nichts.

Design-Prompts

11. Einen klaren Stil festlegen

Gestalte die App neu: warmer Off-White-Hintergrund, dunkler Text, eine Akzentfarbe [#1F6F50], abgerundete Ecken, großzügige Abstände und eine moderne serifenlose Schrift. Behalte Layout und jede Funktion genau so, wie sie sind.

12. Das Gefühl einer Referenz übernehmen

Lass das Dashboard wie eine ruhige Finanz-App wirken: viel Weißraum, große und fette Zahlen, kleine graue Beschriftungen, ein einfaches Diagramm oben. Kopiere kein Logo und keinen Text einer Marke.

13. Das Handy-Layout reparieren

Auf einem 375 px breiten Handy scrollt die Tabelle auf [der Bestellungen-Seite] seitwärts, und die Buttons überlappen sich. Verwandle jede Zeile auf kleinen Bildschirmen in eine gestapelte Karte. Ändere das Desktop-Layout nicht.

14. Leere, Lade- und Fehlerzustände

Füge [der Projektliste] richtige Zustände hinzu: einen freundlichen Leerzustand mit Button zum Anlegen des ersten Projekts, ein Lade-Skeleton, während Daten laden, und eine klare Meldung mit Wiederholen-Button, wenn das Laden fehlschlägt.

15. Rechts-nach-links-Unterstützung

Füge eine arabische Version der Oberfläche mit vollständigem Rechts-nach-links-Layout hinzu. Icons mit Richtung sollen gespiegelt werden; Zahlen und Daten sollen das Format der Region nutzen. Englisch bleibt Standard.

Prompts für Daten und Funktionen

16. Daten dauerhaft speichern

Im Moment verschwinden meine Daten beim Neuladen. Speichere sie stattdessen in einer echten Datenbank und lass die bisherigen Bildschirme genauso weiterfunktionieren.

17. Login hinzufügen

Füge Registrierung und Login mit E-Mail und Passwort hinzu. Jeder Nutzer soll nur seine eigenen [Einträge] sehen und bearbeiten. Zeige die E-Mail des Nutzers in der oberen Leiste mit einem Abmelden-Button.

18. Rollen hinzufügen

Füge zwei Rollen hinzu: Admin und Mitglied. Admins können [Produkte] hinzufügen, bearbeiten und löschen; Mitglieder können sie nur ansehen. Setze das auf dem Server durch, nicht nur durch das Verstecken von Buttons.

19. Suche und Filter hinzufügen

Füge über [der Kontaktliste] ein Suchfeld hinzu, das beim Tippen Name, Firma oder E-Mail findet, plus einen Filter für [Status]. Behalte die aktuelle Sortierung.

20. Datei-Uploads hinzufügen

Lass Nutzer an jedes [Inserat] bis zu [5] Bilder mit je maximal [5 MB] anhängen. Zeige Vorschaubilder im Inserat und eine größere Ansicht beim Klick. Nur der Besitzer kann seine Bilder löschen.

21. Aus einer Tabelle importieren

Füge einen Importieren-Button hinzu, der eine CSV mit den Spalten [Name, E-Mail, Telefon, Notizen] einliest, eine Vorschau der ersten 10 Zeilen zeigt und mich vor dem Speichern bestätigen lässt. Überspringe Zeilen ohne E-Mail und sag mir, wie viele übersprungen wurden.

Prompts zum Beheben

22. Einen Fehler klar melden

Wenn ich [im Bearbeiten-Formular auf Speichern klicke], sehe ich „[exakter Fehlertext]“ und die Änderung wird nicht gespeichert. Erwartet: Die Änderung wird gespeichert und ich kehre zur Liste zurück. Finde die Ursache, erkläre sie in ein bis zwei Sätzen und behebe sie dann.

23. Eine Fehlerschleife stoppen

Wir haben versucht, das dreimal zu beheben, und es schlägt immer noch fehl. Hör auf, Code zu ändern. Liste die drei wahrscheinlichsten Ursachen auf, wie man jede prüft und welche du für die richtige hältst.

24. Nebenwirkungen rückgängig machen

Deine letzte Änderung hat den Datumsauswähler repariert, aber die [Seitenleiste] ist verschwunden. Bring die Seitenleiste genau so zurück, wie sie war, und behalte die Reparatur des Datumsauswählers.

25. Erst erklären, dann ändern

Erkläre Schritt für Schritt, wie [die Checkout-Summe] gerade berechnet wird, und nenne die beteiligten Dateien. Ändere nichts.

Prompts für Tests und Review

26. Randfälle

Liste 10 Wege auf, wie ein echter Nutzer [das Buchungsformular] kaputt machen könnte: leere Felder, sehr langer Text, Doppelklicks, zwei Personen gleichzeitig, falsche Zeitzonen. Teste jeden und behebe, was fehlschlägt. Berichte, was du geändert hast.

27. Letzte Änderungen zusammenfassen

Fasse jede Änderung der letzten [fünf] Schritte in normalen Worten zusammen und markiere alles, was bestehende Daten betreffen könnte.

Sicherheits-Prompts

Kombiniere sie mit unserer Seite dazu, ob Vibe Coding sicher ist.

28. Datenzugriff prüfen

Prüfe den Servercode: Kann ein angemeldeter Nutzer die [Datensätze] eines anderen Nutzers lesen oder ändern, indem er eine ID in einer Anfrage ändert? Zeige mir, wo der Zugriff geprüft wird, und schließe alle Lücken.

29. Auf offengelegte Secrets prüfen

Liste jeden API-Schlüssel, jedes Passwort und jedes Token auf, das diese App nutzt, und wo es jeweils gespeichert ist. Stelle sicher, dass keines davon in Code liegt, der im Browser läuft, oder in Dateien eingecheckt ist. Verschiebe sie in Secrets, falls doch.

Prompts zum Veröffentlichen

30. Durchgang vor dem Launch

Ich veröffentliche das gleich für echte Nutzer. Geh es als Reviewer durch: kaputte Links, fehlende Seitentitel und Beschreibungen, Formulare ohne Validierung, langsame Seiten, Konsolenfehler und alles, was auf dem Handy unfertig aussieht. Gib mir eine nach Wichtigkeit geordnete Liste und behebe dann die obersten fünf.

Prompts, die du vermeiden solltest

Manche Prompts liefern zuverlässig schlechtere Ergebnisse:

• „Mach es besser.“ Inwiefern besser? Nenne den Bildschirm und die Änderung.
• „Behebe alles.“ Die KI ändert viel, und du weißt nicht, was sich bewegt hat.
• „Nutze [Bibliothek] und [Framework] und [Muster].“ Beschreibe lieber das Verhalten und lass das Tool den Stack wählen, es sei denn, du hast einen Grund.
• „Hier ist mein API-Schlüssel: …“ Füge nie Secrets in einen Chat ein. Nutze die Secret-Einstellungen des Tools.
• Zehn Funktionen in einer Nachricht. Teile sie auf.

Aus Prompts eine Gewohnheit machen

Nach ein paar Projekten hast du deine eigenen Versionen davon. Bewahre sie in einer Notiz auf und nutze die, die funktionieren, wieder. Mythex merkt sich außerdem, wer du bist und wie du arbeitest, projektübergreifend, sodass Vorlieben, die du wiederholst, etwa dein üblicher Stil oder Stack, ohne erneutes Tippen übernommen werden.

Wenn du beim ersten Prompt feststeckst, macht der kostenlose App-Prompt-Generator aus einer einzeiligen Idee einen ausführlicheren Start-Prompt. Und um zu sehen, was diese Prompts in der Praxis ergeben, lies unsere Vibe-Coding-Beispiele oder füge Prompt 1 in den KI-App-Builder ein und ändere die Klammern auf deine eigene Idee.

Fragen