In den letzten Wochen habe ich Dir hier im Newsletter einiges an "Spielzeug" vorgestellt: Das Wingmen SEO Bookmarklet, das HTML-Game und zuletzt das Spiel Landingpages ranken.
Wer mich persönlich kennt, weiß: Ich kann eigentlich gar nicht programmieren. Du fragst Dich vielleicht: Wie konntest Du diese Projekte dann umsetzen?
Die Antwort ist einfach: Vibe Coding.
Was ist Vibe Coding?
Im Grunde bedeutet es: Du schreibst keinen Code mehr Zeile für Zeile selbst. Stattdessen beschreibst Du der KI in natürlicher Sprache, was Du haben möchtest, wie es sich anfühlen soll und welches Problem es löst – den "Vibe" eben. Die KI kümmert sich um die Syntax, die Klammern und die Semikolons.
Hanns Kronenberg hat es dazu neulich auf LinkedIn sehr treffend formuliert:
"Mit ein bis zwei Tagen Vibe Coding kann man sich das SEO Tool bauen, das man schon immer haben wollte. Einblicke gewinnen, die vorher nie möglich waren. Und vor allem Tools bauen, die früher wegen Ressourcen schlicht nicht realistisch waren."
Das unterschreibe ich zu 100 %. Die Spiele waren letztes Jahr mein Startpunkt, um mich dem Thema zu nähern. Ich war neugierig, wie weit ich damit komme. Durch das Bookmarklet und ein paar weitere Projekte, die wir gerade noch testen, ist bei mir mittlerweile jegliche Scheu vor programmatischen Lösungen überwunden. Und ganz ehrlich: Es macht unfassbar viel Spaß und ist ein tolles Gefühl, Dinge plötzlich selbst bauen zu können.
Die Werkzeugkiste hast Du bereits
Ich bin dabei ganz pragmatisch gestartet und habe meine ersten Vibe Coding Erfahrungen primär mit ChatGPT und seit Ende letzten Jahres verstärkt mit Gemini gesammelt. Das reicht m. E. für den Einstieg völlig aus.
Ansonsten soll Claude (insbesondere Claude Code und Claude Cowork) ja für Coding-Themen auch noch eine starke Empfehlung sein. Da ich mit Gemini aber gerade zufrieden bin, drängt mich aktuell noch nichts, die Seiten zu wechseln. Außerdem scheint Cursor noch ein toller Code-Editor zu sein – insbesondere wenn die Projekte komplexer werden. Da habe ich selbst aber noch keine Erfahrungswerte gesammelt.
Meine 7 Learnings über's Vibe Coding
Auch wenn die Einstiegshürde niedrig ist: Ganz so "magisch", dass man nur einen Knopf drückt und alles perfekt ist, ist es in der Praxis dann doch nicht. Ich möchte im Folgenden ein paar meiner Erfahrungswerte teilen, um Dich zu ermutigen, in diesem Jahr selbst damit zu experimentieren:
1. Salami-Taktik statt Big Bang
Versuche nicht, das komplette Tool in einem riesigen Prompt zu erstellen. Irgendwann sind die Tokens (das Gedächtnis der KI) aufgebraucht, und dann steigt das Risiko von Halluzinationen massiv. Es lohnt sich, Schritt für Schritt vorzugehen. Eine Aufgabe, ein Chat. Kontext kann dann jeweils der Ist-Zustand sein.
2. Der KI auf die Finger schauen
Wenn man Code zur Überarbeitung zurückgibt, neigt die KI manchmal dazu, an anderen Stellen Dinge zu ändern. Ich gebe daher oft explizit mit, dass die KI nichts über meine Anweisungen hinaus ändern, zusammenfassen oder verschlimmbessern soll. Ich weiß nicht wirklich, ob ich mir das nur einbilde, aber ich meine, es hilft.
3. Keine Kommentare im Code
Gerade für den Feinschliff weise ich die KI an, keine Kommentare im Code zu hinterlassen. Das bläht den Code nur unnötig auf und ist für mich als Nicht-Developer an der Stelle meist eh nicht relevant.
4. Fehlermeldungen sind Gold wert
Eigentlich logisch, aber ich habe es zu spät genutzt: Wenn etwas nicht geht, ab in die Chrome DevTools (F12). Die rote Fehlermeldung aus der Konsole direkt an die KI zurückspielen ist viel effektiver, als nur zu schreiben "Der Button geht nicht".
5. Code-Reviews im frischen Chat
Ein hilfreicher Workflow: Den aktuellen Status quo (den Code) in einen neuen Chat posten und die KI bitten, ihn auf Risiken zu prüfen oder Verbesserungsideen und Vorschläge für weitere Features zu machen. So lässt man die KI quasi ihr eigenes Werk unvoreingenommen gegenprüfen und erweitern.
6. Versionierung rettet Leben
Immer wieder den aktuellen Code-Stand wegspeichern! Wenn eine Prompt-Runde sich mal komplett verrannt hat, kannst Du so einfach zur sauberen Vorversion zurückkehren und mit diesem Stand als Kontext weiterarbeiten.
7. Responsive Design als Lehrmeister
Wie viel Zeit hierfür draufging, kann man eigentlich keinem erzählen. Die Logik steht oft schnell, aber das CSS für verschiedene Displaygrößen sauber hinzubekommen, ist ein Geduldsspiel. Und so kann man festhalten: Der letzte Feinschliff kostet oft mehr Zeit als der Bau des eigentlichen MVPs (Minimum Viable Product).
Ein wichtiges Wort zur Sicherheit
Bei aller Euphorie darf man eines nicht vergessen: Wir hantieren oft mit sensiblen Daten. Es gibt einen großen Unterschied zwischen den kostenfreien Versionen der KI-Tools (hier werden Eingaben oft für das Training der Modelle genutzt) und den kostenpflichtigen Business- bzw. Enterprise-Versionen.
Dennoch würde ich bei sensiblen Daten, Passwörtern und API-Keys aufpassen. Diese gehören weder in den Prompt noch in den Code. Beim Prompting sollte man eher mit Platzhaltern arbeiten.
Vielleicht juckt es Dir ja jetzt auch in den Fingern, das Tool, das Du Dir schon immer gewünscht hast, einfach mal selbst anzugehen. Die Möglichkeiten sind da.
Viel Erfolg beim Coden (lassen)!