Warum KI-generierte Interfaces vom Markendesign abdriften

Am Montag bittest du ein KI-Coding-Tool um ein Dashboard, und die primären Buttons kommen in #2563eb zurück. Am Mittwoch fragst du nach einer Einstellungsseite – gleiches Projekt, gleiche Anweisungen – und die Buttons kommen in #3b82f6. Am Freitag taucht ein Anmelde-Modal in #1d4ed8 auf. Drei Ansichten, drei Blautöne. Jeder Screen sieht für sich genommen vernünftig aus; nichts ist fehlgeschlagen, nichts hat einen Fehler geworfen. Legt man sie nebeneinander, vertritt das Projekt drei leicht unterschiedliche Meinungen über seine eigene Markenfarbe.

KI-generierte Interfaces driften vom Markendesign ab, weil ein Sprachmodell jede Antwort neu auswürfelt: Solange kein exakter Wert in seinem Kontext steht, ist jede Entscheidung über Farbe, Größe und Abstände ein neuer Rateversuch – plausibel, nah an der letzten und doch nicht identisch mit ihr. Abdriften ist kein Fehler, den man flicken müsste; es ist das Standardverhalten eines generativen Systems ohne feste Quelle. Die Lösung: dem Modell eine deterministische Wertequelle geben – design tokens –, auf die es verweist, statt sie zu erfinden.

Das ist die Kurzfassung. Der Rest dieses Artikels – Teil unseres Leitfadens zu KI und Design-Systemen – erklärt, warum das Abdriften passiert, warum es das Review übersteht und was eine feste Quelle tatsächlich verändert.

Warum erzeugt derselbe Prompt unterschiedliche Werte?

Ein Sprachmodell ruft dein Marken-Blau nirgendwo ab, denn solange der Wert nicht in seinem Kontext steht, gibt es keinen Ort, von dem es ihn abrufen könnte. Es erzeugt seine Ausgabe durch Sampling: In jedem Schritt wählt es unter den Fortsetzungen, die angesichts von allem Gelesenen statistisch plausibel sind. Das Modell hat eine sehr große Zahl von Interfaces gesehen, deshalb ist seine Vorstellung von „einem guten Blau für einen primären Button” nicht ein Wert – sie ist eine Verteilung über Werte, in der #2563eb, #3b82f6 und #1d4ed8 alle bequem Platz finden. Frag dreimal, und du bekommst drei Ziehungen.

Das ist ein Verhaltensmuster der Technologie, kein Defekt eines bestimmten Tools, und die Zufälligkeit herunterzudrehen beseitigt es nicht: Der Kontext unterscheidet sich von Session zu Session – der bisherige Gesprächsverlauf, die sichtbaren Dateien, die Reihenfolge der Anfragen – und die Ziehung wandert mit dem Kontext.

Warum ist „plausibel” nicht dasselbe wie „konsistent”?

Weil Plausibilität immer nur für eine Antwort auf einmal beurteilt wird, Konsistenz aber eine Eigenschaft der gesamten Menge ist. Jeder der drei Blautöne ist für sich genommen vertretbar: Wer das Modal vom Freitag prüft, sieht einen stimmigen Screen mit einer glaubwürdigen Primärfarbe und gibt ihn frei. Das Abdriften ist in keiner einzelnen Ansicht sichtbar und zeigt sich erst über mehrere Ansichten hinweg – das heißt, es rutscht durch genau das Review, das die meisten Teams tatsächlich durchführen: die Prüfung „sieht das richtig aus?” pro Screen.

Farbe ist nur die Stelle, an der man es am leichtesten sieht. Dasselbe Muster erzeugt 15px Fließtext auf dem einen Screen und 16px auf dem nächsten, eine Schriftstärke von 500 neben einer von 600, einen Abstand von 12px, wo der Nachbar 14px bekommen hat. Jede einzelne Wahl ist in Ordnung; die Menge ist Rauschen.

Warum bemerken Nutzer ein Abdriften, das sie nicht benennen können?

Interfaces werden zum Teil über Wiedererkennung gelesen. Sobald ein Nutzer dem primären Button ein paar Mal begegnet ist, liest er ihn nicht mehr – Farbe, Stärke und Form werden als bekanntes Signal verarbeitet, mit nahezu keinem kognitiven Aufwand. Konsistenz ist es, die diese Abkürzung erst möglich macht. Wackeln die Werte, verschlechtert sich die Abkürzung leise: Der Nutzer nimmt nicht bewusst wahr, dass das Blau vom Mittwoch von dem am Montag abweicht, aber das Interface wirkt ein wenig weniger aus einem Guss, unstimmig auf eine schwer zu benennende Weise. Markenwiedererkennung funktioniert im größeren Maßstab genauso: Sie entsteht aus wiederholten identischen Signalen, und nahezu identische Signale verwässern sie, statt sie zu verstärken.

Was verändert eine feste Quelle?

Sie nimmt Entscheidungen auf Wertebene aus der Sampling-Schleife heraus. Eine design-token-Datei speichert jede Entscheidung als benannte Daten – accent hält eine exakte Farbe, space-4 einen exakten Abstand; die Mechanik erklärt unser Artikel darüber, was design tokens sind. Sobald diese Datei im Projekt liegt, ändert sich die Aufgabe des Modells – tokens werden zur Schnittstelle zwischen Design und KI: nicht mehr „erzeuge ein plausibles Blau”, sondern „verweise auf den Namen accent”. Einen korrekten Namen aus einer kurzen, sichtbaren Liste zu erzeugen, ist eine Aufgabe, die ein Sprachmodell zuverlässig bewältigt; einen hex-Wert über zwanzig Sessions hinweg identisch zu halten, ist nicht das, wofür es gebaut ist.

Die Werte selbst stammen aus Berechnung statt aus Sampling. Öffne eine feste Farbrampe in Scale Composer – eine Ausgangsfarbe, zehn Schritte, platziert auf einer Helligkeitskurve in OKLCH, jeder Schritt mit einem Namen und einem exakten Wert. Sie kommt jedes Mal gleich heraus, weil sie berechnet und nicht geraten ist.

Wo verdient sich die KI weiterhin ihren Platz?

Es geht um Arbeitsteilung, nicht um ein Urteil. Generative Tools sind stark bei Struktur und Variation: eine Ansicht scaffolden, Komponenten verdrahten, ein Formular anlegen, vor dem Mittagessen drei Alternativen vorschlagen. Was sie nicht gut können, ist viele exakte Werte über die Zeit stabil zu halten – oder jene Teile eines Design-Systems, die Berechnungen statt Entscheidungen sind. Kontrastanforderungen wie die Mindestwerte der WCAG sind Arithmetik auf der Helligkeit; perzeptiv gleichmäßige Farbschritte sind Kurvenplatzierung. Dafür gibt es richtige Antworten, und richtige Antworten sollten geprüft und nicht ausgewürfelt werden. Scale Composer berechnet sie: Semantische Rollen – Hintergrund, Text, Akzent – werden aus der Farbrampe mit einer Kontrast-Untergrenze abgeleitet und mit APCA bewertet, sodass die Paarungen halten, bevor irgendetwas einen Prompt erreicht.

Die praktische Aufteilung also: Das deterministische System hält die Werte, und die KI baut damit.

Von der Rampe zu den Rollen

Eine Farbrampe ist Rohmaterial; worauf eine KI am Ende verweist, sind Rollennamen. Öffne die semantischen Rollen, die aus genau dieser festen Farbrampe abgeleitet sind – Hintergrund, Text und Akzent, zugewiesen aus den Schritten der Farbrampe, jede Paarung geprüft gegen die Kontrast-Untergrenze. Diese kurze Namensliste ist es, die die Verteilung ersetzt, aus der das Modell sonst ziehen würde: Gib ihm die Liste, bitte es, auf die Namen zu verweisen, und dem Drei-Blautöne-Problem bleibt nichts mehr zum Abdriften.