09-01-2026, 04:58 PM
Vibe Coding ist ein moderner Workflow: Statt jede Zeile Code selbst zu schreiben, beschreibst du dem KI-Assistenten (ChatGPT, Claude, Cursor, Copilot) in natürlicher Sprache, was du willst. Die KI schreibt den Code, du testest, gibst Feedback – und vibest dich in kleinen Schleifen zum fertigen Ergebnis.
Hier ein einfaches Tutorial mit JavaScript, das du direkt nachbauen kannst.
Schritt 1: Projekt aufsetzen
Lege eine index.html an und rufe sie im Browser auf:
Schritt 2: Prompt an die KI
Beschreibe, was du willst – einfach und konkret:
Schritt 3: Das Ergebnis
Die KI liefert z. B.:
Schritt 4: Vibing – der eigentliche Workflow
1. Kopiere den Code in app.js und lade die Seite neu.
2. Funktioniert's nicht? Sag der KI: "Der Zähler springt nicht, was ist falsch?" und füge die Fehlermeldung bei.
3. Verfeinern: "Mach die Animation schöner" / "Füge einen Reset-Button hinzu" / "Nutze localStorage, damit der Zähler beim Neuladen erhalten bleibt."
4. Jede Feedback-Runde = ein neuer Prompt. So wächst das Projekt organisch.
Schritt 5: Best Practices
- Kleine Schritte: lieber 5 kleine Prompts als 1 großer
- Fehlermeldungen immer mitgeben
- Code immer im Browser / in der Console prüfen
- Versionieren: git add -A && git commit -m "vibe: counter added"
- Nach 2–3 Runden ohne Fortschritt: Prompt neu formulieren oder Projekt neu strukturieren
Das war's – jetzt bist du im Vibe. Probier's aus und teilt eure Erfahrungen: Welche Tools und Prompts bringt ihr mit?
Hier ein einfaches Tutorial mit JavaScript, das du direkt nachbauen kannst.
Schritt 1: Projekt aufsetzen
Lege eine index.html an und rufe sie im Browser auf:
Code:
<!DOCTYPE html>
<html>
<head><title>Vibe Coding Demo</title></head>
<body>
<h1>Vibe Coding Demo</h1>
<button id="btn">Klicke mich</button>
<p id="out"></p>
<script src="app.js"></script>
</body>
</html>Schritt 2: Prompt an die KI
Beschreibe, was du willst – einfach und konkret:
Code:
Erstelle app.js mit einem Zähler auf der Seite:
- Der Button #btn erhöht den Zähler um 1
- Der aktuelle Stand steht in <p id="out">
- Jeder Klick blendet kurz eine Fade-Animation ausSchritt 3: Das Ergebnis
Die KI liefert z. B.:
Code:
const btn = document.querySelector('#btn');
const out = document.querySelector('#out');
let count = 0;
btn.addEventListener('click', () => {
count++;
out.textContent = 'Zähler: ' + count;
out.style.transition = 'opacity 0.2s';
out.style.opacity = 1;
});Schritt 4: Vibing – der eigentliche Workflow
1. Kopiere den Code in app.js und lade die Seite neu.
2. Funktioniert's nicht? Sag der KI: "Der Zähler springt nicht, was ist falsch?" und füge die Fehlermeldung bei.
3. Verfeinern: "Mach die Animation schöner" / "Füge einen Reset-Button hinzu" / "Nutze localStorage, damit der Zähler beim Neuladen erhalten bleibt."
4. Jede Feedback-Runde = ein neuer Prompt. So wächst das Projekt organisch.
Schritt 5: Best Practices
- Kleine Schritte: lieber 5 kleine Prompts als 1 großer
- Fehlermeldungen immer mitgeben
- Code immer im Browser / in der Console prüfen
- Versionieren: git add -A && git commit -m "vibe: counter added"
- Nach 2–3 Runden ohne Fortschritt: Prompt neu formulieren oder Projekt neu strukturieren
Das war's – jetzt bist du im Vibe. Probier's aus und teilt eure Erfahrungen: Welche Tools und Prompts bringt ihr mit?