Prompt-Muster für bessere Apps mit Coderblock

Ein guter Prompt für Coderblock muss nicht wie eine technische Spezifikation klingen. Du musst weder über Frameworks noch über Datenbanken, APIs oder Architektur sprechen. Beschreibe einfach, was du entwickeln möchtest, und überlasse es den KI-Agenten, deine Idee in eine echte Fullstack-App mit React, TypeScript, Tailwind CSS, Authentifizierung und bei Bedarf einer Postgres-Datenbank zu verwandeln.

Das bedeutet jedoch nicht, dass alle Prompts gleich gut funktionieren.

Je klarer der Kontext ist, den du bereitstellst, desto leichter kann der Agent sinnvolle Entscheidungen für dich treffen. Ein guter Prompt beschreibt nicht jedes Detail der Implementierung. Er macht deutlich, was du entwickelst, für wen es gedacht ist, wie es funktionieren soll und welche Regeln eingehalten werden müssen.

Den Rest kannst du Coderblock überlassen. Die folgenden Muster helfen dir dabei, bessere Ergebnisse zu erzielen und effizienter zu iterieren.

Beginne mit dem Produkt, den Nutzern und dem Ziel

Ein Prompt wie „Erstelle ein Dashboard“ oder „Entwickle eine Buchungs-App“ kann für den Anfang genügen, lässt aber viele Fragen offen. Wer wird die App verwenden? Was sollen diese Personen damit tun können? Welches Ergebnis ist dir am wichtigsten?

Eine einfache Möglichkeit, dem Agenten den richtigen Kontext zu geben, besteht darin, mit drei Punkten zu beginnen:

• Produkt: Welche Art von App entwickelst du?
• Nutzer: Wer wird sie verwenden?
• Ziel: Was sollen die Nutzer damit erreichen können?

Zum Beispiel:

Erstelle eine Buchungsplattform für selbstständige Personal Trainer. Trainer sollen verfügbare Trainingseinheiten veröffentlichen können. Kunden sollen Termine ansehen, ein Konto erstellen und ein Zeitfenster buchen können. Füge ein Dashboard hinzu, in dem Trainer anstehende Buchungen verwalten können.

Mit diesen Informationen hat der Agent bereits ein konkretes Modell des Produkts. Er kann die wichtigsten Ansichten, Rollen, Datenbankentitäten und die Navigation ableiten, ohne dass du Routen oder ein Schema vorgeben musst.

Wenn du mit einer Vorlage von Coderblock beginnst, kannst du auf dieselbe Weise erklären, was du ändern oder ergänzen möchtest. Die Vorlage bildet den Ausgangspunkt, auf dessen Struktur deine Idee aufgebaut wird.

Beschreibe Abläufe statt einzelner Funktionen

Eine Funktionsliste beschreibt, was vorhanden sein soll. Ein Ablauf erklärt, wie alles zusammenspielt. Statt „Authentifizierung, Profile, Buchungen und E-Mails hinzufügen“ zu schreiben, solltest du beschreiben, was passiert, wenn jemand das Produkt verwendet.

Versuche es so:

Neue Besucher sollen die Profile der Trainer ansehen können, ohne sich anzumelden. Wenn sie eine Trainingseinheit auswählen, sollen sie aufgefordert werden, sich zu registrieren oder anzumelden und die Buchung zu bestätigen. Anschließend soll die Buchung im Bereich Meine Buchungen erscheinen. Trainer dürfen nur Buchungen für ihre eigenen Trainingseinheiten sehen.

Damit kennt der Agent den gesamten Nutzerpfad: welche Inhalte öffentlich sind, wann eine Anmeldung erforderlich ist, was nach einer Buchung passiert und welche Daten die einzelnen Rollen sehen dürfen.

Auf dieser Grundlage kann er Supabase Auth, geschützte Routen, Sitzungen, Tabellen und Row Level Security passend zum beschriebenen Verhalten konfigurieren. Du musst daher weder eine eigene JWT-Logik noch Passwort-Hashing oder eine separate Passworttabelle verlangen. Sinnvoller ist es, festzulegen, wer worauf zugreifen darf, und Coderblock die passende Implementierung auswählen zu lassen.

Trenne unverzichtbare Anforderungen von Präferenzen

Nicht jede Entscheidung ist gleich wichtig. Ein guter Prompt unterscheidet klar zwischen Funktionen, die die App unbedingt erfüllen muss, und Punkten, die der Agent selbst interpretieren darf.

Zum Beispiel:

Unverzichtbare Anforderungen: Kunden-Login, Trainerprofile, Verfügbarkeiten, Buchungen sowie getrennte Ansichten für Kunden und Trainer. Visuelle Präferenzen: ruhiges Design im Editorial-Stil, warme neutrale Farben, großzügige Abstände und möglichst wenige Animationen. Das genaue Kartenlayout kann der UX-Agent festlegen.

So bleiben die zentralen Funktionen verbindlich, während die Agenten des Agent Team genügend Freiraum für Design- und UX-Entscheidungen erhalten.

Auch konkrete Vorgaben können sehr hilfreich sein. Zum Beispiel:

• Mobile-first- oder Desktop-first-Ansatz
• Öffentliche oder nur nach der Anmeldung zugängliche Seiten
• Erforderliche Benutzerrollen
• Währung und Abrechnungsintervall
• Daten, die für jeden Nutzer privat bleiben müssen
• Aktionen, die ausschließlich Administratoren ausführen dürfen

Die Regel ist einfach: Beschreibe das gewünschte Verhalten, aber nicht unbedingt, wie es implementiert werden soll.

Beschreibe Daten anhand ihrer Beziehungen

Beim Entwickeln einer App musst du nicht zwangsläufig in Tabellen und Migrationen denken.

Es ist wesentlich natürlicher, die Beziehungen zu beschreiben, die in der realen Welt bestehen.

Coderblock stellt Standard-Web-Apps ein eigenes Supabase-Projekt mit Postgres und Row Level Security zur Verfügung. Du kannst daher erklären, wie die Daten strukturiert sein sollen, ohne das Datenbankschema manuell zu schreiben.

Zum Beispiel:

Jeder Trainer kann mehrere Arten von Trainingseinheiten erstellen. Eine Art von Trainingseinheit enthält eine Dauer, einen Preis und eine Beschreibung. Verfügbare Zeitfenster gehören jeweils zu einem Trainer und dürfen höchstens eine bestätigte Buchung haben. Kunden dürfen nur ihre eigenen Buchungen sehen. Trainer dürfen ausschließlich Buchungen für ihre eigenen Zeitfenster sehen.

Im Vergleich zu einer einfachen Anweisung wie „Füge eine Buchungstabelle hinzu“ liefert diese Beschreibung dem Agenten wesentlich mehr Informationen: welche Entitäten vorhanden sind, wie sie zusammenhängen, welche Einschränkungen gelten und wer auf die Daten zugreifen darf.

Wenn sich das Produkt weiterentwickelt, solltest du Änderungen weiterhin aus Sicht des gewünschten Verhaltens beschreiben:

Ergänze Buchungen um einen Stornierungsgrund sowie Datum und Uhrzeit der Stornierung. Kunden dürfen bis 24 Stunden vor einer Trainingseinheit stornieren. Eine Buchung als abgeschlossen markieren dürfen jedoch nur Trainer.

Der Agent kann daraufhin die bestehende Struktur aktualisieren, ohne die App von Grund auf neu erstellen zu müssen.

Ändere immer nur eine Sache – und mache das Ergebnis überprüfbar

Eine der nützlichsten Funktionen der Live-Vorschau von Coderblock ist, dass du die Auswirkungen jeder Änderung sofort sehen kannst. Nach der ersten Generierung solltest du deshalb gezielte Folgeanfragen stellen, statt jedes Mal das gesamte Briefing neu zu schreiben.

Zum Beispiel:

Fixiere die Navigationsleiste auf dem Desktop, aber halte den Header auf Mobilgeräten kompakt.

Zeige im Trainer-Dashboard die heutigen Trainingseinheiten vor dem Wochenkalender an.

Füge im Bereich Meine Buchungen einen leeren Zustand mit einer Schaltfläche hinzu, über die Nutzer zur Trainersuche zurückkehren können.

Jede Anfrage erzeugt ein konkretes Ergebnis, das du direkt in der Vorschau überprüfen kannst. So erkennst du leichter, was funktioniert hat, was korrigiert werden muss und welcher Schritt als Nächstes sinnvoll ist.

Bei umfangreicheren Änderungen kannst du den Agenten außerdem bitten, schrittweise vorzugehen:

Füge zuerst Trainerrollen und geschützte Routen für Trainer hinzu. Erstelle anschließend den Editor für Verfügbarkeiten. Verbinde zum Schluss die verfügbaren Zeitfenster mit dem Buchungsablauf für Kunden.

Auf diese Weise wird selbst eine komplexe Funktion zu einer Folge einfach überprüfbarer Schritte.

Denke auch an Zustände und Grenzfälle

Eine App besteht nicht nur aus ihrem Idealfall. Was sehen Nutzer, die noch keine Buchungen haben? Was passiert, wenn eine Zahlung fehlschlägt? Was geschieht, wenn ein Zeitfenster nicht mehr verfügbar ist? Und was sehen Nutzer, die auf einen geschützten Bereich zugreifen möchten?

Du kannst diese Szenarien direkt in deinen Prompts beschreiben:

• „Zeige einen hilfreichen leeren Zustand an, wenn der Nutzer keine Buchungen hat.“
• „Deaktiviere nicht verfügbare Zeitfenster und erkläre, warum sie nicht ausgewählt werden können.“
• „Zeige beim Absenden der Buchung einen Ladeindikator an.“
• „Wenn ein Nutzer ohne Administratorrechte die Administrationsroute öffnet, leite ihn sicher weiter.“
• „Formuliere konkrete Validierungsmeldungen und platziere sie neben den entsprechenden Feldern.“

Diese Details mögen klein wirken, machen aber den Unterschied zwischen einem funktionierenden Prototyp und einem Produkt aus, das sich tatsächlich einsatzbereit anfühlt. Du kannst außerdem die auf UX oder Sicherheit spezialisierten Agenten bitten, einen bestehenden Ablauf zu analysieren und Verbesserungen vorzuschlagen oder direkt umzusetzen.

Beschreibe beim Hinzufügen von Zahlungen die Geschäftsregeln

Für die Integration von Zahlungen musst du nicht erklären, wie Stripe funktioniert. Du musst erläutern, was du verkaufst und was nach der Zahlung geschehen soll. Gib mindestens Folgendes an:

• Produkt oder Dienstleistung
• Preis
• Währung
• Abrechnungsmodell
• Nach dem Kauf verfügbare Funktionen

Zum Beispiel:

Ermögliche Kunden ein Abonnement für 9,99 € pro Monat. Abonnenten können Premium-Trainingseinheiten buchen, ihr Abonnement über ihr Konto verwalten und ihren aktuellen Abrechnungsstatus einsehen. Starte im Stripe-Testmodus.

Im standardmäßig verwalteten Modus kann der Agent ein verwaltetes Stripe-Konto erstellen, nachdem er einige grundlegende Angaben wie das Land und den Namen des Unternehmens abgefragt hat. Anschließend kann er Produkte, Preise, Checkout und Webhooks konfigurieren. Die Einrichtung für den Zahlungsempfang lässt sich später über den von Stripe bereitgestellten Onboarding-Link abschließen.

Wenn du lieber dein eigenes Stripe-Konto verwenden möchtest, kannst du den BYOK-Modus anfordern. Der Agent fragt STRIPE_SECRET_KEY über eine sichere Eingabeaufforderung für Umgebungsvariablen ab und konfiguriert den Webhook automatisch.

Geheimnisse verbleiben auf dem Server und werden weder in den Chat noch in den generierten Code eingefügt.

Schließe mit einem Überprüfungs-Prompt ab

Vor der Veröffentlichung kannst du die Agenten um eine abschließende Prüfung der gesamten Nutzererfahrung bitten. Zum Beispiel:

Prüfe die App aus der Perspektive eines Kunden, der sie zum ersten Mal verwendet, eines Trainers und eines Administrators. Kontrolliere Navigation, mobile Benutzerfreundlichkeit, Berechtigungen, leere Zustände und den gesamten Buchungsablauf. Behebe offensichtliche Probleme, ohne die visuelle Ausrichtung zu verändern.

Diese Art von Prompt funktioniert, weil sie festlegt, wer simuliert werden soll, was überprüft werden muss und welche Grenzen einzuhalten sind. Nachdem du die Vorschau geprüft hast, kannst du die App über Veröffentlichen unter ihrer jeweiligen coderblock.app-Adresse bereitstellen oder unter Einstellungen → Domains eine eigene Domain verbinden.

Der beste Prompt lässt der KI genügend Freiraum

Du musst keine extrem langen Prompts schreiben, um mit Coderblock gute Ergebnisse zu erzielen. Entscheidend ist, dem Agenten die wirklich wichtigen Informationen zu geben: wer das Produkt verwendet, was diese Personen damit tun können sollen, wie die Abläufe funktionieren, welche Daten miteinander verknüpft werden müssen, welche Regeln nicht verletzt werden dürfen und was in verschiedenen Szenarien geschehen soll.

Alles Weitere kann im Verlauf der Iterationen entstehen. Beginne mit einem klaren Briefing. Sieh dir an, was generiert wurde. Teste die App. Fahre anschließend mit kleinen, konkreten und überprüfbaren Anfragen fort.

Genau darin liegt der eigentliche Vorteil der Arbeit mit einem KI-Coding-Agenten: Du musst nicht im Voraus wissen, wie du das Produkt entwickelst. Du musst wissen, was du entwickeln möchtest.