Vibecoding
Wie du KI dazu bringst, echten Code zu schreiben, ohne im Chaos zu versinken. Unser Flaggschiff, basierend auf ECC.
0 Was ist Vibecoding
Was ist Vibecoding: Websites bauen ganz ohne Code
Vibecoding einfach erklärt: Du erklärst die Aufgabe mit Worten, und die KI schreibt den Code. Wer ein Vibecoder ist, was ihn von einem Programmierer unterscheidet und wie du heute loslegst.
1 Schnell-Fixer
KI-Agent gegen Chatbot: der Unterschied einfach erklärt
Was einen KI-Agenten von einem Chatbot unterscheidet: Der Chatbot redet, der Agent handelt mit eigenen Händen - erstellt Dateien, führt Code aus, fixt Fehler. Versteh das - und Vibecoding wird auf einmal klar.
1 Schnell-Fixer 2 One-Click-Website
Vibecoding-Tools: womit Anfänger Code mit KI schreiben
Chatbots, Editoren mit KI, Agenten im Terminal und Website-Baukästen - welches Vibecoding-Tool wählst du als Anfänger und worin unterscheiden sie sich wirklich. Ohne Geschwafel.
1 Schnell-Fixer 2 One-Click-Website
1 Wie der Agent denkt
Wie ein KI-Agent funktioniert, einfach erklärt: Harness, Kontext und Gedächtnis
Wie ein KI-Agent von innen aufgebaut ist: Harness, Kontextfenster, Tokens und Gedächtnis. Verständlich erklärt für Vibecoder - damit Claude und GPT beim ersten Mal hören, nicht erst beim zehnten.
3 Doku-Verfütterer 4 Der Lotse 5 Fast-Architekt
Tokens und der Preis von KI: wie du an der KI nicht pleitegehst
Was Tokens sind, was KI wirklich kostet und wie du nur Cent für die KI zahlst: Antworttiefe wählen, Tokens zählen, Budget-Lecks finden und das Modell zur Aufgabe passend aussuchen.
2 One-Click-Website 3 Doku-Verfütterer 4 Der Lotse
Das Gedächtnis des KI-Agenten: wie sich Claude dich zwischen Sessions merkt
Wie das Gedächtnis eines KI-Agenten funktioniert: was Instinkte, Confidence und der Gedächtnisbereich sind, warum das Langzeitgedächtnis des Agenten in Dateien lebt und nicht im Modell, und wie du es einrichtest.
4 Der Lotse 5 Fast-Architekt
Kompaktierung des Agenten-Gedächtnisses: wann den Kontext aufräumen, ohne was zu verlieren
Kompaktierung des Agenten-Gedächtnisses einfach erklärt: was zusammengeschrumpft wird und verloren geht, was überlebt, und in welchem Moment das Aufräumen des Kontexts sicher ist - und wann es zum Eigentor wird.
3 Doku-Verfütterer 4 Der Lotse
Agent hängt: So findest du die Ursache und reparierst deinen KI-Agenten
Agent dreht sich im Kreis, läuft in einer Schleife oder redet Quatsch? Wir gehen per Checkliste durch, warum dein KI-Agent hängt, und beheben die Ursache - in Ruhe, wie ein Mechaniker, nicht wie ein Panikmacher.
4 Der Lotse 5 Fast-Architekt
Autonome Agent-Loops: wie die KI von allein arbeitet
Autonome KI-Agent-Loops einfach erklärt: eine Pipeline aus Schritten, eine Brücken-Datei fürs Gedächtnis, eine Notbremse gegen unnötige Kosten und ein Aufräum-Schritt. Lass den Agenten über Nacht laufen - ohne böse Überraschungen.
4 Der Lotse 5 Fast-Architekt
2 Wie man richtig fragt
Wie du einen Prompt für einen KI-Agenten beim ersten Mal richtig schreibst
Warum macht der KI-Agent nicht das, worum du gebeten hast? Wir lernen, Prompts nach dem Schema WAS-WO-FERTIG-VERBOTEN zu schreiben und beim ersten Mal das Ergebnis zu bekommen - statt beim zehnten.
1 Schnell-Fixer 2 One-Click-Website
Erst suchen, dann schreiben: der Prompt, der dir Stunden spart
Die Vibecoder-Gewohnheit „erst suchen, dann schreiben“: wie du deinen KI-Agenten dazu bringst, fertige Bibliotheken und Lösungen zu suchen, bevor er Code schreibt - und so Stunden, Geld und Nerven sparst.
1 Schnell-Fixer 2 One-Click-Website
Regex oder KI: Text parsen, ohne dein Budget zu verbrennen
Regex oder KI zum Text-Parsen? Lern zu entscheiden: billige Regeln für saubere Zeilen, KI fürs Chaos und ein Hybrid, der die Kosten um 95% drückt.
3 Doku-Verfütterer 4 Der Lotse
Blueprint im Vibecoding: von der Idee zum Plan in einem Prompt
Blueprint im Vibecoding ist ein Projektplan aus einem einzigen Ideen-Satz. Du lernst, die Aufgabe in Schritte zu zerlegen, Abhängigkeiten zu sehen und den Agenten so zu fragen, dass kein Brei rauskommt.
2 One-Click-Website 3 Doku-Verfütterer
3 Wir machen es schön
Design ohne KI-Schablone: so kriegst du den Neuro-Look raus
Warum die KI immer dieselben lila Seiten mit Riesenbuchstaben baut und wie du mit einem einzigen Briefing - der Design-Richtung - Design mit Charakter statt Schablone bekommst.
2 One-Click-Website 3 Doku-Verfütterer 4 Der Lotse
Wie du ein Interface angenehm machst: Kleinigkeiten, die alles entscheiden
Woraus sich das Gefühl von „teuer“ in einem Interface zusammensetzt: Abstände, Schatten, Rundungen, Button-Feedback, Klickzone. Und wie du das alles mit einfachen Worten bei der KI bestellst.
2 One-Click-Website 3 Doku-Verfütterer
Animationen auf der Website: die helfen statt nerven
Wozu eine Website Animationen braucht, welche wirklich helfen und welche nerven und bremsen. Dauer, Sanftheit, Barrierefreiheit - und wie du die KI bittest, Bewegung richtig zu machen.
3 Doku-Verfütterer 4 Der Lotse
React und Next.js einfach erklärt: Komponenten, Props, State
React und Next.js easy erklärt für Vibecoder: was Komponenten, Props und State sind, wie sich Server vom Browser unterscheidet und mit welchen Prompts du dir vom Agenten eine saubere Website bauen lässt.
3 Doku-Verfütterer 4 Der Lotse 5 Fast-Architekt
Liquid Glass: Glas-Buttons aus iOS 26 per Prompt an den Agenten
Liquid Glass aus iOS 26 einfach erklärt: woraus so ein Glas-Button besteht und wie du den KI-Agenten bittest, solche halbtransparenten Buttons und Panels zu bauen - ohne dass es überladen wirkt.
3 Doku-Verfütterer 4 Der Lotse
SEO für Einsteiger: wie man dich bei Google findet
SEO einfach erklärt: warum eine Seite ohne Optimierung bei Google nicht gefunden wird, wie du title, Geschwindigkeit und Seitenstruktur einrichtest und deine Seite in der Suche nach oben bringst.
2 One-Click-Website 3 Doku-Verfütterer
4 Damit nichts kaputtgeht
Verständlicher Code für Vibecoder: Namen, DRY, KISS
Wie du beim KI-Agenten verständlichen Code bestellst: sprechende Namen, die Prinzipien DRY und KISS, keine magischen Zahlen. Leichter zu lesen, billiger zu ändern, geht seltener kaputt.
2 One-Click-Website 3 Doku-Verfütterer
Fehlerbehandlung im Code: damit nichts still abstürzt
Fehlerbehandlung für Vibecoder: verständliche Meldung für Menschen, volles Log für dich, schlaue Retries und ein fertiger Prompt, damit der Agent keine Fehler versteckt.
3 Doku-Verfütterer 4 Der Lotse
Was Tests und TDD sind - einfach erklärt
Tests und TDD einfach erklärt: warum du die Prüfung vor dem Code schreibst, wie der Rot-Grün-Zyklus funktioniert und warum Tests Bugs fangen, bevor sie der User sieht.
3 Doku-Verfütterer 4 Der Lotse 5 Fast-Architekt
Check vor dem Launch: Der Verifikations-Loop des Agenten
Check vor dem Launch der Seite: Verifikations-Loop in 6 Schritten - Build, Typen, Linter, Tests, Sicherheit, Änderungen ansehen. Damit die Seite nicht beim ersten Klick abschmiert.
3 Doku-Verfütterer 4 Der Lotse
E2E-Tests einfach erklärt: ein Roboter testet deine Seite für dich
E2E-Tests einfach erklärt: warum ein Vibecoder einen Roboter braucht, der selbst die Buttons auf der Seite drückt, wie du E2E mit Playwright über Claude schreibst und vor dem Launch nichts kaputt machst.
3 Doku-Verfütterer 4 Der Lotse
Regression beim Vibecoding: Bug-Test, damit die KI nichts kaputtmacht
Die KI fixt einen Bug, eine Stunde später macht sie ihn wieder kaputt, und das im Kreis. Wie ein einziger Regressionstest fängt, was die KI selbst einfach nicht sieht. Guide für Vibecoder.
3 Doku-Verfütterer 4 Der Lotse
Production-Audit: Ist dein Projekt bereit für echte Nutzer?
Production-Audit für Vibecoder: Wie sich „läuft bei mir“ von „läuft bei allen“ unterscheidet, welche Stellen zuerst krachen und wie du die KI zwingst, ein klares Geht/Geht-nicht-Urteil zu liefern.
3 Doku-Verfütterer 4 Der Lotse 5 Fast-Architekt
Deployment: wie du deine Seite online bringst, ohne dass sie crasht
Deployment einfach erklärt: wie du Updates ausrollst, ohne dass etwas crasht, Secrets in Umgebungsvariablen versteckst, einen Health-Check baust und in Sekunden zurückrollst.
3 Doku-Verfütterer 4 Der Lotse
5 Sicherheit
Website-Sicherheit für Vibecoder: 4 Lücken, die du schließen musst
Wie du deine Website vor Hacks schützt, auch ohne Programmierer zu sein. Secrets in .env, Eingaben und Dateien prüfen, Zugriffsrechte auf dem Server, sichere Logs - und ein Prompt für security-review.
3 Doku-Verfütterer 4 Der Lotse 5 Fast-Architekt
Sicherheit deines KI-Agenten: So scannst du seine Settings auf Lücken
Der KI-Agent selbst kann zur Sicherheitslücke werden: Passwörter, zu viele Rechte, Prompt Injection. Ich zeig dir, wie du seine Settings mit einem einzigen Befehl scannst und die Risiken dichtmachst.
2 One-Click-Website 3 Doku-Verfütterer
Hooks für den KI-Agenten: Schutz vor gefährlichen Befehlen und Leaks
Hooks und hookify-Regeln einfach erklärt: wie du dem Agenten einen automatischen Wachmann verpasst, der rm -rf, das Leaken von Secrets und gefährliche Befehle abfängt, bevor sie laufen.
3 Doku-Verfütterer 4 Der Lotse
6 Schwärme und Automatisierung
Ein Team aus KI-Agenten: wie du mehrere Agenten gleichzeitig startest
Ein Team aus KI-Agenten einfach erklärt: wie du mehrere Agenten parallel startest, ihnen Rollen verteilst, ihre Berichte zu einem Ergebnis zusammenführst und nicht im Lärm untergehst.
4 Der Lotse 5 Fast-Architekt
Parallel arbeiten mit dem KI-Agenten: so wird Vibecoding schneller
Aufgaben parallel mit dem KI-Agenten ausführen: welche Code-Stücke gleichzeitig laufen können, was strikt nacheinander muss und wie du keinen Crash kriegst, wenn zwei Agenten dieselbe Datei anfassen.
4 Der Lotse 5 Fast-Architekt
KI-Agenten-Schwarm: wie du mehrere Agenten auf einmal startest
KI-Agenten-Schwarm: wie du mehrere Agenten parallel auf ein Projekt loslässt. Git worktree, dmux-Panels und Vorarbeiter DevFleet - ohne Chaos und Zickereien um Dateien.
5 Fast-Architekt 6 Refactorer
Der Rat aus vier KIs: wie du eine schwere Entscheidung triffst
Die Methode „Rat“ (council): wie du die KI aus vier Rollen mit sich selbst streiten lässt und eine schwere Entscheidung bewusst triffst, statt einfach die erstbeste Option zu greifen.
3 Doku-Verfütterer 4 Der Lotse
Dein persönliches KI-OS auf Claude Code: Speicher und Zeitplan
Dein persönliches KI-OS auf Claude Code: Speicher in Dateien, ein Team aus Spezialisten-Agenten und Aufgaben nach Zeitplan. Wie du das aus vier Ordnern ohne Datenbanken und Server baust.
5 Fast-Architekt 6 Refactorer
Eval-first: erst die Checks, dann der Code mit KI
Eval-first einfach erklärt: warum starke Vibecoder zuerst Checks schreiben und dann die KI rufen. Capability und Regression, die Metrik pass@k, Häppchen à 15 Minuten.
4 Der Lotse 5 Fast-Architekt
7 Superkräfte
Deep Research im Internet: wie die KI Fakten findet
Deep Research: wie du die KI dazu bringst, Dutzende Quellen zu durchsuchen, sie komplett zu lesen, Fakten gegenzuchecken und einen Bericht mit Links und Daten zu liefern.
1 Schnell-Fixer 2 One-Click-Website 3 Doku-Verfütterer
Smarte Suche für deinen KI-Agenten: Exa-Neuralsuche und Faktencheck
Smarte Suche für deinen KI-Agenten: Wir binden die Exa-Neuralsuche und iteratives Suchen ein, damit dein Agent Fakten prüft, frischen Code findet und nicht fantasiert, sondern auf Quellen verweist.
3 Doku-Verfütterer 4 Der Lotse
KI-Scraper: der Bot sammelt selbst Daten von Websites
Wie du dir einen Scraper-Bot baust, der selbst Websites abgrast, Daten zieht, die KI sie sortiert und in eine Tabelle legt - kostenlos, mit Gemini Flash und GitHub Actions.
3 Doku-Verfütterer 4 Der Lotse
Datenbanken für Einsteiger: Tabellen, Indizes und Migrationen
Was eine Datenbank in einfachen Worten ist: Tabellen, Indizes, Migrationen und Spaltentypen. Wir nehmen die größten Stolperfallen für Vibecoder auseinander - und wie du sie vorab umgehst.
3 Doku-Verfütterer 4 Der Lotse 5 Fast-Architekt
Bilder, Videos und Sound per KI generieren mit fal.ai
Wie du Bilder, Videos und Sound per KI über fal.ai direkt im Chat mit dem Agenten generierst. Welche Modelle du wählst, wie du Prompts schreibst und dein Budget nicht verbrennst.
1 Schnell-Fixer 2 One-Click-Website 3 Doku-Verfütterer
HTML-Präsentation im Browser: Slides ohne PowerPoint
So machst du eine Präsentation im Browser ohne PowerPoint und ohne Designer: eine HTML-Datei, Animationen, durchblätterbar mit Pfeiltasten, zerfällt nicht auf dem Beamer. Prompt inklusive.
2 One-Click-Website 3 Doku-Verfütterer
MCP für den Agenten: Was das ist und wie du Tools anschließt
MCP einfach erklärt: ein einziger Stecker, über den ein KI-Agent Tools, Daten und Vorlagen bekommt. Warum das für Vibecoder wichtig ist, wie du einen Server anschließt und dabei kein Unglück erlebst.
4 Der Lotse 5 Fast-Architekt 6 Refactorer
Schöner Code in Python: klare Namen, Typen, Fehler
Was schöner Python-Code für Vibecoder bedeutet: klare Namen, Type Hints, ehrliches Fehler-Handling und pythonischer Stil. Und warum der Agent schönen Code leicht repariert, hässlichen aber kaputt macht.
2 One-Click-Website 3 Doku-Verfütterer 4 Der Lotse
Wie du Texte für deine Website in lebendiger Sprache schreibst (und nicht wie ein Roboter)
Wie du Website-Texte in lebendiger Sprache schreibst: womit du einen Absatz anfängst, welche Wörter Müll sind, wie du die KI dazu bringst, menschlich zu schreiben und keine Fakten zu erfinden. Ganz einfach erklärt.
1 Schnell-Fixer 2 One-Click-Website
Wissensbasis für den KI-Agenten: so gibst du ihm ein Gedächtnis
Wie du deinem KI-Agenten eine funktionierende Wissensbasis aufbaust: wo du Fakten, Entscheidungen und Notizen speicherst, damit er sie nach einem Neustart noch kennt und das Gedächtnis nicht zur Müllhalde verkommt.
3 Doku-Verfütterer 4 Der Lotse
Kursplan
- Kapitel 0. Was ist Vibecoding
- Kapitel 1. Wie der Agent denkt
- Kapitel 2. Wie man richtig fragt
- Kapitel 3. Wir machen es schön
- Kapitel 4. Damit nichts kaputtgeht
- Kapitel 5. Sicherheit
- Kapitel 6. Schwärme und Automatisierung
- Kapitel 7. Superkräfte