Ein Prompt, ein gelöschter Branch und eine arbeitslose Aubergine

TL;DR: Ich wollte das Farbschema meiner Portfolio-Website mit Claude Design und Claude Code umbauen. Der erste Versuch mit einem großen, KI-generierten Prompt endete mit einem gelöschten Branch. Der zweite Versuch in kleinen, selbst angeleiteten Schritten hat funktioniert. Das Learning: Nicht die KI war das Problem, sondern die Größe der Aufgabe und die fehlende Kontrolle dazwischen.

Der Plan klang gut

Meine Portfolio-Website ist mein Playground für AI-assisted Design und Coding. Sie basiert auf Astro. Als Vorarbeit hatte ich das Design in einer früheren Session bereits auf Design Tokens umgestellt, die Farben liegen seitdem in einem schlichten Token-File. Naming Conventions etc. noch nicht perfekt, aber ein Anfang.

tokens.css mit Farb-, Typo- und Spacing-Tokens im Root-Block

Testweise habe ich das Design mit Claude Design überarbeitet: neue Primary Color, neue Secondary Color. Sah gut aus. Jetzt die Frage, wie bekomme ich das am schnellsten in meinen Code? Also habe ich Claude Design gebeten, gleich noch den Prompt für Claude Code zu schreiben.

Claude Design formuliert den Übergabe-Prompt für Claude Code, daneben die Portfolio-Vorschau mit der neuen Primary Color Aubergine

Der Prompt war lang, aber alles klang plausibel. Also alles rüber an Claude Code.

Rödeln, rödeln, rödeln

Und das Ding rödelt. Und rödelt. Und rödelt. Irgendwann dachte ich: Das wird offensichtlich nix. Wurde es auch nicht.

Ein Beispiel: Die neue Primary Color Aubergine Dark wurde nirgends genutzt. Sie saß im Token-File und wartete auf ihren Einsatz. Vergeblich. Logisch eigentlich, denn vorher gab es auch kein Sage Dark. Woher soll Claude Code wissen, wo ein Token eingesetzt wird, das es strukturell noch nie gab?

Erst da fiel mir auf, warum mir das beim Durchlesen nicht aufgefallen war: Ich hatte die Lücken im Prompt mit meinem Wissen über die Codebase ganz automatisch aufgefüllt. Claude Code konnte das nicht. Claude Design kennt meine Codebase nicht, die kenne nur ich. Der Prompt hat eine Struktur vorausgesetzt, die in meinem Code nicht existierte.

Branch gelöscht, Schritt zurück.

Zweiter Versuch: Struktur vor Farbe

Diesmal habe ich Claude Code selbst angeleitet, Schritt für Schritt:

Erst die bestehende Palette erweitern: Sage bekam Light- und Dark-Varianten. Dann die Tokens konsistent im gesamten Code nutzen. Und erst danach der Wechsel auf die neue Farbpalette. Einfache Struktur, einfacher Switch. Der eigentliche Farbwechsel, an dem der erste Versuch gescheitert war, dauerte am Ende kaum noch etwas. Auch die Aubergine kam endlich zum Einsatz.

Und später, in einem weiteren Schritt: Wechsel von Sage Dark zu Primary Dark. Denn ich wechsle meine Farben testweise so oft wie meine Unterhosen, also muss das Naming der Tokens semantisch sein. Dazu gehört auch, den Code zu überprüfen: Wo werden noch hart codierte Werte verwendet? Für eine saubere Nutzung der Tokens ist das der klassische Stolperstein.

Grep-Ergebnis: hardcodierte font-size-Werte über mehrere Astro-Seiten verteilt, statt konsistent auf Tokens zu verweisen

Meine Learnings

Refactor first, then change. Erst die Struktur sauber machen, dann die eigentliche Änderung. Der Farbwechsel war trivial, sobald die Token-Struktur stimmte. Das Scheitern davor war kein Claude-Problem, sondern ein Reihenfolge-Problem. Claude hätte dieses Vorgehen sogar anleiten können, wenn ich danach gefragt hätte. Aber zu wissen, wann man danach fragt, ist der Job des Menschen.

Zu große Tasks runterbrechen. Und zwar so weit, dass ich jedes Ergebnis selbst beurteilen kann. Das ist für mich das eigentliche Kriterium für „zu groß”: nicht die Zeilenzahl, sondern ob ich noch prüfen kann, was passiert ist.

Plan, Code, Judge. Und wieder von vorn. Nicht am Ende einmal kontrollieren, sondern nach jedem Schritt.

KI-zu-KI-Übergaben brauchen einen Menschen dazwischen. Der Prompt von Claude Design klang plausibel, weil ich ihn mit meinem Kontext gelesen habe. Claude Code hatte diesen Kontext nicht. Wer die Codebase kennt, muss die Übergabe machen, nicht die KI.

Git ist das Sicherheitsnetz. Änderungen im Code gehen wahnsinnig schnell. Versionierung ist für meine Experimente aktuell wichtiger denn je.

Warum das mehr ist als ein Farbwechsel

Das hier war ein Farbwechsel auf einer Portfolio-Seite, überschaubarer geht es kaum. Aber die Muster sind dieselben wie in jeder Mensch-KI-Zusammenarbeit: Aufträge so zuschneiden, dass ein Mensch das Ergebnis noch beurteilen kann. Wissen, wo bei Übergaben Kontext verloren geht. Und entscheiden, wann der Prozess einen Plan braucht, bevor jemand losrödelt. Genau diese Fragen stellen sich Teams gerade überall, wo KI in die Arbeit einzieht. Meine Website ist für mich der Ort, das end-to-end zu üben. Und manchmal, eigentlich eher öfter, geht das halt schief.