Was ist Vibe Coding?

Du möchtest einen kleinen Workshop anbieten und brauchst eine Anmeldung, hast aber noch nie ein Formular programmiert. Beim Vibe Coding beginnst du nicht mit einer langen Syntaxlektion, sondern beschreibst Zielgruppe, Eingaben und gewünschtes Verhalten in Alltagssprache. Die KI erstellt einen ersten Codeentwurf, den du direkt ansiehst und verbesserst.

Andrej Karpathy verwendete den Begriff 2025 öffentlich für eine besonders intuitive, KI-geführte Art des Programmierens. Für belastbare Projekte braucht der Ansatz eine Ergänzung: Der schnelle Dialog bleibt, doch jede Änderung erhält Grenzen, Prüfungen und eine verantwortliche Abnahme.

Was Vibe Coding konkret bedeutet

Beim klassischen Einstieg lernst du oft erst Sprache, Framework und Werkzeuge, bevor eine sichtbare Anwendung entsteht. Beim Vibe Coding formulierst du zuerst den beabsichtigten Nutzen und lässt das System bei der Umsetzung helfen. Das senkt die Hürde, verschiebt die anspruchsvolle Arbeit aber auf Zielklarheit, Auswahl und Kontrolle.

Für unsere Workshop-Anmeldung lautet die Idee: Interessierte wählen einen Termin, geben Name und E-Mail-Adresse ein und erhalten eine klare Bestätigung. Dieser Satz beschreibt noch keine vollständige Software, aber er gibt dem Bauprozess eine fachliche Richtung.

Formuliere Nutzer und Kernproblem

Bevor du ein Coding-Werkzeug öffnest, beantworte drei Fragen: Wer nutzt die Seite, welches Problem löst sie und welches Ergebnis braucht die Person? In unserem Beispiel sind die Nutzer Workshop-Interessierte, die ohne E-Mail-Pingpong einen freien Termin reservieren möchten. Nach dem Absenden sollen sie eindeutig wissen, ob die Anmeldung angenommen wurde.

Diese Vorarbeit verhindert, dass die KI eine hübsche, aber fachlich leere Oberfläche erzeugt. Wenn du nur „Baue eine Event-Seite“ schreibst, muss das System Zielgruppe, Felder, Status und Fehlerbehandlung erraten.

Schneide eine erste, begrenzte Funktion heraus

Eine komplette Workshop-Plattform könnte Nutzerkonten, Zahlungen, Wartelisten und automatische Erinnerungen enthalten. Für die erste Runde genügt ein Formular mit Terminauswahl, Name, E-Mail-Adresse, Einwilligungsfeld und lokaler Bestätigung. Versand, Bezahlung und dauerhafte Speicherung bleiben ausdrücklich außerhalb dieses Schritts.

Dieser Schnitt macht die Aufgabe prüfbar und reduziert unerwartete Nebenwirkungen. Eine passende Formulierung folgt dem Muster aus Dein erster guter Prompt: Ziel, Kontext, gewünschte Ausgabe und klare Abnahmekriterien.

Lass einen nachvollziehbaren Entwurf bauen

Ein erster Auftrag könnte so aussehen:

Erstelle in der bestehenden Web-App ein zugängliches Formular für eine
Workshop-Anmeldung. Felder: Termin, Name, E-Mail und verpflichtende
Einwilligung. Zeige nach gültigem Absenden eine Bestätigung auf derselben
Seite. Versende noch keine E-Mail und speichere keine Daten dauerhaft.

Validiere Pflichtfelder, E-Mail-Format und Einwilligung. Ergänze Tests für
gültige Eingaben, fehlende Felder und eine ungültige E-Mail. Erkläre kurz,
welche Dateien du änderst, und halte dich an vorhandene Komponenten.

Der Prompt enthält nicht jedes spätere Detail. Er verlangt jedoch ein vollständiges kleines Verhalten und schützt mit Non-Goals vor einem unbeabsichtigten Backend oder externen Versand.

Prüfe den Standardfall im echten Ablauf

Öffne die Anwendung nach der Umsetzung und führe die Anmeldung wie ein Nutzer aus. Wähle einen Termin, trage plausible Daten ein, akzeptiere die Einwilligung und sende das Formular ab. Kontrolliere, ob die Bestätigung eindeutig ist und ob die Eingaben nicht versehentlich doppelt verarbeitet werden.

Lass zusätzlich die automatisierten Tests laufen. Ein grüner Test ersetzt nicht den Browserblick, und ein schöner Browserzustand ersetzt keinen reproduzierbaren Test; beide Nachweise beantworten unterschiedliche Fragen.

Schreibe vor dem Prüfen drei konkrete Erwartungen auf: Welche Bestätigung erscheint, welche Daten bleiben nach einem Fehler erhalten und welche Aktion darf nicht doppelt ausgeführt werden? Diese kurze Liste verhindert, dass du nur die auffälligste Bildschirmfläche bewertest. Sie macht außerdem sichtbar, ob der Entwurf zwar hübsch ist, aber am vereinbarten Nutzen vorbeigeht.

Prüfe den Ablauf anschließend einmal ohne Maus. Gehe mit Tab durch Felder und Aktion, löse die Validierung mit der Tastatur aus und kontrolliere, wohin der Fokus nach einem Fehler springt. Wiederhole denselben Weg bei schmaler Breite. So findest du Probleme, die in einer schnellen Desktop-Demo leicht verborgen bleiben.

Untersuche Fehler- und Randfälle

Jetzt lässt du Felder leer, verwendest „name@“ als E-Mail-Adresse und entfernst die Einwilligung. Jede Fehlermeldung sollte am passenden Feld stehen, verständlich formuliert und per Tastatur erreichbar sein. Nach einer Korrektur muss der Fehler verschwinden, ohne dass bereits richtige Angaben verloren gehen.

Teste auch Doppelklick, schmale Bildschirmbreite und eine unerwartet lange Namenseingabe. Wenn später ein Server hinzukommt, gehören langsame Antworten, Netzwerkausfall und doppelte Reservierungen in einen eigenen geprüften Schritt.

Verstehe die Änderung genug für den nächsten Schritt

Du musst nicht jede Zeile auswendig erklären können. Du solltest aber wissen, welche Komponente das Formular rendert, wo der Zustand liegt, wann Validierung läuft und welche Funktion das Absenden behandelt. Bitte die KI um eine kurze Erklärung anhand der tatsächlich geänderten Dateien und prüfe die Aussagen im Code.

Dieses Verständnis hilft beim nächsten Feedback. Wenn die Fehlermeldung zu früh erscheint, kannst du gezielt verlangen, dass sie erst nach dem ersten Absendeversuch oder nach Verlassen des Feldes sichtbar wird, statt die gesamte Seite neu bauen zu lassen.

Erweitere nur nach einer abgeschlossenen Runde

Nach einem stabilen Formular kannst du dauerhafte Speicherung oder E-Mail-Bestätigung planen. Jede Erweiterung beginnt wieder mit Ziel, begrenztem Umfang, Entwurf und Prüfung. Wenn mehrere variable Schritte und Werkzeuge nötig werden, kann ein kontrollierter KI-Agent helfen; er hebt die Pflicht zur Abnahme nicht auf.

Bewahre funktionierende Zwischenstände auf. Kleine Commits oder Versionen machen sichtbar, welche Runde welchen Effekt hatte, und erlauben eine Rückkehr, wenn eine Erweiterung das Formular beschädigt.

Notiere zu jedem Zwischenstand nur Ziel, geänderte Oberfläche und bestandene Nachweise. Dieses kleine Arbeitsprotokoll hält die nächste Runde eng und verhindert, dass bereits entschiedene Anforderungen unbemerkt wieder geöffnet werden.

Wo Vibe Coding an Grenzen stößt

KI-generierter Code kann überzeugend aussehen und dennoch Sicherheitslücken, unpassende Abhängigkeiten oder falsche Annahmen enthalten. Besonders bei Zahlungen, Gesundheitsdaten, personenbezogenen Informationen und öffentlichen Schreibzugriffen brauchst du fachliche Prüfung, minimale Berechtigungen und verlässliche Tests. Geheimnisse gehören weder in Prompts noch direkt in den Quellcode.

Auch die laufende Verantwortung bleibt bestehen. Eine veröffentlichte Anmeldung braucht erreichbare Verantwortliche, Datenschutzinformationen, Fehlerüberwachung und einen Plan für Ausfälle oder Rücknahmen. Tempo beim Erstellen ersetzt keinen Betrieb.

Wann ein fester Workflow besser ist

Nicht jeder Schritt sollte dynamisch von einer KI entschieden werden. Für die eigentliche Speicherung einer Anmeldung, eine Zahlungsbuchung oder das Versenden einer verpflichtenden Bestätigung ist ein fester, deterministischer Ablauf oft leichter prüfbar. Vibe Coding kann diesen Ablauf mit dir erstellen, aber das fertige Produkt sollte kritische Regeln zuverlässig ausführen.

Nutze die KI besonders für Entwürfe, Erklärungen, begrenzte Änderungen und Fehlersuche. Nutze klare Programmlogik und menschliche Freigaben dort, wo derselbe Input immer zu einem vorhersehbaren Ergebnis führen muss.

Checkliste für deine nächste Vibe-Coding-Runde

• Nutzer, Problem und gewünschtes Ergebnis sind in einfachen Sätzen benannt.
• Der erste Auftrag umfasst genau eine abgeschlossene Funktion.
• Nicht enthaltene Funktionen und unveränderte Bereiche sind ausdrücklich festgelegt.
• Standardfall, Fehlerfälle und mindestens ein Randfall sind prüfbar beschrieben.
• Automatisierte Tests und ein echter Browserdurchlauf sind vorgesehen.
• Ich kann erklären, welche Dateien und Zustände die Änderung tragen.
• Sensible Daten, Berechtigungen und externe Aktionen sind bewusst begrenzt.
• Vor der Veröffentlichung existieren eine verantwortliche Freigabe und ein Rückweg.