Aktualisiert 15. Juli 2026

KI und Design-Systeme: Der praktische Leitfaden

KI-Tools generieren Interfaces, Code und Bilder schnell — aber sie halten kein Design-System. Jede Antwort wird neu gesampelt, sodass Farben, Größen und Abstände driften, es sei denn, die KI liest aus einer deterministischen Quelle: design tokens für Code, eine benannte Palette für Bilder. Diese Aufteilung — die KI baut, das System hält — ist die Arbeitsannahme hinter jedem Leitfaden in diesem Hub. Die Ein-Bildschirm-Version ist ein zusammengestelltes System, exportiert als die Dateien, die ein KI-Assistent liest.

Die zwei Workflows

KI trifft ein Design-System an zwei Stellen, und die Disziplin ist an beiden dieselbe. Wenn eine KI dein UI baut — ein Coding-Assistent, ein Prompt-to-App-Tool — erfindet sie plausible Werte überall dort, wo das Projekt sie nicht festnagelt. Die Lösung ist deshalb eine Tokens-Datei, die sie stattdessen referenzieren kann: Rollen wie --color-accent statt frisch geratener hex-Werte. Wenn eine KI deine Bilder generiert, kann sie eine Tokens-Datei gar nicht lesen — aber sie reagiert stark auf eine Palette, die als beschreibende Namen mit hex-Werten geschrieben ist. In beiden Fällen wird das System einmal, deterministisch, festgelegt, und die KI konsumiert es.

Jeder Workflow hat sein eigenes Paar von Leitfäden. Für Code ist So gibst du einem KI-Coding-Tool dein Design-System das praktische Setup, und Design Tokens sind die Schnittstelle zwischen Design und KI liefert das zugrunde liegende Argument. Für Bilder erklärt Warum KI-Bildgeneratoren deine Markenfarben verfehlen die Einschränkung ehrlich, und So promptest du KI-Bilder mit einer vollständigen Farbpalette verwandelt eine Palette in Prompt-Sprache, die mit dem Modell arbeitet statt gegen es.

Was KI gut kann — und wo die Mathematik übernimmt

Die Leitfäden hier sind keine Warnungen vor KI; sie ziehen eine Arbeitsgrenze. Modelle sind gut in dem, worin Sampling gut ist: Richtung, Variation, Scaffolding, Benennung. Sie sind unzuverlässig bei dem, was berechnet werden muss: Kontrastverhältnisse gegen einen Grenzwert, perzeptiv gleichmäßige Helligkeits-Schritte, Schriftgrößen, die dem Verhältnis tatsächlich folgen, Dark Themes, die abgeleitet statt invertiert sind. Behandle das Modell als schnellen Mitarbeiter ohne Gedächtnis für Werte, und beide Hälften des Workflows werden leichter zu durchdenken.

Die Grenze wird Fall für Fall getestet, nicht behauptet: Kann ChatGPT ein Design-System bauen? führt das Experiment von Anfang bis Ende durch, Warum KI die Mathematik der Schriftgrößenskala falsch macht und KI-Farbpaletten-Generatoren verorten den Übergabepunkt für Schrift bzw. Farbe, und Warum KI-Dark-Modes falsch aussehen zeigt, was passiert, wenn ein Modell Werte erfindet, die hätten abgeleitet werden sollen.

Wo dieser Hub auf den Rest trifft

Die KI-Leitfäden stützen sich auf den Rest der Bibliothek: design tokens sind der Vertrag, den ein Coding-Assistent liest, Farbskalen liefern die gleichmäßigen Rampen, die KI-Paletten fehlen, Kontrast deckt die Grenzwerte ab, die berechnet werden müssen, Dark Mode führt das Argument „ableiten statt invertieren“ vollständig aus, und Markenfarben und Schriftgrößenskalen definieren die benannten Werte und die Skalen-Mathematik, auf die sich alles oben bezieht.

Wo anfangen

Wenn das Problem auf deinem Schreibtisch Drift ist — Bildschirme, die einzeln plausibel aussehen und nie ganz zusammenpassen — beginne mit Warum KI-generierte Interfaces vom Markenbild abdriften: Das ist die Diagnose, die jeder andere Leitfaden in diesem Hub behandelt. Von dort aus folgst du deinem Workflow — der Coding-Assistent-Pfad läuft durch die zwei Tokens-Leitfäden, der Bild-Pfad durch das Prompting-Paar, und die grenztestenden Leitfäden beantworten die wiederkehrende Frage „könnte das Modell diesen Teil nicht auch einfach übernehmen?“ mit Belegen. Die deterministische Quelle, die beide Pfade brauchen, ist das, was Scale Composer produziert: eine Skala, komponiert zu Palette, Schrift und Raster, exportiert als die CSS-Variablen, das Tailwind-Theme oder die DTCG-Datei, die dir die Leitfäden ans Modell übergeben zeigen.

Leitfäden in diesem Hub

Übergib deiner KI ein System

Der Workflow verdichtet sich zu einer Schleife: Komponiere Palette und Skala, dann öffne die benannte Palette — jeder Ton mit einer Rolle und einem hex-Wert — und dieses Vokabular ist das, was du in ein Coding-Projekt als Tokens oder in einen Bild-Prompt als Farbsprache einfügst. Die KI bleibt schnell; die Werte hören auf, sich zu bewegen.

Häufige Fragen

Kann KI ein Design-System bauen?

Sie kann eines scaffolden — Namenskonventionen, Token-Schichten, sinnvolle Struktur. Was sie nicht garantieren kann, ist die Arithmetik: Kontrast-Grenzwerte, perzeptiv gleichmäßige Farbschritte, Skalenwerte, die dem Verhältnis folgen. Der zuverlässige Workflow ist KI für die Richtung, eine deterministische Quelle für die Werte.

Wie gebe ich einem KI-Tool meine Markenfarben?

Für Code exportierst du dein System als design tokens — CSS Custom Properties oder ein Tailwind-Theme —, legst die Datei ins Projekt und bittest die KI, Rollen zu referenzieren, statt Werte zu erfinden. Für Bilder nutzt du deine Palette als Prompt-Vokabular — jeder Ton als beschreibender Name, gepaart mit seinem hex-Wert.

Warum sehen KI-generierte UIs inkonsistent aus?

Jede Antwort wird neu gesampelt. Ohne eine festgelegte Quelle ist jede Farbe und Größe eine neue Vermutung — für sich plausibel, anders als die letzte. Drift ist das Standardverhalten, keine Fehlfunktion, weshalb die Lösung eine Quelle der Wahrheit ist und kein besserer Prompt.

Verstehen KI-Bildgeneratoren hex-Codes?

Unzuverlässig, für einen einzelnen exakten Wert — kein Generator ist ein Farbmanagement-System. Eine ganze Palette, als Namen plus hex geschrieben, ist ein viel stärkeres Signal. Exakte Markenfarben-Treffer kommen von Referenzbildern und Nachjustierung, nicht vom Prompt-Text allein.

In welchem Format sollten design tokens für KI-Tools sein?

Coding-Assistenten lesen CSS Custom Properties und Tailwind-Themes direkt, da sie im Code auftauchen, den das Modell ohnehin sieht. Das DTCG-JSON-Format ist der tool-neutrale Austausch — eine Quelle, die auch zu Figma Variables und jeder Build-Pipeline exportiert.

Sollte ich KI meine Farbpalette wählen lassen?

Als Richtung, ja — Modelle sind für Stimmung und Ausgangspunkte wirklich nützlich. Als System, nein. Kontrast muss berechnet werden, Schritte müssen perzeptiv gleichmäßig sein, und Dark Mode muss abgeleitet werden. Nimm die Richtung, dann lass die Mathematik die Werte erzeugen.