Neues Blog Design mit Claude Code

Nach über fünfzehn Jahren Flugwiese war es Zeit für ein neues WordPress-Theme. Die Themes von Elma-Studio werden ja seit 2023 nicht mehr gepflegt und zudem war auch das Design nicht mehr zeitgemäß. Also musste ein neues Theme her. Sowas kann man dann mehr oder weniger fertig im Internet finden – was allerdings fast immer mit Kompromissen behaftet ist – oder aber selber machen. Weil ich mich seit einiger Zeit mich intensiv mit Claude bzw. Claude Code beschäftige, wurde bei der Theme-Erstellung der Weg des selber machens mit KI-Unterstützung beschritten, den ich nachfolgend beschreibe.

Erst entwerfen, dann bauen: das neues Blog-Theme mit KI vorbereiten

Der naheliegende Weg im KI-Zeitalter wäre gewesen, einem Coding-Werkzeug einfach zu sagen: „Bau mir ein schönes WordPress-Theme für meinen Blog.“ Ich habe es bewusst anders gemacht – und bin überzeugt, dass sich der kleine Umweg auszahlt.

Die Idee dahinter ist simpel: Bevor auch nur eine Zeile Theme-Code entsteht, kläre ich in einer schnellen, billigen Vorstufe genau, wie das Ergebnis aussehen und funktionieren soll. Erst wenn das steht, bekommt das KI-Werkzeug (bei mir Claude Code) einen präzisen Bauplan. In diesem Beitrag beschreibe ich diese Planungs- und Vorbereitungsphase Schritt für Schritt – so, dass du sie ggf auch für deinen eigenen Blog nachvollziehen kannst.

Warum überhaupt planen, wenn die KI doch „einfach loslegen“ kann?

Der Reiz ist groß, direkt bauen zu lassen. Das Problem: Ein fertig gebautes Theme zu ändern ist teuer. Gefällt dir die Kopfzeile nicht, sitzt das Logo falsch oder stört ein Muster beim Lesen, muss die KI Templates, Stylesheets und womöglich Logik anfassen – jede Runde kostet nicht nur Zeit und Nerven sondern auch Tokens! Zudem verliert man schnell den Überblick, was eigentlich zusammengehört.

In der Entwurfsphase ist genau das umgekehrt: Eine Farbe, ein Abstand oder ein Layout in einer einfachen HTML-Seite zu ändern, ist eine Sache von Sekunden. Man probiert, verwirft, verbessert – ohne WordPress, ohne Datenbank, ohne Nebenwirkungen. Billig iterieren, bevor man teuer baut – das ist der ganze Trick.

Schritt 1: Klarheit schaffen – was soll das Theme können?

Bevor es ums Aussehen ging, habe ich die bestehende Seite analysieren lassen. Was für Inhalte habe ich eigentlich? Bei Flugwiese sind das vor allem lange Anleitungen mit vielen Bildern, Referenztabellen und teils riesigen Kommentar-Diskussionen. Daraus ergeben sich Anforderungen, an die man selbst nicht sofort denkt: ein automatisches Inhaltsverzeichnis für lange Beiträge, ein ordentlicher Code-Block, eine gute Druckansicht für die Werkstatt, ein Kommentarbereich, der auch bei Hunderten Einträgen funktioniert.

Wichtig war mir dabei ein Detail: Ich habe die KI ausdrücklich gebeten, bei Unklarheiten erst zu fragen, statt Annahmen zu treffen. So haben wir vorab die Grundsatzentscheidungen gemeinsam festgezurrt – zum Beispiel, dass es ein sogenanntes „Hybrid-Theme“ werden soll (eine Mischung, die sich klassisch im Code pflegen und trotzdem im modernen WordPress-Editor nutzen lässt), dass wir von Grund auf neu bauen, dass möglichst wenig Zusatz-Plugins nötig sein sollen und dass die Seite vorerst deutsch bleibt, aber später mehrsprachig werden könnte. Diese Entscheidungen klingen unspektakulär, sind aber Gold wert: Sie verhindern, dass die KI später in eine Richtung baut, die man gar nicht wollte.

Schritt 2: Design zum Anfassen – statische HTML-Entwürfe

Jetzt kam der visuelle Teil. Statt lange zu beschreiben, wie es aussehen soll, habe ich mir statische HTML-Seiten als Entwurf bauen lassen – also einzelne Dateien, die man im Browser öffnet und die schon fast wie die spätere Seite aussehen, aber ohne WordPress dahinter.

Als Ausgangspunkt diente das vorhandene Erscheinungsbild: Ich habe die typischen Farben meiner alten Seite herausgesucht (das kräftige Grün, das helle Grün des Hintergrunds, ein Orange als Akzent) und das bestehende Logo unverändert übernommen. Aus diesen Vorgaben entstanden zwei Entwürfe, die die beiden wichtigsten Seitentypen abbilden:

• die Startseite mit der Beitragsübersicht und der Seitenleiste,
• eine Artikelseite, also eine typische Anleitung mit Inhaltsverzeichnis, Bildern, Code-Block und Kommentaren.

Zwei Entwürfe reichen erstaunlich weit, weil fast alles andere (Kategorieseiten, Suche) sich aus diesen beiden ableitet. Wichtig ist, dass man die Inhalts-typischen Fälle abbildet – bei einem How-to-Blog eben eine echte Anleitung, nicht nur eine hübsche leere Seite.

Schritt 3: Der eigentliche Kern – geduldiges Verbessern

Der erste Entwurf ist nie der letzte, und genau das ist der Sinn der Übung. Hier ein paar echte Runden aus meinem Projekt, weil sie zeigen, worum es geht:

Das Logo saß zuerst klein oben links – ich wollte es aber groß und mittig, wie gewohnt. Eine Ansage, eine Minute später stimmte es. Der helle Hintergrund sollte exakt dem Grünton des Kopfbereichs entsprechen – kurz die Farbwerte angeglichen, passt. Ein besonders lehrreicher Moment: Auf meinem iPad war der Hintergrund plötzlich schwarz statt grün. Es stellte sich heraus, dass der automatische Nachtmodus des Tablets die helle Seite eigenmächtig abdunkelte – ein kleiner technischer Hinweis im Code (dem Browser sagen: „lass die Seite hell“) löste das. So etwas findet man nur, wenn man den Entwurf wirklich auf den echten Geräten anschaut.

Und schließlich das Lesen selbst: Der Fließtext lag anfangs direkt auf dem grünen Gittermuster, das störte. Also wanderte der komplette Beitrag in einen weißen „Kasten“, während Kommentare und verwandte Beiträge bewusst darunter auf dem grünen Untergrund blieben. Auch die Kommentare bekamen einen weißen Hintergrund, und die Seitenleiste der Artikelseite füllte sich mit sinnvollen Elementen statt nur dem Inhaltsverzeichnis.

Der Punkt hinter all dem: Jede dieser Änderungen war in Sekunden erledigt, weil wir noch im Entwurf steckten. Hätte ich das erst nach dem Bau des echten Themes bemerkt, wäre jede Runde deutlich aufwendiger gewesen. Am Ende hatte ich zwei Seiten, bei denen wirklich alles passte – Farben, Schriften, Abstände, Verhalten auf dem Tabelt und auf dem Smartphone.

Schritt 4: Vom Bild zum Bauplan – der Prompt für das Coding-Werkzeug

Jetzt erst kam die KI zum Bauen ins Spiel. Und auch hier wieder nicht mit einem lockeren Zuruf, sondern mit einem ausführlichen, schriftlichen Bauplan (im KI-Jargon: ein „Prompt“). Der entscheidende Kniff dabei: Die beiden HTML-Entwürfe sind die verbindliche Vorlage. Das Coding-Werkzeug muss sie nicht interpretieren, sondern nachbauen. Ein Bild sagt mehr als tausend Worte – gerade gegenüber einer KI.

In diesen Bauplan ist alles eingeflossen, was wir vorher entschieden hatten: die genauen Farbwerte und Schriften, die Maße und Umbruchpunkte für kleine Bildschirme, die Liste der Funktionen, die das neue WordPress-Theme selbst mitbringen soll (Inhaltsverzeichnis, Dark Mode, Druckansicht und so weiter), und eine Abnahme-Checkliste, an der man am Ende prüfen kann, ob wirklich alles da ist.

Zwei Dinge haben sich zusätzlich bewährt. Erstens eine kurze, dauerhafte Kontext-Datei (bei Claude Code heißt sie CLAUDE.md), die die wichtigsten Fixpunkte enthält und in jeder Arbeitssitzung automatisch mitgelesen wird – so „vergisst“ das Werkzeug über ein langes Projekt hinweg die Grundregeln nicht. Zweitens eine klare Abgrenzung, was nicht dazugehört: Das Aufräumen alter Inhalte (doppelte Kategorien, uralte Links, fehlende Vorschaubilder) habe ich in eine separate Anleitung ausgelagert. Ein Theme baut man, Inhalte pflegt man – das sauber zu trennen hält den Auftrag fokussiert.

Schritt 5: Und dann? Die Umsetzung

Erst jetzt baut Claude Code das echte WordPress-Theme – und zwar in kleinen, überprüfbaren Etappen: erst das Grundgerüst mit Kopf, Fuß und Farben, dann die Startseite, dann die Artikelseite, dann die Kommentare. Nach jeder Etappe halte ich den echten Stand neben den HTML-Entwurf und vergleiche. Weil die Vorlage eindeutig ist, gibt es wenig Diskussion darüber, ob etwas „richtig“ aussieht – es muss dem Entwurf entsprechen. Bei mir stand die Startseite nach kurzer Zeit, und die Artikelseite folgte.

Was ich daraus mitnehme – und wie du es selbst machst

Der rote Faden ist immer derselbe: Entscheidungen und Aussehen vorne klären, wo Änderungen billig sind, und der KI erst dann einen eindeutigen Bauplan geben. Das Verfahren funktioniert nicht nur für WordPress und nicht nur mit einem bestimmten Werkzeug – es passt für jedes Redesign, bei dem eine KI mitbaut.

Wenn du es für deinen eigenen Blog ausprobieren willst, ist das die Kurzfassung:

1. Bestandsaufnahme: Was für Inhalte hast du wirklich (lange Artikel, viele Bilder, Diskussionen)? Daraus ergeben sich die nötigen Funktionen.
2. Grundsatzfragen zuerst klären: Lass dir von der KI die offenen Entscheidungen vorlegen und beantworte sie, bevor irgendetwas gebaut wird.
3. Entwürfe als statisches HTML: Lass die ein bis zwei wichtigsten Seitentypen als einfache Browser-Seiten entwerfen – mit deinen Farben und deinem Logo.
4. Geduldig verbessern: So lange anpassen, bis wirklich alles passt – und dabei unbedingt auf Handy und Tablet anschauen. In dieser Phase ist Ändern billig.
5. Bauplan schreiben: Fasse alle Entscheidungen, Farbwerte und Funktionen schriftlich zusammen und erkläre die Entwürfe zur verbindlichen Vorlage.
6. In Etappen bauen und abgleichen: Lass das Theme Stück für Stück umsetzen und vergleiche jede Etappe mit dem Entwurf.
7. Aufräumen getrennt halten: Inhaltspflege ist eine eigene Aufgabe, nicht Teil des Theme-Baus.

Der Aufwand vorne wirkt wie ein Umweg, ist aber in Wahrheit eine Abkürzung: Man spart sich die zähen Korrekturschleifen am fertigen Produkt und weiß jederzeit, wohin die Reise geht.

Für mich war es die entspannteste Theme-Erneuerung seit 2016 – damals hatte ich wegen einer neuen WordPress-Version das erste, veraltete Elma-Studio Theme durch ein neues ersetzen müssen.
Der technische Teil der Umsetzung, das eigentliche Bauen des Themes mit Claude Code, werde ich bei passender Gelegenheit in einem zweiten Blog-Beitrag beschreiben.