Zum Inhalt springen
Vibe Coding

Webseitenbau mit Vibe Coding

Ein Erfahrungsbericht über den Umbau meiner Website mit KI-Unterstützung – vom groben Entwurf bis zur sicheren Implementierung.

17. Januar 2025 6 min

Der Begriff “Vibe Coding” wurde Anfang 2025 vom KI-Forscher Andrej Karpathy geprägt [1]. Er beschreibt eine Arbeitsweise, bei der Software nicht mehr Zeile für Zeile geschrieben, sondern in natürlicher Sprache beschrieben wird. Die KI übernimmt die Implementierung.

Eine Analogie aus der Pharmazie: Vibe Coding verhält sich zur klassischen Programmierung wie die Rezeptur zur industriellen Arzneimittelherstellung. Das Ergebnis kann identisch sein, aber der Weg dorthin ist ein anderer. Und wie bei der Rezeptur gilt: Man muss wissen, was man tut – oder zumindest erkennen, wann man nachfragen muss.

Ausgangslage

Meine bisherige Website lief auf Django, einem Python-Framework für komplexe Webanwendungen mit Datenbanken und Benutzeranmeldung. Ich wollte Django ausprobieren, weil ich eine andere Anwendung damit entwickeln möchte – und das Framework eröffnet vielfältige Möglichkeiten. Für eine reine Content-Website mit Blog war es allerdings überdimensioniert. Ziel war die Migration zu Astro [2] – einem Framework, das speziell für Content-Websites entwickelt wurde. Es trennt Inhalte (in Markdown-Dateien) von der Darstellung (Templates) und generiert daraus statische HTML-Seiten. Das Ergebnis: schnellere Ladezeiten, geringerer Wartungsaufwand, bessere Suchmaschinenoptimierung.

Zwei Werkzeuge, zwei Arbeitsweisen

Manus.ai: Autonome Generierung

Im ersten Schritt kam Manus.ai zum Einsatz – ein KI-Agent, der komplexe Aufgaben weitgehend autonom durchführt. Ich habe ihm Zugriff auf mein Code-Repository gegeben und die gewünschte Struktur beschrieben: Startseite, Über-mich-Bereich, Dienstleistungen, Blog.

Manus analysierte den bestehenden Code, plante die Migration und generierte eine neue Projektstruktur. Nach jeder Iteration stellte er eine Vorschau-Version zur Begutachtung bereit. Ich konnte Feedback geben, er passte an. Dieser Prozess erfordert kein tiefes technisches Verständnis – man beschreibt, was man möchte, und bewertet das Ergebnis.

Wichtig: Für diese Phase habe ich ausschließlich Quellcode freigegeben. Keine sensiblen Daten, keine Kundendaten, keine Zugangsdaten.

Claude Code: Kontrollierte Implementierung

Die zweite Phase unterscheidet sich grundlegend. Claude Code nutze ich auf meinem Rechner, integriert in Cursor – eine Entwicklungsumgebung für Programmierer. Hier sehe ich jeden Befehl, jede Dateiänderung, jede Systeminteraktion.

Das bedeutet: Ich bin nicht mehr nur Auftraggeberin, sondern arbeite aktiv mit. Die KI schlägt Code vor, ich prüfe ihn, stelle Rückfragen, lasse mir Entscheidungen erklären. Das erfordert entweder technisches Vorwissen oder die Bereitschaft, sich in die Materie einzuarbeiten.

So sieht unsere Zusammenarbeit aus:

  • Dialog statt Delegation: Ich beschreibe, was ich erreichen will, lasse mich beraten, wir probieren Schritte aus. Bei Interesse an Details lasse ich mir den Code erklären.
  • Lernen festhalten: Was funktioniert (und was nicht), überführen wir in gemeinsame Regeln – eine Art Wissensspeicher für künftige Sessions.
  • Änderungen steuern: Ich entscheide, was committet wird. Die KI schlägt vor, ich gebe frei.
  • Best Practices recherchieren: Bei Unsicherheiten lasse ich die KI nach bewährten Vorgehensweisen suchen.
  • Funktionsprüfung: Ich teste, ob das Ergebnis meinen Vorstellungen entspricht – oft mit einer Checkliste, die ich mir für die jeweiligen Änderungen erstellen lasse.

Sicherheitsaspekte

Sicherheit entsteht bei dieser Arbeitsweise weniger durch klassisches Code-Review als durch bewusste Entscheidungen auf höherer Ebene:

  • Anbieter sorgfältig wählen: Server in der EU, Auftragsverarbeitungsverträge, Zertifizierungen prüfen – bevor ich einen Dienst einbinde.
  • Architektur verstehen: API-Schlüssel gehören in Umgebungsvariablen auf dem Server – nicht in den Browser, nicht ins Repository. Solche Grundprinzipien lasse ich mir erklären und achte darauf, dass sie eingehalten werden.
  • Dokumentation pflegen: Was verarbeitet wird und warum, halte ich in der Datenschutzerklärung fest. Die KI hilft beim Formulieren, ich prüfe auf Vollständigkeit.
  • Regeln etablieren: Best Practices, die wir gemeinsam recherchieren, werden in Projektregeln festgehalten – damit sie auch in künftigen Sessions gelten. Claude Code unterstützt das über sogenannte CLAUDE.md-Dateien [3].

Einordnung: Wann eignet sich welcher Ansatz?

Es gibt mittlerweile verschiedene Abstufungen von KI-gestützter Entwicklung:

Webbasierte Tools wie Lovable oder v0 generieren komplette Anwendungen aus Textbeschreibungen. Der Nutzer sieht den Code oft gar nicht. Das eignet sich für schnelle Prototypen oder einfache Projekte, bei denen Sicherheit und langfristige Wartbarkeit weniger relevant sind.

Integrierte Assistenten wie Claude Code oder GitHub Copilot arbeiten innerhalb einer Entwicklungsumgebung. Der Code ist sichtbar und editierbar. Das erfordert mehr technisches Verständnis, ermöglicht aber auch mehr Kontrolle.

Für diese Website habe ich beide Ansätze kombiniert: Manus für die initiale Struktur, Claude Code für die Ausarbeitung und Qualitätssicherung.

Fazit

Vibe Coding verändert, wie Software entsteht. Die Einstiegshürde sinkt, die Geschwindigkeit steigt. Aber die Verantwortung für das Ergebnis bleibt beim Menschen. Das erfordert weniger technisches Detailwissen als vielmehr die Fähigkeit, die richtigen Fragen zu stellen: Welche Anbieter sind vertrauenswürdig? Welche Architekturentscheidungen haben Konsequenzen? Was muss dokumentiert werden? Es ist ein gemeinsamer Prozess – die KI als Sparringspartner, nicht als Blackbox.

Quellen

[1] Karpathy, A. (2025). The Rise of Vibe Coding. Twitter/X. https://x.com/karpathy/status/1886192184808149383

[2] Astro Build. (2025). Official Documentation. https://astro.build/

[3] Anthropic. (2025). Using CLAUDE.md Files: Customizing Claude Code for Your Codebase. https://docs.anthropic.com/en/docs/claude-code/memory

Alle Artikel

Fragen, Ideen oder Feedback?

Kontakt