Kann ChatGPT ein Designsystem bauen?

Mach das Experiment: Bitte ein Chat-Modell um „ein komplettes Designsystem für ein SaaS-Produkt — Farbskalen, eine Schriftgrößenskala, Abstands-Tokens, barrierefreien Kontrast.” Was zurückkommt, ist beeindruckend. Gut organisierte Ebenen, eine 50–900-Skala pro Farbton, eine Schriftgrößenskala mit benanntem Verhältnis, Abstände auf einem konsistenten Raster, Token-Namen, die realen Konventionen folgen, Kontrast-Anmerkungen neben den Farbpaaren. Es liest sich wie die Arbeit von jemandem, der tausend Designsysteme studiert hat — was in einem bedeutsamen Sinn auch stimmt.

ChatGPT kann das Gerüst eines Designsystems bauen, aber die Werte kann es nicht zuverlässig verantworten. Die Struktur, die es erzeugt — Namenskonventionen, Token-Ebenen, sinnvolle Vorschläge fürs Verhältnis, Erinnerungen an Barrierefreiheit — ist wirklich stark. Die Zahlen innerhalb dieser Struktur überstehen die Prüfung oft nicht: Kontrastverhältnisse, die sich beim Nachrechnen nicht reproduzieren lassen, Skalenschritte, die dem angegebenen Verhältnis nicht folgen, und bei jedem neuen Prompt ein anderer Satz Werte. Nutze das Modell als Gerüstbauer und Berater; lass eine deterministische Quelle jeden Wert verantworten.

Diese Aufteilung — und wie du sie in der Praxis umsetzt — ist das Thema dieses Artikels, Teil unseres Leitfadens zu KI und Designsystemen.

Was macht ChatGPT tatsächlich richtig?

Mehr, als Skeptiker erwarten. Die strukturelle Ebene eines Designsystems ist Wissen, das in Texten lebt — Artikeln, Dokumentation, Konferenzvorträgen — und Texte zu synthetisieren ist genau das, wofür ein Sprachmodell gebaut ist. Frag es, wie man Tokens organisiert, und es beschreibt die primitive → semantic → component-Schichtung, auf die reife Systeme konvergieren. Frag, welches Verhältnis für die Schriftgrößenskala zu einem dichten Dashboard passt, und es argumentiert vernünftig über Informationsdichte. Frag es, Dinge zu benennen, und die Namen folgen Konventionen, die deine künftigen Teamkollegen wiedererkennen.

Für ein Team ohne Designsystem-Spezialistin kann allein dieses Gerüst das Gespräch wert sein. Es ist ehrlich zu sagen, dass das Modell hier die Rolle eines belesenen Beraters spielt — und sie gut spielt.

Wo brechen die Werte zusammen?

Die Fehler fallen in Klassen, die erkennbar bleiben, egal welches Modell oder welche Version du verwendest:

1. Arithmetische Näherung. Eine Schriftgrößenskala ist exponentielle Mathematik — Basis × Verhältnis^n — und ein Modell, das direkt aus Sprache antwortet, neigt dazu, das Ergebnis zu nähern statt zu berechnen. Die Schritte sehen plausibel aus und driften vom angegebenen Verhältnis weg; unser Artikel dazu, warum KI die Mathematik der Schriftgrößenskala falsch macht, geht die genauen Zahlen durch.
2. Behauptete statt berechnete Prüfungen. Kontrastwerte kommen mit selbstbewusster Präzision daher — „4,6:1, besteht AA” — aber rechnet man sie aus dem tatsächlichen Farbpaar neu, stimmt ein erheblicher Teil nicht. Die Zahl wurde erzeugt, um wie eine Prüfung auszusehen, nicht durch eine hervorgebracht.
3. Sampling-Varianz. Frag morgen erneut, und du bekommst ein anderes System, genauso selbstbewusst. Nichts verankert eine Antwort an der nächsten — dasselbe Verhalten, das KI-generierte Interfaces mit der Zeit vom Markenbild abdriften lässt.

Eine ehrliche Einschränkung: Assistenten, die Code ausführen können, rechnen korrekt, wenn sie es tatsächlich tun. Die Fehlerklasse betrifft Werte, die direkt aus Sprache entstehen — und das tiefere Problem ist, dass die Ausgabe dir keine Möglichkeit gibt, zu erkennen, welche Art du bekommen hast. Eine berechnete und eine genäherte Zahl sehen in einer ordentlichen Markdown-Tabelle identisch aus.

Wie prüfst du eine behauptete Schriftgrößenskala?

Nimm die Schriftgrößenskala aus der Antwort des Modells und stell sie neben eine berechnete. Öffne eine berechnete Quart-Skala in Scale Composer — Basis 16, Verhältnis 1,333, jeder Schritt berechnet als Basis × Verhältnis^n und gegen den exakten Wert gerundet. Stimmen die Zahlen des Modells überein, waren sie richtig. Wo sie abweichen — typischerweise in den oberen Schritten, wo der exponentielle Fehler Raum hatte, sich aufzuschaukeln — siehst du die Näherung direkt.

Diese Prüfung dauert etwa eine Minute, und sie verändert, wie du den Rest der Modell-Ausgabe liest: Struktur und Ratschläge — vertrauenswürdig; ungeprüfte Zahlen — offen.

Was sollte stattdessen die Werte verantworten?

Eine Quelle, in der jeder Wert berechnet, gespeichert und referenziert wird — design tokens, die von einem deterministischen System erzeugt und nicht von einem generativen gesampelt werden. Unser Artikel über design tokens als Schnittstelle zwischen Design und KI behandelt den Vertrag; kurz gesagt hat jede Klasse von Werten, die das Chat-Modell erraten hat, eine richtige Antwort, die ein System berechnen kann. Eine globale Skala — Basis, Verhältnis, Schritte — kann Typografie, Abstände und Farbrampen gemeinsam steuern. Farbschritte lassen sich auf perzeptiven Helligkeitskurven in OKLCH platzieren statt nach Augenmaß. Semantische Rollen lassen sich mit einer erzwungenen WCAG-Kontrast-Untergrenze ableiten und mit APCA bewerten. Ein Dark Mode lässt sich als eigene Variante ableiten statt zu invertieren. Nichts davon erfordert jedes Mal ein Urteil; es erfordert jedes Mal dieselbe Berechnung.

Wie sieht der Roundtrip aus?

Die funktionierende Anordnung ist nicht ChatGPT gegen ein deterministisches System — es ist eine Schleife zwischen beiden:

1. Richtung im Chat. Frag nach Empfehlungen fürs Verhältnis, Paletten-Stimmung, Namenskonventionen, Struktur. Hier verdient sich das Modell seinen Platz.
2. Werte berechnet. Gib die gewählte Richtung in die deterministische Quelle und lass sie die tatsächlichen Zahlen berechnen.
3. Tokens exportiert. Nimm das Ergebnis als CSS Custom Properties, einen Tailwind-v4-@theme-Block, DTCG JSON oder Figma Variables heraus — je nachdem, welches Format dein Projekt liest.
4. Tokens zurück ins Gespräch. Füge die Datei ins KI-Projekt ein und weise das Modell an, Token-Namen zu referenzieren, niemals Werte zu erfinden. Einen Namen aus einer kurzen sichtbaren Liste zu referenzieren ist eine Aufgabe, die Sprachmodelle zuverlässig bewältigen; fünfzig exakte Werte über Sitzungen hinweg stabil zu halten nicht.

Die Schleife lässt jeden Beteiligten auf heimischem Boden spielen: Das Modell denkt über das System in Sprache nach, das System hält das System in Zahlen.

Schließe die Schleife

Der Export-Schritt ist der Punkt, an dem die Antwort auf die Titelfrage praktisch wird: Öffne dieselbe Skala am Export-Schritt und sieh dir an, was tatsächlich in den Chat zurückgeht — benannte Tokens mit berechneten Werten, in einem Format, das das Modell nur referenzieren, nicht neu erfinden kann. Kann ChatGPT ein Designsystem bauen? Es kann dessen Architektur entwerfen. Die Datei, die ausgeliefert wird, ist der Teil, den du berechnest.