Dieses kleine JavaScript-Beispiel zeigt Vibe Coding als kontrollierte Feedback-Schleife: Ziel beschreiben, eine minimale Version erzeugen, direkt im Browser testen und anschließend nur einen Aspekt verändern.
Ziel des Beispiels
Wir bauen einen winzigen Klick-Counter ohne Framework und ohne Buildsystem. Der Zustand bleibt getrennt von der Darstellung, damit spätere Erweiterungen – Timer, Highscore oder Animation – überschaubar bleiben.
Ein geeigneter Startprompt
„Erstelle eine einzelne
index.htmlmit einem Klick-Counter. Verwende semantisches HTML, eine zentrale State-Struktur und kleine Funktionen für Zustandsänderung und Rendering. Keine Bibliotheken und kein Inline-Event-Handler.“
Vollständige Datei: index.html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vibe Counter</title>
<style>
body { font: 18px system-ui; max-width: 42rem; margin: 4rem auto; }
button { padding: .8rem 1.2rem; font: inherit; cursor: pointer; }
</style>
</head>
<body>
<main>
<h1>Vibe Counter</h1>
<p>Punkte: <strong id="score">0</strong></p>
<button id="collect" type="button">Punkt sammeln</button>
</main>
<script>
const state = { score: 0 };
function collectPoint() {
state.score += 1;
render();
}
function render() {
document.querySelector('#score').textContent = state.score;
}
document.querySelector('#collect')
.addEventListener('click', collectPoint);
render();
</script>
</body>
</html>Ausführen
- Eine Datei namens
index.htmlanlegen. - Den Code einfügen und speichern.
- Die Datei im Browser öffnen.
- Button klicken und die Browser-Konsole auf Fehler prüfen.
Sinnvolle Folgeprompts
- „Ergänze einen Reset-Button. Ändere nur State, Event-Handler und Markup.“
- „Speichere den Highscore mit
localStorage. Behandle ungültige gespeicherte Werte.“ - „Füge einen 30-Sekunden-Timer hinzu und verhindere Klicks nach Ablauf.“
Prüfliste
Nach jeder Änderung sollte der bestehende Counter weiter funktionieren. Lies den Diff, teste auch den Reset oder Seitenreload und lasse die KI erklären, warum sie eine neue Funktion oder Variable eingeführt hat. So bleibt aus einem schnellen Vibe ein nachvollziehbares Programm.