KI-Entwicklung
Vibe-Coding-Prompt-Beispiele für Web-Apps
Praktische Prompt-Beispiele zum Definieren, Bauen, Reviewen und Verifizieren von Web-Apps mit Vibe Coding.
Ein nützlicher Prompt für eine Web-App verlangt nicht einfach „baue eine App“. Er definiert Nutzer, Arbeit, Flow, Daten, Grenzen, Abnahmekriterien und Verifikation. Die folgenden Muster müssen an das Repo angepasst und vor dem Ausführen von Änderungen geprüft werden.
Prompt zum Definieren des Flows
Für [Nutzer], definiere einen Flow, der [Aufgabe] ermöglicht und zu [Ergebnis] führt. Enthalten: Schritte, Inputs, Leer-/Lade-/Fehler-/Erfolgszustände, Permissions, nötige Daten, Ausschlüsse und Abnahmekriterien. Markiere Entscheidungen, die noch Bestätigung brauchen.
Prompt zum Implementieren eines Screens
Implementiere den Screen [Name] für den Flow [Flow]. Respektiere diese Komponenten, Tokens und Contracts: [Constraints]. Zeige Hierarchie, Hauptaktion, Validierung, Accessibility und Zustände. Erkläre vor dem Editieren relevante Dateien und den minimalen Plan; zeige danach Diff und Tests.
Prompt zum Reviewen einer Integration
Reviewe diese Integration von [Service] hinsichtlich Authentifizierung, Autorisierung, Validierung, Error Handling, Retries, Limits, sensibler Daten und Observability. Rufe den Service nicht auf und exponiere keine Secrets. Schlage Tests und kleine Änderungen vor.
Prompt zum Debuggen
Mit diesen Reproduktionsschritten, Logs und erwartetem Ergebnis, trenne Fakten von Hypothesen, schlage minimale Tests vor und danach die kleinste Änderung mit einem Regressionstest.
Checkliste
- Definiert der Prompt Nutzer, Aufgabe und Ergebnis?
- Macht er Daten, Permissions und Zustände explizit?
- Begrenzt er Dateien und Verhaltensweisen außerhalb des Scope?
- Enthält er Tests und Abnahmekriterium?