Wie man Claude Codes CSS-Raten mit einem Design-System behebt

Ein Entwickler, der ein Aktienanalyse-Dashboard mit Claude Code erstellte, stieß auf eine häufige Frustration: Die KI generierte wiederholt defektes CSS für denselben falsch ausgerichteten Div. Über sechs Iterationen hinweg scheiterten Versuche, Padding zu korrigieren, von Flex auf Grid umzustellen und overflow: hidden hinzuzufügen, oder verschlimmerten das Problem.

Das Problem: KI entwirft blind

Der Entwickler erkannte, dass Claude Code kein visuelles Feedback hat – es kann die Browserausgabe nicht sehen. Es erkennt Muster aus Beschreibungen und rät bei der Gestaltung, oft erzeugt es „technisch gültiges CSS, das aussieht, als wäre es von jemandem entworfen worden, der noch nie einen Computer benutzt hat“.

Die Lösung: Mit einem Designsystem einschränken

Statt einzelne Tokens zu geben, liefern Sie eine vollständige Designsystem-Spezifikation. Der Entwickler verwendete:

/* Abstände */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;

/* Farben */
--bg-primary: #0f1117;
--bg-card: #1a1d27;
--accent: #3b82f6;
--text-primary: #e2e8f0;
--text-muted: #64748b;
/* Typ-Skala */
--text-sm: 12px;
--text-base: 14px;
--text-lg: 18px;
--text-xl: 24px;

Dann anweisen: „Verwenden Sie nur diese Werte. Keine fest codierten Zahlen irgendwo.“ Dies gibt Claude einen Rahmen, von dem aus es schlussfolgern kann, anstatt eine leere Leinwand für willkürliche Entscheidungen.

Struktur- und Stil-Prompts trennen

Verlangen Sie niemals von Claude, gleichzeitig HTML und CSS zu schreiben. Der Entwickler teilte den Prozess auf:

• Erster Prompt: „Generieren Sie nur die HTML-Struktur für dieses Dashboard. Keine Style-Attribute, kein CSS, noch keine Klassen. Nur semantische Struktur.“
• Zweiter Prompt: „Schreiben Sie nun das CSS für diese Struktur unter ausschließlicher Verwendung des obigen Designsystems.“

Dies zwingt Claude, das HTML als festen Vertrag zu behandeln, bevor Stile angewendet werden, und verhindert, dass es den Überblick über Annahmen bezüglich seiner eigenen Ausgabe verliert.

Das Ergebnis: Die nächste Komponente ging von sechs Iterationen auf eine über. Der Entwickler stellte auch die Frage, ob dieses Designsystem über eine CLAUDE.md-Datei durchgesetzt werden könnte, um es nicht jede Sitzung einzufügen.