Case Study · Vibe Coding

Von WordPress
zu eigenem Code — in 12 Tagen.

Wie ich futurhinos-kids.de ohne Plugin-Bauchschmerzen, ohne Theme-Frust und ohne eine einzige Zeile selbst getippten Code neu gebaut habe. Mit Claude Code als Co-Autor.

12
Tage von Idee bis Livegang
21
HTML-Seiten, vollständig statisch
0
Plugins, Themes, Datenbank
1
Person — ich, mit KI

Ausgangslage

Warum die alte WordPress-Seite weg musste

Wartung statt Inhalt

Jedes Mal, wenn ich etwas an der Seite ändern wollte, ging die halbe Zeit für Plugin-Updates, Backups und Kompatibilitäts-Checks drauf. Für eine Seite, die sich inhaltlich pro Monat vielleicht zweimal ändert, war das schlicht zu viel.

Theme-Korsett

Das gekaufte Theme konnte 80 % von dem, was ich wollte. Die letzten 20 % waren immer Workarounds, Custom-CSS-Snippets und Page-Builder-Tricks. Statt einer Seite, die mich repräsentiert, hatte ich eine, die dem Theme ähnelt.

Ladezeit & Tracker

Plugins ziehen Plugins nach: Cookie-Banner, Analytics, Schriften von Google-Servern, Bilder ohne Kompression. Bei Kids-Themen ist mir Datenschutz besonders wichtig — ich wollte eine Seite, die keine Drittanbieter mitlädt.

Sicherheits-Risiko

WordPress mit aktiven Plugins ist die meist-angegriffene Software im Netz. Eine statische HTML-Seite ohne Datenbank, ohne Login, ohne PHP-Backend kann man schlicht nicht hacken.

Methode

Was ist Vibe Coding?

Statt selbst Code zu tippen, beschreibe ich, was ich will. Eine KI baut. Ich review. Ich ändere ab. Die KI baut nach. Bis es passt.

Konkret heißt das für diese Seite: Ich sitze vor Claude Code im Terminal und sage Dinge wie „Bau mir eine Seite für unsere Pfingstferien — drei Kurse, je eine Karte mit Bild, Uhrzeit, Alter, Preis und Anmelde-Button". Ein paar Sekunden später liegt eine Datei vor, die ich im Browser öffnen, anschauen und Stück für Stück anpassen kann.

Ich muss nicht wissen, wie man ein CSS-Grid baut. Ich muss wissen, wie meine Seite aussehen soll — und das in Worte fassen können. Die KI ist die Hand am Stift, ich bin die Architektin.

Vibe Coding Talk anschauen →

Tech-Stack

Was unter der Haube läuft

Bewusst klein. Bewusst langweilig. Jedes Stück Technik muss sich rechtfertigen.

📄

Statisches HTML & CSS

Kein Framework, kein Build-Step, keine Node-Modules. Jede Seite ist eine einzelne `.html`-Datei. Wenn der Browser sie öffnet, ist sie sofort da.

🤖

Claude Code

Anthropic's CLI für Entwickler. Liest und schreibt Dateien direkt im Projekt, führt Befehle aus, kann ganze Refactorings übernehmen. Mein Co-Autor.

📬

Web3Forms

Für Kontaktformulare ohne eigenes Backend. Ein Endpoint, eine Mail kommt an. Keine Datenbank, kein Server. DSGVO-konform mit AVV.

🏠

Alfahosting

Mein bestehender Webspace in Deutschland. Der gleiche Tarif wie für die alte WordPress-Seite — ich brauche jetzt nur einen Bruchteil davon.

🔤

Self-hosted Fonts

Manrope und Nunito liegen als `.woff2`-Datei auf meinem Server. Kein Google-Fonts-CDN, keine IP-Übertragung in die USA, keine Cookie-Pflicht.

🗂

Git (lokal)

Versionierung für Sicherheit. Jeder Schritt commit-bar, jeder Fehler rückbar. Kein Github-Repo nötig — der Workflow läuft komplett lokal.

12 Tage

Der Prozess, ehrlich

Vom ersten Prompt am 19. Mai bis zum Livegang am 31. Mai 2026.

Tag 1 — 19. Mai

Inhalte sammeln, Struktur skizzieren

Alte Seite durchgehen, Inhalte ausschneiden. Sitemap auf Papier. Welche Seiten brauche ich wirklich? 21 sind es geworden — vorher 30+.

Tag 2–4

Design-System & Startseite

Farben, Schriften, Abstände einmal sauber als CSS-Variablen anlegen. Danach geht alles schneller. Startseite als Referenz für den Rest.

Tag 5–7

Ferien-Camps und Geburtstage

Die Seiten, wo Familien wirklich landen. Pfingsten, Sommer, Ostern. Minecraft- und Agenten-Geburtstage. Jeweils mit Programm, Preisen, Anmelde-Mailto.

Tag 8–9

Rechtstexte & Team-Seiten

Impressum, Datenschutz, FAQ. Profile von Astrid und René. Die unglamouröse Hälfte, ohne die nichts live geht.

Tag 10–11

Test-Stage auf Alfahosting

Neue Seite landet im Unterordner /neu/, alte Seite läuft parallel weiter. Auf Handy, Tablet, Laptop. Formular testen. Kleine Fixes.

Tag 12 — 31. Mai 🚀

Livegang

Backup, Dateien tauschen, 301-Redirects. Drei Stunden später läuft alles — und ich habe keine Plugins mehr.

Visuell

Vorher · Nachher

Platzhalter: Nach Livegang am 31. Mai hier zwei Screenshots einfügen — links die alte WordPress-Startseite (am besten noch vor dem Umzug per Screenshot festhalten!), rechts die neue Seite. Idealerweise gleicher Bildausschnitt, gleicher Browser, gleiche Bildschirmgröße.

Vorher (WordPress)

Screenshot folgt nach Livegang

Nachher (Vibe Coding)

Screenshot folgt nach Livegang

Lessons Learned

Was ich gelernt habe

Platzhalter: Diese drei Punkte nach dem Livegang mit einem konkreten Erlebnis aus dem Projekt ergänzen — was war überraschend einfach, wo bin ich hängengeblieben, was würde ich nächstes Mal anders machen?

Inhalte sind die Arbeit

Das eigentliche Bauen ging schnell. Was Zeit gekostet hat: Texte schreiben, entscheiden, was raus muss, Bilder aussuchen. Genau wie bei WordPress — nur ohne den Technik-Overhead obendrauf.

Prompten ≠ Coden

Ich muss kein Code schreiben können. Ich muss wissen, was ich will, und es so beschreiben können, dass die KI es bauen kann. Das ist eine Fähigkeit, die man lernen kann — und die im Coaching kommt.

Klein bleiben darf man

Ich brauche kein CMS, kein Headless-Setup, keinen Build-Server. Für eine Seite, die ich pro Monat zweimal ändere, sind 21 HTML-Dateien die ehrliche Lösung — nicht die nostalgische.

Lust, Deine eigene Seite zu bauen?

Im 1:1 Coaching „Selber bauen mit KI" machen wir das zusammen — mit Deinen Inhalten, Deiner Domain, Deinem Tempo. Du lernst, wie Du eigene digitale Tools mit KI baust, ohne abhängig zu werden.

Coaching ansehen Kontakt aufnehmen