Vibe Coding: Vom Excel zur Web-App ohne eine Zeile Code zu schreiben

Alle reden über AI und dieses "Vibe Coding" aber was steckt da überhaupt dahinter? Bei Peerigon nutzen wir AI um effizienter zu arbeiten und auch Vibe Coding gehört da in unsere Toolbox. In diesem Blogpost wollen wir anhand eines echten Beispiels zeigen was damit machbar ist und wo es (noch) aufhört. Begleite uns bei einem Vibe Coding Experiment 🚀

• Was ist Vibe coding? KI schreibt den Code basierend auf natürlichen Sprachanweisungen
• Ist Vibe Coding eine Alternative zur klassischen Software-Entwicklung? Nein! Es ist ein zusätzliches Werkzeug das man bedienen können muss. Ergänzend kann es aber sehr hilfreich sein und die Entwicklungszeit deutlich reduzieren.
• Wie gut funktioniert es wirklich: Es funktioniert gut für Prototypen und kleinere Anwendungen, hat aber klare Grenzen
• Unser Experiment: Excel-Tool → Web-App in mehreren Iterationen
• Fazit: Hilfreiches Tool für bestimmte Anwendungsfälle, aber ohne Engineering Erfahrung sehr limitiert und mit Vorsicht zu genießen

Vibe Coding wurde im Februar 2025 von Andrej Karpathy geprägt, Mitbegründer von OpenAI und ehemaliger KI-Leiter bei Tesla. Seine Definition aus dem originalen Tweet vom 3. Februar 2025:

Karpathy beschreibt es so: "Ich baue ein Projekt oder eine Web-App, aber es ist nicht wirklich Programmieren — ich sehe nur Sachen, sage Sachen, führe Sachen aus und kopiere Sachen, und es funktioniert meistens."

Ein interessanter Vergleich ist Rick Rubin, der legendäre Musikproduzent. In einem CBS 60 Minutes Interview vom Januar 2023 sagte der 9-fache Grammy-Gewinner: "Ich habe keine technischen Fähigkeiten und ich weiß nichts über Musik." Trotzdem produziert er erfolgreich Hits für Künstler von Jay-Z bis Johnny Cash. Er wird für seinen Geschmack und seine Kommunikationsfähigkeit bezahlt, nicht für technisches Know-how.

Bei all den Möglichkeiten gibt es auch klare Grenzen. Wichtig ist zu verstehen: Die Übergänge sind fließend und der entscheidende Unterschied liegt oft in der Person, die die KI bedient, nicht im Tool selbst.

🎯 Vibe Coding (Vertrauen ohne Verstehen):

• Vollständiges Vertrauen auf KI ohne Code-Review
• "Forget that the code even exists" (Andrej Karpathy)
• Funktional orientiert: Hauptsache es läuft

⚙️ AI-Assisted Development (KI als Werkzeug):

• Mensch & KI arbeiten zusammen
• Code muss erklärbar und wartbar sein
• Qualitätsprozesse bleiben bestehen

👨‍💻 Traditional Development (Manuell):

• Code wird vollständig von Hand geschrieben
• Klassische Review- und Testprozesse

Der entscheidende Faktor: Ein erfahrener Entwickler, der Claude für schnelle Prototypen nutzt, betreibt wahrscheinlich AI-Assisted Development, auch wenn er sagt er macht "Vibe Coding". Ein Non-Techie, der mit derselben KI eine komplexe App baut, macht echtes Vibe Coding – mit allen Risiken.

Wie Simon Willison treffend formuliert: "If an LLM wrote the code for you, and you then reviewed it, tested it thoroughly and made sure you could explain how it works to someone else—that's not vibe coding, it's software development."

⚠️ Wichtig: Nutze dein Vibe Coding-Produkt niemals ungeprüft für unternehmenskritische Zwecke.

Grundsätzlich eignet sich jedes moderne LLM für Vibe Coding. Die wichtigsten Unterschiede liegen in Benutzerfreundlichkeit und verfügbaren Funktionen.

• OpenAI ChatGPT
• Antropic Claude
• Mistral Le Chat
• Google Gemini

All diese Tools verfügen über die Möglichkeit den Code direkt auszuführen und darzustellen. Bei OpenAI, Mistral und Google nennt sich das Canvas und bei Antropic Artifacts. Es gibt auch Freigabefunktionen um die Anwendungen im Team zu teilen, die sich je nach Art des Abonnements unterscheiden.

• Lovable: Komplette Apps durch natürliche Sprache, automatisches Hosting
• v0: UI-Komponenten von Vercel, direktes Deployment
• Bolt.new: Fullstack-Entwicklung, integrierte Hosting-Umgebung

Editors

• Anysphere Cursor: AI-erweiterte IDE
• GitHub Copilot: VSCode Integration

Terminal-Tools

• Anthropic Claude Code
• OpenAI Codex
• Google Gemini CLI

Fazit: Für Einsteiger reichen Basis-LLMs. Für ernsthafte Entwicklung → spezialisierte Tools, aber dann ist es eher AI-Assisted Development. Genug der trockenen Theorie. Jetzt wollen wir los legen und endlich "viben".

Wir nutzen in unserem Beispiel Antropic Claude, da wir damit gute Erfahrungen gemacht haben. Die Modelle von Antropic (Opus und Sonnett) sind in der AI-Dev-Community als sehr gute Coding Modelle bekannt. Außerdem lassen sich die Ergebnisse über Claude Artifacts direkt veröffentlichen und somit teilen.

Keiner tut es gerne, aber ohne geht's auch nicht: Die Rede ist von Schätzungen. Wir haben dafür seit Jahren ein kleines Excel-Sheet im Einsatz um Projekte in logische Häppchen runterzubrechen die wir dann im Team schätzen.

Die Logik ist überschaubar und daher gut über Excel abbildbar:

• Jeder Task wird mit worst case, likely case und best case geschätzt
• Der PERT Score berechnet sich aus (worst + (likely x 4) + best) / 6

Die Details sind für unser Beispiel aber nebensächlich.

💡 Pro-Tipp: Wenn ihr ein super komplizierte Excel-Sheet nutzt und selbst nicht 100% wisst, wie es funktioniert, weil das im Unternehmen über Jahre gewachsen ist, kann KI euch bei der Erklärung helfen.

Soweit der erste Prompt. Nach ca. 2 Minuten und jeder Menge Analyseschleifen durch die KI, kommt am Ende die erste Analyse:

🤖 Claude analysiert:

✅ Das beschreibt die Funtionalität des Excel-Sheets sehr gut.

Wir haben die Anforderungen exrahiert und sogar einen Vorschlag für die Features der Web-App bekommen:

Das klingt nicht schlecht! Jetzt hätte ich gerne einen klickbaren Prototypen (ohne gleich die ganze Logik zu implementieren):

Und schon wird HTML und CSS generiert. Da ich es nicht anders formuliert habe ganz klassisch ohne Frameworks und alles in einer Datei.

Das sieht schonmal nicht schlecht aus und wir bekommen direkt Feedback wie es weitergehen könnte:

Und jetzt passiert genau das, was wir auch bei unseren Workshops oft erleben: Obwohl die Anforderungen im Vorfeld gefühlt schon sehr klar waren, wird aus einer kleinen Idee ein riesen Ding. Das ist auch nicht schlecht um die Vision der Idee zu durchsteigen und sich klar zu machen wohin die Reise gehen könnte.

Besonders interessant ist folgender Teil:

Das hätte ich alles gern für unser Estimation Tool aber es macht das Projekt in der aktuellen Phase viel zu komplex.

🚨 Wichtig ist es an dieser Stelle die Kurve zu kriegen und sich von der KI nicht gleich die eierlegende Wollmilchsau bauen zu lassen (kleiner Spoiler: das kann sie nicht so gut).

⏪ REWIND: Unsere initiale Idee war das Excel-Sheet in eine Web-Anwendung zu überführen. Themen wie User authentication, Team collaboration, Charts und Import / Export hatten wir davor ja auch nicht? Das Excel-Sheet lag irgendwo in der Cloud als Template und darüber konnte jeder der Zugang hat, darauf zugreifen. Natürlich wäre es naheliegend diese Themen anzugehen um einen echten Mehrwert zu schaffen, aber das macht das Projekt um ein vielfaches komplexer...

Außerdem stellt sich die Frage: Wo soll die Anwendung am Ende laufen? Ist die Person am Prompten in der Lage die Anwendung selbstständig und sicher zu deployen?

Für jemanden der das nicht innerhalb von 2 Sekunden mit "Ja" beantworten kann, empfehle ich bei der statischen Website zu bleiben und diese z.B. über Claude Artifacts oder ChatGPT Canvas zu veröffentlichen.

Das haben wir in diesem Fall vor und daher geben das der KI als Input:

Und Claude macht nicht nur einen Vorschlag sondern stürzt sich direkt in die Umsetzung.

Nach ein paar Minuten bekommen wir die erste funktionale Version, die wir Stück für Stück verfeinern. Je konkreter die Anforderungen im Prompt, desto besser meist das Ergebnis. Ich habe hier bewusst knapp formuliert und mich Vibe Coding style treiben lassen. Das bedeutet dann aber auch mehr Glückspiel und somit mehr Korrekturschleifen.

Das sieht schonmal nicht schlecht aus, aber im Detail gibt es drei Probleme:

🐛 Leider wirft die Anwendung einen Security Fehler im Browser der mit dem Zugriff auf localStorage in der Sandbox (Claude Artifacts) zu tun hat. Wer die Datei lokal öffnet oder über einen statischen Webserver ausliefert sollte den Fehler nicht bekommen.

🏓 Aber selbst wenn man nicht genau weiß was das bedeutet, kann man den Fehler einfach wieder der KI zuwerfen. Das ist ja das schöne am Vibe-Coden ;)

Obwohl die Tabs im Click-Dummy zu sehen waren, ist in der ersten funktionalen Version alles auf einer Seite gelandet.

Die Buttons für die Aktionen "Save", "Load", ... sind nicht sauber ausgerichtet.

Beim strikten Vibe-Coding ignoriert man den Code der erstellt wurde und fokussiert sich voll auf's prompten. Daher wollen wir die Fehler der Reihe nach fixen lassen:

✅ Die Fehlermeldung ist weg. Tabs und Buttons sind noch nicht gefixt, aber das war ja bisher auch nicht unser expliziter Wunsch. Also weiter im Text...

✅ Perfekt! Die Tabs sind da und die Fehlermeldung ist weiterhin verschwunden.

Jetzt schauen wir uns das Problem mit den Buttons an: Bei genauerer Betrachtung fällt auf dass die Buttons nicht nur überlappen sondern tatsächlich gar nicht richtig funktionieren. Classic AI Coding Experience! In unserem Fall haben die Buttons von Anfang an nicht funktioniert. Aber auch das "verschlimmbessern" bzw. das versehentliche "kaputt machen" von existierender Funktionalität im Zuge der Erweiterung einer Anwendung ist ein sehr häufiges Phänomen beim viben.

Die Buttons sind jetzt schön sauber in einer Reihe und angeblich funktionieren sie auch. Leider tun sie das in der Realität nicht, was aber auch daran liegt wie die Anwendung über Claude Artifacts ausgeliefert wird.

To be fair: In einer lokalen Umgebung würden diese funktionieren und Antropic hat seine KI inzwischen angewiesen diese lokalen APIs nicht mehr zu nutzen, da sie in der Sandbox nicht funktionieren.

Claude war sich sehr sicher dass das Problem gelöst ist. Gerade darum wollen wir noch eine nächste Iteration wagen.

Man muss Claude an der Stelle lassen dass die Lösung sehr kreativ mit den Einschränkungen durch die Sandbox umgegangen ist. Der Weg des manuellen Kopierens ist zwar nicht elegant aber besser als gar kein Import / Export.

Final haben wir eine funktionierende Version mit einem etwas komplizierten Import / Export. Wir könnten noch stundenlang weiter prompten aber für unser Beispiel wollen wir es mal dabei belassen.

Bevor wir zum Fazit kommen, werfen wir einen Blick unter die Haube.

📊 Facts:

• 918 Zeilen Code in einer einzigen HTML-Datei
• ~380 Zeilen CSS (47.7%)
• ~310 Zeilen JavaScript (38.9%)
• ~106 Zeilen HTML (13.3%)
• Zero Dependencies - keine externe Abhängigkeiten

✅ The good:

• Feature-komplett mit PERT-Berechnungen, Import/Export und Sharing
• Sauberes, modernes UI mit responsivem Design
• Extrem portabel - öffne die HTML-Datei und es funktioniert
• Die PERT-Berechnungen sind korrekt implementiert

⚠️ The bad:

• Sicherheitslücken: XSS-Vulnerabilities durch unsicheres innerHTML
• Code-Chaos: Alles im globalen Scope, inline Event-Handler, keine Modularisierung
• Keine Validierung: Best Case könnte größer als Worst Case sein
• Hardcoded Annahmen: 8-Stunden-Tage, 40% Buffer
• Wartbarkeit: Keine Tests, keine Dokumentation, alles in einer Datei

Es ist ein funktionales Tool, das seinen Zweck erfüllt, aber unter typischen 'Proof of Concept'-Problemen leidet: Sicherheitslücken, schlechte Code-Organisation und eingeschränkte Wartbarkeit."

Was bedeutet das für VibeCoding?

Dieses Beispiel zeigt perfekt die Stärke und Schwäche von VibeCoding:

• Stärke: In wenigen Minuten von der Idee zum funktionierenden Prototyp
• Schwäche: Der Code ist ein klassisches "es funktioniert, aber..." Beispiel

Für interne Tools oder Prototypen kann das völlig ausreichen. Für Production-Use mit mehreren Nutzern oder sensiblen Daten? Da sollte definitiv ein Mensch mit Engineering-Erfahrung drüberschauen.

Wir hoffen dieses Hands-On Vibe-Coding Beispiel hat euch gezeigt was hinter dem Begriff steht. In unserem Beispiel haben wir Antropic Claude (Desktop) benutzt und die "App" über Artifacts veröffentlicht. Vibe-Coding geht natürlich auch mit ChatGPT und in KI-Tools die direkt auf Entwickler:innen ausgelegt sind wie z.B. Cursor, GitHub Copilot Agent und Claude Code.

Wir haben uns aber bewusst auf ein Non-Techie Setup beschränkt, da Vibe-Coding ja oft als Ersatz für Entwickler:innen angepriesen wird. Wer Engineering Background hat, kann mit Vibe-Coding deutlich komplexere Anwendungen bauen und veröffentlichen. Die Schwierigkeit liegt hier aber darin die Code-Qualität und Sicherheit zu gewährleisten bei vielen vielen Zeilen automatisch generiertem Code (die auch kein Mensch reviewen möchte).

✅ Realistische Use Cases

• Single-User Produktivitäts-Tools:
  • 🧮 Persönliche Kostenrechner
  • 📈 Datenanalyse-Tools
  • 📊 Personal Dashboards
• Datenverarbeitung:
  • 🔄 Format-Konverter
  • 🧹 Data-Cleaning-Tools
  • 📝 Report-Generatoren
• Design-Utilities:
  • 🎨 Color-Palette-Generatoren
  • ✏️ Typography-Tester
  • 🖼️ Interactive Mockups
• Exploratives Prototyping:
  • Konzepte validieren / brainstormen / visualisieren
  • UIs entwickeln für spätere Diskussionen mit UI/UX und Dev-Teams 🎨

❌ Die Grenzen kommen schnell

Sobald mehr als eine Person das Tool nutzen soll oder Daten gespeichert werden müssen, wird's kompliziert:

• Umfrage-Tools (brauchen zentrale Datensammlung)
• Multi-User-Anwendungen (geteilte Daten erforderlich)
• Alles mit Authentication 🔐
• Tools mit E-Mail-Versand 📧
• Cross-Session-Speicherung zwischen Nutzern

Die meisten "coolen" App-Ideen brauchen Server, Datenbanken oder APIs, die VibeCoding (ohne Engineer) nicht lösen kann.

Erweiterte Möglichkeiten: Vibe Coding kann durchaus komplexere Frontend-Anwendungen erstellen, aber für alles was über statische Single-Page-Apps hinausgeht, braucht man spezielle Tools, den Engineer im Loop und es ist dann auch meist kein Vibe coding mehr.

Sweet Spot: Schnelles Prototyping und Proof-of-Concepts, nicht Production-Ready Code. Mit Engineering-Tools wie Cursor, Claude Code oder GitHub Copilot kommt man deutlich weiter als mit reinem Browser-Vibe Coding.

Die Herausforderung: Code-Qualität und Sicherheit bei vielen Zeilen automatisch generiertem Code gewährleisten, die niemand reviewen möchte.

VibeCoding funktioniert am besten für in sich geschlossene Anwendungen. Sobald folgende Komponenten benötigt werden, wird es exponentiell komplexer:

• 🗄️ Datenbanken (über LocalStorage/IndexedDB hinaus)
• 🔐 User Authentication & Session-Management
• 📧 E-Mail-Versand & Notifications
• 📤 File-Upload & Server-Processing
• 👥 Multi-User-Funktionen
• 🔌 API-Integration mit Error-Handling

Vibe Coding demokratisiert die App-Entwicklung – aber zu welchem Preis? Wie bei Fast Fashion droht auch hier ein Wegwerf-Mentalität.

Die "Fast Apps" Problematik:

• Code-Müll: Tausende ungewartete Single-Use-Apps verstopfen Server und Repositories
• Technische Schulden: Quick & Dirty Code, der "erstmal funktioniert" aber langfristig Probleme schafft
• Sicherheitslücken: Ungepatchte Apps mit bekannten Vulnerabilities werden zu Einfallstoren
• Ressourcenverschwendung: Redundante Lösungen für bereits gelöste Probleme und hoher Energieverbrauch durch die Nutzung von LLMs.

Ein Beispiel aus der Praxis: Stell dir vor, jede Abteilung baut sich ihr eigenes Schätz-Tool. Am Ende hast du:

• 10 verschiedene Versionen mit ähnlicher Funktionalität
• Keine davon wird gewartet oder aktualisiert
• Jede hat ihre eigenen Sicherheitslücken
• Niemand weiß mehr, welche Version "die richtige" ist

Außerdem benötigen LLMs sowohl om Training als auch im Betrieb Unmengen an Strom und Wasser. Wer da tiefer einsteigen will, dem empfehle ich die kürzlich veröffentlichte Studie der Gesellschaft für Informatik.

🤔 Das Problem ist nicht die Technologie – es ist der Umgang damit. Genau wie bei Fast Fashion geht es um bewussten Konsum vs. gedankenloses Produzieren.

✅ Unsere nachhaltigen Prinzipien:

• "Build to Learn, not to Launch:" Prototypen als Lernwerkzeug, nicht als Endprodukt
• "One Tool, Well Maintained:" Lieber ein gepflegtes Tool als zehn vergessene
• "Document or Delete:" Code ohne Dokumentation hat ein Ablaufdatum
• "Security First:" Auch Prototypen können Schaden anrichten

Bei Peerigon nutzen wir das gesamte Spektrum – aber bewusst und gezielt:

• Vibe Coding → Konzeptvalidierung, Workshops, Experimente (mit Ablaufdatum!)
• AI-Assisted Development → Produktive Apps mit KI-Boost und professionellen Qualitätsprozessen
• Traditional Development → Kritische Systeme, wo jede Zeile kontrolliert sein muss

🤝 Pro-Tipp: Der perfekte Handoff

Euer Prototyp bewährt sich? Die KI hilft beim nächsten Schritt:

So wird aus der schnellen Idee eine nachhaltige Lösung – mit dem richtigen Tool zur richtigen Zeit.

🤖 Statement zur Verwendung von KI in diesem Artikel: Dieser Artikel wurde von Menschen geschrieben (danke für das Feedback Philipp und Lisa!), einschließlich des Titels, der Konzepte und der Codebeispiele. Wir haben jedoch KI für die Recherche und zur Verbesserung des Schreibstils verwendet.