+33-9-7266-3068
contact@gdm-pixel.fr
TL;DR
Ist Ihr Design System wirklich KI-bereit?
Ein Kunde rief uns vor einigen Wochen an. Seine vorherige Agentur hatte ihm eine “moderne” Website geliefert, mit einem gut dokumentierten Design System, sauberen Figma-Komponenten, einer tadellosen Markenidentität. Doch als er versuchte, ein KI-Codegenerierungstool zu integrieren, brach alles zusammen. Die Tokens waren nicht konsistent benannt, die Abstände gehorchten keiner systemischen Logik, und die vertikale Zentrierung seiner Blöcke war mit hardcodierten margin-top: 47px gelöst.
Ergebnis: Die KI generierte unbrauchbaren Code. Der Integrator musste alles von Hand nacharbeiten. Drei Wochen verloren.
Das ist kein Einzelfall. Es ist die Regel.
Zwei scheinbar unterschiedliche Themen — ein Design System KI-kompatibel machen und die vertikale Zentrierung in CSS beherrschen — erzählen in Wirklichkeit dieselbe Geschichte: Was wir nicht korrekt industrialisiert haben, kostet uns am Ende Zeit, Geld und Nerven.
Hier ist, was wir auf beiden Fronten gelernt haben, und wie wir es bei GDM-Pixel anwenden.
Warum aktuelle Design Systems die KI scheitern lassen
KI liest nicht zwischen den Zeilen. Sie “versteht” nicht, dass #1A2B3C Ihre Primärfarbe ist, wenn Sie sie nicht color-primary-600 genannt haben. Sie rät nicht, dass Ihr 24px-Abstand Ihrer Rastergrundlage entspricht, wenn Sie ihn in jeder Komponente hardcodiert haben.
Code-Generierungstools — ob Claude Code, Copilot, Cursor oder ein beliebiger Agent, der mit Ihrer Codebase verbunden ist — arbeiten durch Mustererkennung. Sie suchen nach Konsistenz, Vorhersehbarkeit, expliziten Konventionen.
Ein “KI-fähiges” Design System ist kein komplexeres Design System. Es ist ein saubereres. Das ist genau das, was wir analysieren, wenn wir Codequalität als das unsichtbare Handwerk betrachten, das eine gute Website von einer performenden Website trennt.
Hier ist, was das konkret in unserem Workflow verändert:
Semantische Tokens, keine rohen Werte
Der Unterschied zwischen --color-blue-500 und --color-action-primary ist der Unterschied zwischen einem Wert und einer Intention. KI versteht Intentionen. Sie weiß nichts mit einem verwaisten Wert anzufangen.
Bei GDM-Pixel haben wir alle unsere Tokens zu einer semantischen Nomenklatur in drei Schichten migriert:
- Primitive Schicht: die rohen Werte (
blue-500: #3B82F6) - Semantische Schicht: die Verwendung (
action-primary: blue-500) - Komponenten-Schicht: der Kontext (
button-background-default: action-primary)
Wenn Claude Code in diesem Kontext einen Button generiert, verwendet es button-background-default, ohne dass wir es angeben müssen. Der Token trägt die Information. Das ist ein maschinennutzbares System.
Dokumentation strukturiert wie eine API
Ihr Design System muss von einem Menschen lesbar UND von einer KI parsbar sein. Das ist kein Widerspruch — das ist Strenge.
Konkret: Token-Dateien in JSON oder CSS custom properties, Komponenten mit explizit benannten Varianten dokumentiert, Zustände (default, hover, disabled, error) immer vorhanden und konsistent.
“Ein gut strukturiertes Design System für KI ist vor allem ein gut strukturiertes Design System für Menschen. Die Maschine enthüllt Ihre Inkonsistenzen.”
Was wir in unseren Audits sehen: Systeme, bei denen der primäre Button je nach Figma-Datei, Storybook und Code 4 verschiedene Namen hat. Für einen Menschen ist das lästig. Für eine KI ist es blockierend.
Abstände basierend auf einer Skala, nicht auf Näherungswerten
margin: 47px. Wir sehen es noch immer. Zu oft.
Eine KI, die Code generiert, sucht nach Mustern. Wenn Ihre Abstände einer Skala folgen (4, 8, 12, 16, 24, 32, 48, 64), kann sie inferieren. Wenn Ihre Werte zufällig sind, improvisiert sie — und die Improvisation einer KI bei magischen Werten ergibt wegwerfbaren Code.
Die Regel, die wir seit zwei Jahren bei GDM-Pixel anwenden: Null hardcodierte Abstands-Werte außerhalb von Tokens. Alles läuft über --spacing-4, --spacing-6, usw. Das klingt anfangs einschränkend. Es spart am Ende Stunden.
Vertikale Zentrierung in CSS: die finale Episode (wirklich)
Sprechen wir über das Thema, das Generationen von Integratoren gequält hat. Vertikale Zentrierung in CSS.
Seit CSS Flexbox und Grid ist es kein Problem mehr. Aber wir sehen weiterhin Hacks in 2024 gelieferten Codebases. line-height-Werte gleich der Container-Höhe. position: absolute mit top: 50% und transform: translateY(-50%). HTML-Tabellen zum Zentrieren von Inhalten.
Warum hält das an? Weil Teams keine gemeinsame Regel haben. Jeder Integrator hat seine bevorzugte Technik. Und eine KI, die Code in diesem chaotischen Kontext generiert, wird das Chaos reproduzieren.
So standardisieren wir es.
Flexbox: die Lösung für 90% der Fälle
Für die vertikale Zentrierung in einem Container ist Flexbox die Standardantwort in unserem Stack:
.container {
display: flex;
align-items: center; /* vertikale Zentrierung */
justify-content: center; /* horizontale Zentrierung falls nötig */
}Zwei Zeilen. Lesbar. Vorhersehbar. Überall unterstützt.
Für Fälle, in denen der Container die gesamte verfügbare Höhe einnehmen muss, fügen wir min-height: 100dvh hinzu (mit dvh statt vh, um Probleme auf Mobilgeräten mit Navigationsleisten zu vermeiden). Das ist eine Entscheidung, die wir in unserem Design System standardisiert haben — ein --height-screen-Token, der auf 100dvh zeigt.
CSS Grid: wenn in beiden Dimensionen zentriert wird
Für komplexere Layouts — ein Hero-Bereich, ein Modal, ein Splash Screen — ist Grid ausdrucksstärker:
.container {
display: grid;
place-items: center; /* Kurzform für align-items + justify-items */
}place-items: center ist wahrscheinlich die am meisten untergenutzte CSS-Eigenschaft im Jahr 2025. Ein Wort. Zwei Achsen. Perfekte Zentrierung. Dieser Ansatz fügt sich in die Webdesign-Trends 2026 ein, wo modernes CSS die Art der Website-Erstellung transformiert.
Warum das in Ihrem Design System standardisieren
Die Frage ist nicht “welche Technik ist besser”. Die Frage ist: Verwendet Ihr gesamtes Team (und Ihre KI) dieselbe Technik in denselben Kontexten?
In unserem Design System haben wir drei Zentriermuster dokumentiert:
Muster center-flex — zum Zentrieren von Inhalt in einem Fluss (Navigation, Cards, Buttons) Muster center-grid — zum Zentrieren in einem definierten Raum (Modals, Heroes, Overlays) Muster center-text — für reine typografische Zentrierung (text-align: center + margin-inline: auto)
Jedes Muster hat seinen CSS-Token, seine Utility-Klasse in Tailwind und seine Dokumentation in Storybook. Wenn wir Claude Code bitten, eine Komponente zu generieren, weiß es je nach Kontext, welches Muster zu verwenden ist. Null Mehrdeutigkeit.
“Standardisierung ist keine kreative Einschränkung. Sie ist das, was der Maschine erlaubt, Sie von repetitiven Aufgaben zu befreien.”
Was das wirklich in der Produktion verändert
Wir haben diese Prinzipien auf Nova Mind industrialisiert — unserem SaaS in Produktion. 21 Seiten in 10 Stunden geliefert. Das ist keine Magie. Es ist das direkte Ergebnis eines Design Systems, das die KI ohne Reibung konsumieren kann.
Konkret, hier ist, was sich verändert:
Komponentengenerierung: Claude Code generiert beim ersten Versuch eine mit unserer Markenidentität konsistente Komponente, ohne Korrekturiterationen bei Farben oder Abständen. Einsparung: 45 Minuten pro Komponente bei einem Standardprojekt.
Code-Review: Der Integrator muss nicht mehr hinter der KI aufräumen, um hardcodierte Werte oder inkonsistente Zentriertechniken zu korrigieren. Die Überprüfung konzentriert sich auf die Logik, nicht auf den Stil.
Onboarding: Ein neuer Entwickler (oder ein KI-Agent) versteht das System durch das Lesen der Tokens. Kein 40-seitiges Dokument nötig, das in sechs Monaten veraltet ist.
Der Gewinn ist nicht hypothetisch. Bei den letzten drei Kundenprojekten, die diesen Workflow integrieren, haben wir die Front-End-Integrationszeit um durchschnittlich 60% reduziert.
Drei konkrete Maßnahmen zum Einstieg
Sie müssen Ihr Design System nicht in einer Woche neu aufbauen. Hier ist, womit Sie beginnen sollten, in Reihenfolge der Priorität:
1. Prüfen Sie Ihre hardcodierten Werte. Suchen Sie in Ihrer Codebase nach allen px-Werten, die keine Tokens sind. Das ist Ihre sichtbarste technische Schuld. Bei einem mittelgroßen Projekt dauert diese Arbeit einen halben Tag und zeigt sofort die Reibungspunkte.
2. Benennen Sie Ihre Tokens nach Intention, nicht nach Wert. Benennen Sie --blue-500 in --color-action-primary um. Diese Änderung allein verbessert die Lesbarkeit für Ihr Team und das Verständnis für eine KI.
3. Standardisieren Sie Ihre Zentriermuster. Wählen Sie Flexbox oder Grid je nach Kontext, dokumentieren Sie die Regel, erstellen Sie die entsprechenden Utility-Klassen. Verbieten Sie Hacks in Ihren Beitragsrichtlinien.
Diese drei Maßnahmen erfordern kein Budget. Sie erfordern Strenge und eine Stunde Team-Meeting zur Ausrichtung aller. Wenn Sie ein Projekt von Grund auf starten, integrieren sich diese Prinzipien natürlich bereits in der Phase der professionellen Website-Erstellung.
Das etwas unbequeme Fazit
Die meisten Agenturen werden weiterhin Design Systems liefern, die KI nicht nutzen kann. Nicht aus mangelnden Kompetenzen — aus mangelnder Methode.
Die Kunden ihrerseits werden weiterhin Integrationsstunden für Aufgaben bezahlen, die eine gut konfigurierte KI in Minuten erledigen würde. Und wenn sie entdecken, dass es anders geht, werden sie die Agentur wechseln.
Bei GDM-Pixel haben wir die entgegengesetzte Wahl getroffen: unsere Methode industrialisieren, dokumentieren, öffentlich zugänglich machen. Weil ein KI-fähiges Design System kein Wettbewerbsvorteil ist, den wir geheim halten — es ist ein Standard, der sich in den nächsten zwei Jahren für alle durchsetzen wird.
Besser, man ist voraus.
Möchten Sie, dass wir Ihr Design System oder Ihren Front-End-Stack prüfen? Wir machen das in 3 Tagen. Ehrliche Diagnose, umsetzbare Empfehlungen, kein Fachjargon. Kontaktieren Sie GDM-Pixel — wir sagen Ihnen, was wirklich blockiert, nicht was Sie hören wollen.
Quellen und Referenzen: CSS Tricks — A Complete Guide to Flexbox, Smashing Magazine — Design Tokens, MDN Web Docs Dokumentation zu Grid- und Flexbox-Eigenschaften.
Soziale Netzwerke
Mit KI analysieren
