Wie schreibt man einen UI-Prompt für einen KI-Coding-Agenten
Verwandle eine grobe Produktidee in einen umsetzbaren UI-Prompt mit Nutzerziel, Verhalten, Zuständen, Regeln und Bestehen-oder-Scheitern-Prüfungen.
Ein guter UI-Prompt sagt dem Agenten, wer welches Ergebnis braucht, wie sich die Oberfläche verhalten soll, welche Zustände sie abdecken muss, welche Projektregeln gelten und wie man das Ergebnis prüft. Nenne eine Komponente nur, wenn ihr Verhalten zur Aufgabe passt.
1. Beginne mit dem Ziel der Nutzer, nicht mit einem Komponentennamen
Sag, wer welche Aufgabe abschließen will und warum das wichtig ist. Nutze einen UI-Begriff erst, wenn sein Verhalten zu dieser Aufgabe passt. Ein Komponentenname ist eine mögliche Lösung, nicht das Produktziel.
- Schwach: Füge ein schönes Glassmorphism-Dashboard hinzu.
- Besser: Hilf einem Support-Teamleiter, ungelöste Tickets zu finden, ihre Dringlichkeit zu verstehen und das nächste Ticket zu öffnen, ohne die aktuellen Filter zu verlieren.
2. Beschreibe Verhalten, Zustände und Grenzen
Erkläre, was die Oberfläche öffnet, was sich nach jeder Aktion ändert, wie sie geschlossen wird und was gespeichert bleiben muss. Nimm Lade-, Leer-, Fehler-, Erfolgs-, Wiederholungs-, Abbruch- und Berechtigungs-Zustände auf, wenn sie auftreten können.
3. Wähle ein Muster nach Verhalten, dann füge Stil und Bewegung hinzu
Nutze den Atlas, wenn du dir die Oberfläche vorstellen kannst, aber ihren Namen nicht kennst. Vergleiche ähnliche Muster, bevor du dich entscheidest. Halte Verhalten, visuellen Stil und Bewegung als getrennte Entscheidungen, damit eine Wunsch-Optik nicht heimlich ändert, wie das Produkt funktioniert.
4. Füge Abnahmekriterien hinzu, die der Agent prüfen kann
Mach wichtige Regeln zu beobachtbaren Bestehen-oder-Scheitern-Prüfungen. Decke Tastaturbedienung, sichtbaren Fokus, Status-Ansagen, kleine Bildschirme, Zoom, weniger Bewegung, Laden, Fehlschlagen, Wiederholen und Speichern von Daten ab, wo es passt.
5. Gib Projektkontext, bevor du nach Code fragst
Nenne den vorhandenen Stack, das Designsystem, wiederverwendbare Komponenten, die Datenquelle, die Route und die Dateien, um die es geht. Sag dem Agenten, was sich nicht ändern darf. Er sollte trotzdem das echte Projekt und seine Tests ansehen, bevor er etwas bearbeitet.
6. Nutze einen Prompt-Aufbau, der Entscheidungen sichtbar lässt
Eine sinnvolle Reihenfolge ist: Ergebnis, Nutzer und Situation, Verhalten, Zustände, Inhalte und Daten, visuelle Richtung, Barrierefreiheit, Projektregeln, Abnahmekriterien und Arbeiten, die nicht dazugehören. Markiere Annahmen und offene Fragen, statt sie zu verstecken.
- Ergebnis: Wer soll was tun können, wenn diese Arbeit fertig ist?
- Verhalten und Zustände: Wie startet der Ablauf, wie verändert er sich, wie endet er, wie schlägt er fehl und wie erholt er sich?
- Prüfungen: Welche genauen Beweise zeigen, dass das Ergebnis funktioniert?