Effektive Prompts für Code

Die Qualität Ihres AI-generierten Codes hängt direkt von der Qualität Ihrer Prompts ab. Prompt Engineering für Code folgt eigenen Regeln — technische Präzision, Kontextbereitstellung und iterative Verfeinerung.

Code Generation

Das perfekte Code-Generation-Prompt

Ein guter Prompt enthält fünf Elemente:

1. Was: Die Funktion oder Komponente, die erstellt werden soll
2. Wie: Technologie-Stack, Patterns und Konventionen
3. Kontext: Relevante bestehende Interfaces, Types und Dependencies
4. Constraints: Was NICHT getan werden soll, Performance-Anforderungen
5. Beispiel: Ein Input/Output-Beispiel oder ein ähnliches Pattern im Codebase

Schlecht:

"Erstelle eine Login-Funktion"

Gut:

"Erstelle eine handleLogin Server Action in src/app/actions/auth.ts. Nutze Supabase Auth mit signInWithPassword. Validiere E-Mail und Passwort mit Zod. Bei Erfolg redirect zu /dashboard, bei Fehler gib eine typisierte Fehlermeldung zurück. Orientiere dich am Pattern in @file:src/app/actions/signup.ts"

Inkrementelle Code Generation

Statt ein ganzes Feature in einem Prompt zu erzeugen — bauen Sie es schrittweise auf:

1. Types/Interfaces zuerst: "Definiere die TypeScript-Types für..."
2. Datenbank-Schema: "Erstelle die Supabase-Migration für..."
3. Server-Logik: "Implementiere die Server Action mit den definierten Types..."
4. UI-Komponente: "Erstelle die Formular-Komponente, die die Server Action aufruft..."
5. Tests: "Schreibe Vitest-Tests für die Server Action..."

Refactoring mit AI

Refactoring-Prompts

Pattern-basiertes Refactoring:

"Refactore @file:src/components/UserList.tsx — ersetze den useEffect + useState für Datenladung durch useSWR. Behalte die bestehende Fehlerbehandlung bei."

Performance-Refactoring:

"Optimiere die Render-Performance von @file:src/components/Dashboard.tsx — identifiziere unnötige Re-Renders und setze React.memo, useMemo und useCallback sinnvoll ein."

Architektur-Refactoring:

"Extrahiere die Geschäftslogik aus @file:src/components/OrderForm.tsx in einen Custom Hook useOrderForm. Die Komponente soll nur noch UI rendern."

Debugging mit AI

Effektive Debug-Prompts

Fehlermeldung + Kontext:

"Ich bekomme diesen Fehler: [Fehlermeldung einfügen]. Der Fehler tritt auf in @file:src/lib/api.ts Zeile 42. Die relevante Funktion nutzt @file:src/types/api.ts. Was ist die Ursache?"

Reproduzierbare Beschreibung:

"Wenn ich auf 'Speichern' klicke, wird das Formular in @file:src/components/EditProfile.tsx abgeschickt, aber die Daten in Supabase werden nicht aktualisiert. Der Network Tab zeigt einen 200-Status. Kein Fehler in der Console."

AI-Debug-Workflow

1. Fehlermeldung + Stack Trace teilen
2. Relevante Dateien mit @file referenzieren
3. AI nach Diagnose fragen (nicht sofort nach Fix)
4. Diagnose validieren
5. Fix implementieren lassen
6. AI nach Edge Cases fragen, die den gleichen Bug verursachen könnten

Test Writing

Test-Generation-Prompts

Unit Tests:

"Schreibe Vitest-Unit-Tests für @file:src/lib/utils/pricing.ts. Teste alle Funktionen mit validen Inputs, Edge Cases (0, negative Zahlen, undefined) und Fehlerfällen. Nutze describe/it-Blocks mit deutschen Beschreibungen."

Integration Tests:

"Schreibe einen Integration Test für den Signup-Flow: Formular ausfüllen → Server Action → Supabase User erstellen → Redirect. Mocke Supabase mit vi.mock."

Documentation Generation

Docs aus Code generieren

"Erstelle JSDoc-Kommentare für alle exportierten Funktionen in @file:src/lib/billing/stripe.ts. Beschreibe Parameter, Rückgabewerte und mögliche Fehler. Füge @example-Blöcke hinzu."

Commit Messages

"Analysiere den aktuellen git diff und schreibe eine Conventional Commit Message. Format: type(scope): Beschreibung. Body mit den wichtigsten Änderungen."

Goldene Regel: Je mehr Kontext Sie dem AI geben, desto besser wird der Output. Referenzieren Sie immer bestehende Dateien, Types und Patterns — das AI soll Code schreiben, der in Ihren Codebase passt, nicht generischen Code.