Prompting — die Kernkompetenz

🔄 Kurzer Rueckblick: In der letzten Lektion hast du dein Vibe-Coding-Tool eingerichtet und eine einfache Portfolio-Seite gebaut. Jetzt lernst du die Prompting-Techniken die jeden Build schneller und zuverlaessiger machen.

Die Qualitaet deines Vibe-Coding-Outputs haengt direkt von der Qualitaet deiner Prompts ab. Ein vager Prompt ergibt vagen Code. Ein praeziser Prompt ergibt funktionierenden Code beim ersten Versuch.

Diese Lektion zeigt die Techniken die den Unterschied machen zwischen frustrierendem Vibe Coding (“es geht staendig kaputt”) und produktivem Vibe Coding (“es funktioniert einfach”).

Das Spezifitaets-Spektrum

Vergleiche diese Prompts fuer dasselbe Feature:

Vage (braucht viele Iterationen):

“Fueg Nutzer-Authentifizierung hinzu”

Spezifisch (funktioniert wahrscheinlich beim ersten Mal):

“Fueg E-Mail/Passwort-Authentifizierung mit Supabase Auth hinzu. Erstelle eine Signup-Seite unter /signup mit E-Mail- und Passwort-Feldern. Erstelle eine Login-Seite unter /login. Nach dem Login Weiterleitung zu /dashboard. Fueg einen Logout-Button im Header hinzu. Schuetze /dashboard so dass nicht-authentifizierte Nutzer zu /login weitergeleitet werden.”

Der spezifische Prompt enthaelt: Technologie-Wahl, Seitenrouten, Formularfelder, Verhalten nach Auth, Navigationselemente und Zugriffsregeln. Die KI baut genau das.

Die Prompt-Checkliste

Fuer jede Feature-Anfrage solltest du angeben:

• Was es tut (das Verhalten)
• Wo es hinkommt (Seite, Komponente, Bereich)
• Wie es aussieht (Styling, Layout)
• Welche Technologie (wenn du eine Praeferenz hast)
• Randfaelle (was passiert wenn etwas schiefgeht)

✅ Quick Check: Du willst eine Suchleiste in deiner App. Welche Details sollte dein Prompt enthalten ueber “fueg eine Suchleiste hinzu” hinaus? (Antwort: Wo sie hinkommt (Header? Eigene Seite?), was sie durchsucht (Produktnamen? Allen Content?), wie Ergebnisse angezeigt werden (Dropdown? Separate Seite?), Debounce-Verhalten (Suche waehrend der Eingabe oder bei Enter?), und leerer Zustand (was zeigen wenn keine Ergebnisse passen).)

Technik 1: Context Layering

Starte deinen Prompt indem du der KI den Kontext deines Projekts gibst bevor du deine Anfrage stellst:

Mein Projekt ist eine Aufgabenverwaltungs-App gebaut mit Next.js 14,
TypeScript, Tailwind CSS und Supabase. Die App hat ein Dashboard unter
/dashboard das eine Liste von Aufgaben in einer Tabelle zeigt. Jede
Aufgabe hat Titel, Status, Prioritaet und Faelligkeitsdatum.

Jetzt: Fuege eine Filterleiste ueber der Aufgabentabelle hinzu mit der
Nutzer nach Status (alle/todo/in-progress/done) und Prioritaet
(alle/niedrig/mittel/hoch) filtern koennen. Filter sollen die Tabelle
in Echtzeit aktualisieren ohne Seiten-Reload.

Der Kontext-Absatz verhindert dass die KI deinen Tech-Stack, deine Dateistruktur oder Namenskonventionen raten muss.

Technik 2: Schrittweises Prompting

Frag nicht nach einer ganzen App in einem Prompt. Baue Feature fuer Feature:

Schritt 1: "Erstelle eine Landing Page mit Hero-Section, Features-Grid und Footer"
→ Testen, pruefen ob es funktioniert

Schritt 2: "Fuege ein Signup-Formular hinzu das Name, E-Mail und Passwort abfragt"
→ Testen, pruefen ob es funktioniert

Schritt 3: "Verbinde das Signup-Formular mit Supabase Auth"
→ Testen, pruefen ob es funktioniert

Schritt 4: "Erstelle eine Dashboard-Seite die nur authentifizierte Nutzer sehen"
→ Testen, pruefen ob es funktioniert

Jeder Schritt produziert einen Quick Win den du pruefen kannst bevor du weitergehst. Wenn Schritt 3 etwas kaputtmacht, weisst du genau wo das Problem liegt.

Regel: Nach jedem Schritt testen. Packe nicht 5 Features in einen Prompt — wenn etwas kaputtgeht weisst du nicht welche Aenderung es verursacht hat.

Technik 3: Research-Plan-Implement

Fuer komplexe Aenderungen an bestehendem Code nutze drei separate Prompts:

Prompt 1 — Research:

“Schau dir meine Codebase an. Fasse zusammen wie das Authentifizierungssystem funktioniert, welche Dateien beteiligt sind und wie Nutzerdaten vom Login zum Dashboard fliessen.”

Prompt 2 — Plan:

“Ich will rollenbasierte Zugriffsrechte hinzufuegen (Admin vs normaler Nutzer). Erstelle basierend auf deinem Verstaendnis der Codebase einen Schritt-fuer-Schritt-Plan. Liste die Dateien die du aendern wirst und welche Aenderungen du in jeder machst.”

Prompt 3 — Implement:

“Der Plan sieht gut aus. Implementiere Schritt 1 — fuege das Rollen-Feld zur User-Tabelle hinzu und aktualisiere den Signup-Flow.”

Dieses Drei-Schritte-Pattern verhindert dass die KI Aenderungen macht die sie nicht vollstaendig versteht. Du pruefst den Plan bevor Code geschrieben wird.

✅ Quick Check: Warum solltest du den Plan der KI pruefen bevor du sie implementieren laesst? (Antwort: Die KI koennte die Architektur deiner Codebase missverstehen oder Aenderungen vorschlagen die bestehende Features kaputt machen. Indem du den Plan pruefst faengst du Probleme ab bevor Code geschrieben wird — viel einfacher als nach der Implementierung zu debuggen.)

Technik 4: Rollen-Setting

Sag der KI wer sie ist bevor du Anfragen stellst:

“Agiere als Senior Full-Stack-Entwickler spezialisiert auf Next.js und Supabase. Du priorisierst sauberen Code, Typsicherheit und Error Handling.”

Rollen-Setting fokussiert den Output der KI. Ohne bekommst du generischen Code. Mit bekommst du Code der den Patterns eines Senior Engineers folgt.

Kontext managen

Das Context Window der KI — die Information ueber die sie gleichzeitig nachdenken kann — ist begrenzt. Halte es sauber:

Mach das:

• Starte neue Gespraeche fuer neue Features
• Fuege nur relevante Dateien ein wenn du nach spezifischem Code fragst
• Nutze Rules-Dateien fuer dauerhaften Projektkontext

Lass das:

• Ein langes Gespraech endlos weiterfuehren
• Deine gesamte Codebase einfuegen wenn du eine Funktion fixst
• Ignorieren wenn Antworten schlechter werden (Context Poisoning)

Context Poisoning ist die haeufigste Vibe-Coding-Frustration. Die KI macht frueh im Gespraech einen Fehler und referenziert diesen Fehler dann in jeder nachfolgenden Antwort. Die Loesung: Starte ein frisches Gespraech mit sauberem Kontext.

Haeufige Prompt-Patterns

Key Takeaways

• Spezifische Prompts produzieren funktionierenden Code — gib Was, Wo, Wie, Technologie und Randfaelle an
• Context Layering: Beschreibe dein Projekt bevor du Anfragen stellst
• Schrittweises Prompting: Ein Feature pro Prompt, dazwischen testen
• Research-Plan-Implement: Fuer komplexe Aenderungen erst planen, dann coden
• Starte frische Gespraeche wenn der Kontext schlechter wird (Context Poisoning)
• Rollen-Setting fokussiert die KI auf das Qualitaetslevel das du willst

Up Next

In der naechsten Lektion baust du eine komplette Anwendung von Grund auf — und wendest jede Prompting-Technik an um etwas Echtes zu bauen.