Mein größtes Website-Redesign seit Jahren – beim Frühstück abgeschlossen
Ich habe meine gesamte Website in 3 Tagen mit KI neu aufgebaut – nicht als Coding-Assistent, sondern als meinen echten Entwickler. Ich habe die Entscheidungen getroffen; Claude Code hat 28.000 Zeilen geschrieben.
Es ist 8:47 Uhr an einem Samstag. Ich esse ein vietnamesisches Schweinefleisch-Baguette (Banh Mi Heo Quay). Und ich habe gerade das letzte Stück des umfassendsten Redesigns meiner persönlichen Website seit 2021 deployed.
Fünf Jahre. So lange hatte ich nichts Wesentliches an meiner Website gemacht. Klar, ich hatte hier mal einen Text angepasst, da einen Blogbeitrag hinzugefügt. Aber das Design? Die Architektur? Das Gesamterlebnis? Unberührt seit dem Ende der Pandemie.
Heute Morgen habe ich das TRANSMISSION-Design-System fertiggestellt – ein vollständiges visuelles Redesign mit neuer Typografie, Farbpalette, Animationen und einer Premium-Produktseite. Aber das ist nur das Finale eines 3-tägigen Sprints, der alles verändert hat.
Die Zahlen:
- 40 Commits in 3 Tagen
- 28.129 hinzugefügte Code-Zeilen
- 4.950 neue CSS-Zeilen
- 11 CSS-Dateien (von vorher 1)
- Vollständiges Dark-Mode-System
- Mobile-first, überall responsiv
- Benutzerdefinierte Produktseite mit echten Screenshots
Gesamtzeit für das gesamte Redesign: ein paar Stunden über 3 Tage. 36 Commits an Tag 1 allein. Der abschließende Push heute: 30 Minuten beim Frühstück.
Kein Designbüro. Keine Figma-Mockups. Kein mehrstündiger Zeitplan. Nur ich und Claude Code. :D
Hier ist etwas, das ich klarstellen muss: Ich habe keine einzige Zeile CSS geschrieben. Ich habe nicht das PHP geschrieben. Ich habe die Deployment-Befehle nicht manuell ausgeführt. Claude Code hat 100 % der Implementierung übernommen – das Design, den Code, die Git-Commits, das Deployment. Ich habe nur Entscheidungen getroffen. „Mehr Glow." „Diese Schrift fühlt sich falsch an." „Mach die Karten premium."
So sieht KI-gestützte Entwicklung tatsächlich in 2026 aus.
---
Der Ausgangspunkt: Vernachlässigt seit 2021
Ich will ehrlich sein, wo ich stand.
Meine Website am 1. Januar 2026:
- Eine CSS-Datei mit 700 Zeilen Spaghetti-Code
- Poppins-Schrift für alles (die „Ich habe mir wirklich keine Gedanken über Typografie gemacht"-Wahl)
- Kein Design-System – Farben überall hardcodiert
- Einfacher Dark Mode, der auf der Hälfte der Seiten kaputt war
- Produktseite: Keine Produktseite, die gesamte Website ist nur der Blog.
- Mobile Erfahrung, die „responsiv" war, genauso wie ein billiger Anzug „passt"
Ich hatte mich so sehr auf meinen Hauptjob konzentriert, Generative KI zu lernen und dann STRAŦUM und DIALØGUE zu entwickeln – meine zwei KI-Anwendungen –, dass meine persönliche Website zum Schuster geworden war, dessen Kinder keine Schuhe haben.
Jedes Mal, wenn ein potenzieller Kunde oder Kollaborateur die Website besuchte, sah er eine Seite, die schrie: „2021 hat angerufen, sie wollen ihr WordPress-Theme zurück."
---
Warum jetzt? Und warum so?
Ende 2025 passierten zwei Dinge:
Erstens habe ich STRAŦUM und DIALØGUE ausgeliefert. Zwei Produktions-KI-Anwendungen, solo gebaut, während ich meinen Hauptjob als VP einer globalen Werbeagentur behielt. Echte Nutzer, echte Umsatzdiskussionen, echte Glaubwürdigkeit auf dem Spiel.
Meine persönliche Website war jetzt die Eingangstür zu echten Produkten. Sie musste mithalten.
Zweitens begann ich Claude Code ernsthaft zu nutzen. Nicht als Chatbot. Als Entwicklungsumgebung. Und ich entdeckte etwas, das alles veränderte: das `frontend-design`-Plugin.
Dieses Plugin schreibt nicht nur CSS. Es denkt über Design nach. Typografie-Paarungen. Farbtheorie. Räumliche Komposition. Es ist das, was verhindert, dass KI-generierter Code wie „KI-Schlickwerk" aussieht.
Ich dachte: Was, wenn ich einfach... alles neu aufbaue? Nicht als Wochenend-Hack. Sondern ordentlich. Mit einem echten Design-System. Mit Claude Code, das die schwere Arbeit macht, während ich Entscheidungen treffe.
---
Der 3-Tage-Sprint: Was wirklich passierte
Tag 1: Der Urknall – 36 Commits
Ich hatte nicht geplant, an einem Tag 36 Commits zu machen. Aber einmal angefangen, konnte ich nicht aufhören.
Erstes Setup, bestehendes Theme gesichert, mit der CSS-Modularisierung begonnen.
Die gesamte CSS-Architektur neu aufgebaut. Diese eine 700-Zeilen-Datei wurde zu:
```
css/
├── style.css # Nur Design-Tokens
├── components.css # Buttons, Karten, Navigation
├── homepage.css # Hero, Produkte, Beitragsabschnitte
├── about.css # Seiten-spezifisch
├── blog.css # Blog-Archiv
├── dark-mode.css # Vollständiges Dark-Mode-System
├── mobile-nav.css # Untere Navigationsleiste
├── search.css # Such-Overlay
├── single-post.css # Blog-Beitrag-Typografie
└── products.css # Premium-Produktseite
```
Jede Datei hat eine Aufgabe. Jede Datei verwendet CSS-Variablen aus dem Root. Kein langes Suchen durch 700 Zeilen mehr, warum ein Button die falsche Farbe hat. :P
Dark-Mode-Überarbeitung. Mein alter Dark Mode war peinlich – Text, der verschwand, Buttons ohne Kontrast. Ich habe ihn von Grund auf neu gebaut:
- 658 Zeilen dedizierter Dark-Mode-CSS
- Ordentliche Kontrastverhältnisse (WCAG-konform)
- Alle 89 !important-Deklarationen entfernt (ja, 89)
- Semantische Farb-Tokens, die automatisch wechseln
Am Ende des Tages: Homepage neu gestaltet, About-Seite neu aufgebaut, mobile untere Navigation hinzugefügt, Newsletter-Integration fertig. 36 Commits.
Tag 2: Architektur & Infrastruktur – 9 Commits
Tag 2 drehte sich darum, alles wartbar zu machen.
Das große Refactoring: functions.php schrumpfte von 724 Zeilen Chaos auf 25 Zeilen sauberer Includes:
```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```
Außerdem Docker für lokale Entwicklung eingerichtet, ein GCP-Sicherheitsaudit durchgeführt und Dokumentation geschrieben.
Tag 3: Das TRANSMISSION-Finale – Der Frühstücks-Sprint
Hier hat das frontend-design-Plugin seinen Wert bewiesen.
Ich beschrieb, was ich wollte: „Retro-futuristisch. Analoge Vergangenheit trifft digitale Zukunft. Premium, aber nicht korporativ. Technisch, aber warm." Dann bin ich frühstücken gegangen.
Als ich mit meinem Bánh Mì zurückkam, hatte Claude Code das vollständige TRANSMISSION-Design-System erstellt:
Typografie:
- Playfair Display – Überschriften (elegant, redaktionell)
- DM Sans – Fließtext (klar, lesbar)
- JetBrains Mono – Code und Daten (technische Glaubwürdigkeit)
Farben:
```css
--color-cream: #fffbeb; /* Warmer Hintergrund */
--color-navy: #0f172a; /* Tiefes Primär */
--color-cyan: #22d3ee; /* Energie-Akzent */
--color-amber: #f59e0b; /* Warmer Akzent */
```
Fluid-Typografie:
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
Überschriften skalieren automatisch von Mobil bis Desktop. Keine Media Queries nötig.
Dann widmete ich mich der Produktseite. Die Seite, die nur Text war, wurde zu:
Hero-Bereich:
- Terminal-artiger Eyebrow-Text
- Playfair-Überschrift: „What I'm Building"
- Stats-Leiste: 2 Live Platforms | 99,7 % Performance Gain | 92 % Cost Reduction
- Schwebende geometrische Formen mit subtilen Animationen
Produktkarten:
- Premium Navy-Gradient-Hintergründe
- Echte Screenshots aus Produktions-Websites (keine Mockups)
- Browser-Frame-Container mit Fensterkontrollpunkten
- Hover-Zustände mit Cyan/Amber-Glows
- Feature-Listen mit Pfeilmarkierungen
- Volle CTA-Breite
Die Screenshots allein waren eine Reise. Claude Code navigierte zu meinen Produktions-Websites, erfasste die Seiten, optimierte sie von 1,8 MB auf 229 KB (86 % kleiner) und bettete sie in gestaltete Container ein.
---
Der Stack: Überraschend einfach
Hier ist alles, was ich verwendet habe:
Claude Code – Die KI, die Code schreibt, Befehle ausführt und Kontext behält. Das ist eine KI, die Zugang zu meinem Dateisystem hat, Git-Befehle ausführen kann und sich daran erinnert, was wir gestern gebaut haben.
frontend-design Plugin – Der Unterschied zwischen „KI-generiertem CSS" und „CSS, das gestaltet aussieht." Typografietheorie, Farbbeziehungen, räumliche Komposition eingebaut.
Docker – Lokale WordPress-Entwicklung. Ein docker-compose up und ich habe einen Produktionsspiegel.
Chrome DevTools MCP – Claude Code kann einen Browser steuern. „Mobilen Dark Mode prüfen" → echter Screenshot der gerenderten Seite. Kein Tab-Wechseln.
gcloud CLI: das Claude steuert
---
Die ehrlichen Teile
Das war keine Magie. Dinge liefen schief:
Verschachtelter Ordner-Chaos: Docker-Copy erstellte eine gambit-child/gambit-child/-Struktur. 10 Minuten zum Debuggen.
Dark-Mode-Text verschwand: Einige Überschriften erbten falsche Farben. Behoben durch spezifischere Selektoren.
Bildoptimierung: Rohe Screenshots waren riesig. Musste lernen, dass sips -Z 800 auf macOS Bilder ohne externe Tools skaliert.
WordPress-Template-Zuweisung: Vergessen, dass die neue Produktseite in WP-Admin zugewiesen werden musste. Klassiker.
Der Unterschied ist, dass das Debuggen Minuten dauerte, nicht Stunden. Claude Code konnte die gerenderte Seite sehen, das Problem identifizieren und Lösungen im selben Gespräch vorschlagen.
---
Vorher & Nachher: Die Zahlen
| Metrik | 1. Januar 2026 | 10. Januar 2026 |
|--------|-----------------|------------------|
| CSS-Dateien | 1 | 11 |
| CSS-Zeilen | ~700 | 4.950 |
| PHP-Architektur | Monolithisch | Modular (6 Dateien) |
| Typografie | 1 Schrift | 3-Schrift-System |
| Farb-Tokens | ~5 hardcodiert | 15+ semantisch |
| Dark Mode | Kaputt | 658 Zeilen, WCAG-konform |
| Produktseite | Reiner Text | Premium mit Screenshots |
| Mobile Nav | Keine | Untere Leiste mit 6 Aktionen |
| Animationen | 0 | 7 (fadeInUp, float, glow, etc.) |
| Letzte große Aktualisierung | 2021 | Heute |
Gesamte Transformation: 28.129 Zeilen in 123 Dateien in 40 Commits über 3 Tage hinzugefügt. Alles von Claude Code geschrieben.
---
Was das gekostet hat
Geld: $0 für Design. Claude Code-Abonnement. GCP-Hosting, das ich bereits hatte.
Zeit: 3 Tage vergangen. Aber meine tatsächliche aktive Zeit? Vielleicht 2–3 Stunden insgesamt. Ich habe beschrieben, was ich wollte, Claude Code hat es gebaut, und ich habe später zurückgeschaut, um zu überprüfen. Heute Morgen habe ich das finale Redesign gestartet, bin zum Frühstück gegangen und zurückgekehrt, um zu bestätigen – 30 Minuten tatsächliche Aufmerksamkeit.
Mein tatsächlicher Beitrag: Null Code-Zeilen. Ich habe beschrieben, was ich wollte, überprüft, was Claude Code gebaut hat, und Dinge gesagt wie „Der Hover-Zustand braucht mehr Glow" oder „Dieser Abstand fühlt sich falsch an."
Vergleich: Ein Designbüro hätte für diesen Umfang 8–12 Wochen und über $10.000 angeboten. Und ich hätte ihre Figma-Dateien noch selbst implementieren müssen.
---
Was ich gelernt habe
1. Ich bin kein Entwickler mehr – ich bin ein Creative Director. Claude Code hat jede Code-Zeile geschrieben. Ich habe Geschmacksentscheidungen getroffen. „Diese Animation ist zu langsam." „Das Cyan braucht im Dark Mode mehr Glow." „Mach die Hero-Stats prominenter." Das ist eine fundamental andere Fähigkeit als Programmieren.
2. Erst modularisieren. Claude Codes erster Instinkt war, die Codebasis in logische Dateien aufzuteilen, bevor visuelle Änderungen vorgenommen wurden. Jede nachfolgende Änderung war einfacher wegen dieses Fundaments.
3. Design-Systeme wachsen exponentiell. Sobald TRANSMISSION-Tokens existierten, war jede neue Komponente nur die Kombination vorhandener Variablen. Die Produktseite dauerte 45 Minuten, weil das System bereits vorhanden war.
4. Das frontend-design Plugin macht den Unterschied. Regulärer KI-generierter CSS sieht aus wie „KI-Schlickwerk" – generisch, sicher, vergesslich. Das frontend-design Plugin denkt über Typografie-Paarungen, Farbtheorie und räumliche Komposition nach. Deshalb sieht das hier nicht KI-generiert aus.
5. Inkrementell ausliefern. 40 Commits, nicht 1. Jedes Teil ging live, sobald es fertig war. Claude Code hat den Git-Workflow übernommen – Staging, Commit, Push, PRs erstellen.
---
Das selbst ausprobieren
Wenn deine persönliche Website seit 2021 „gut genug" war:
1. Claude Code installieren mit dem frontend-design-Plugin
2. Die Stimmung beschreiben, die du willst (meine: „retro-futuristisch, Analog trifft Digital")
3. Mit Architektur beginnen – modularisieren, bevor man verschönert
4. Das Design-System aufbauen – Tokens, Typografie, Farben
5. Dann Seiten bauen – jede nutzt das System, das du erstellt hast
6. Oft deployen – nicht auf „fertig" warten
Das Schwierigste ist nicht die Technologie. Es ist die Entscheidung, wie deine Website sich anfühlen soll.
Wenn du das einmal weißt, ist der Rest ein Gespräch.
Update: Diese Lektion über Geschmack statt Implementierung wurde noch deutlicher, als ich begann, eine native iOS-App zu bauen, ohne Swift zu kennen. Claude hat 7.568 Code-Zeilen an einem Abend erstellt – aber die „Creative Director"-Arbeit, sie richtig anfühlen zu lassen? Das ist nach wie vor vollständig menschliche Arbeit.
Wann hast du zuletzt etwas neu aufgebaut, das du jahrelang aufgeschoben hattest? Was hat dich schließlich dazu gebracht, anzufangen – und wie hat es sich angefühlt, als es fertig war?
Viele Grüße,
Chandler
---
*Immer noch bauen, immer noch liefern, immer noch das Bánh Mì genießen.*
---
