So gibst du einem KI-Coding-Tool dein Design-System

Um einem KI-Coding-Tool dein Design-System zu übergeben, reichst du ihm eine Tokens-Datei: Exportiere das System als CSS Custom Properties oder als Tailwind-Theme — Formate, die Coding-Agenten nativ lesen —, lege die Datei ins Projekt und weise das Tool an, Rollennamen wie --color-accent zu referenzieren, statt rohe Werte zu schreiben. Die Datei bleibt die einzige Quelle der Design-Werte, und die KI konsumiert sie genauso, wie sie den Rest deiner Codebase konsumiert.

Die folgenden Schritte nennen Cursor, v0 und Tools der Claude-Code-Klasse als Beispiele, aber die Namen sind illustrativ und keine Liste: Der Mechanismus ist eine Datei im Repository plus eine dauerhafte Anweisung, und er funktioniert in jedem Tool, das Projektdateien liest. Es ist die praktische Hälfte des Zusammenspiels, das unser Leitfaden zu KI und Design-Systemen beschreibt — die KI baut, während eine deterministische Quelle die Werte hält.

In welchem Format sollte die Tokens-Datei sein?

Drei Formate decken die praktischen Fälle ab, und sie können dieselben Namen tragen:

• CSS Custom Properties. Framework-neutral und direkt lesbar für jedes Tool, das CSS schreibt; MDNs Leitfaden zu Custom Properties erklärt, wie sie kaskadieren und aufgelöst werden. Der sicherste Standard, wenn du nicht weißt, was die KI generieren wird.
• Tailwind v4 @theme. Wenn das Projekt Tailwind nutzt, verwandelt der Theme-Block deine Tokens in Utility-Klassen — der Agent schreibt dann bg-accent und text-accent statt beliebiger Werte, was dieselbe Disziplin ist, nur in Tailwinds Grammatik ausgedrückt.
• DTCG JSON. Das tool-neutrale Austauschformat — nicht das, womit ein Agent direkt stylt, sondern die Quelle, aus der die anderen beiden generiert werden, und die Form, die deine Tokens behalten, wenn sie zwischen Tools wandern. Unser Artikel zum DTCG-Format erklärt es.

Wähle nach dem, was die KI schreibt: Ein Tailwind-Projekt bekommt den @theme-Block, alles andere bekommt Custom Properties, und die DTCG-Datei reist als Quelle beider mit.

Wie richtest du es Schritt für Schritt ein?

1. Exportiere das System. In Scale Composer exportiert eine Session alle vier Formate — DTCG JSON, CSS Custom Properties, Tailwind @theme und Figma Variables — aus demselben Zustand, sodass die Namen über alle hinweg übereinstimmen. Wenn deine Tokens schon woanders liegen, importiere die Datei zuerst; der Roundtrip bewahrt, was hineinkam.
2. Lege die Datei ins Repo. Für Custom Properties an einen gewöhnlichen Ort wie src/styles/tokens.css; für Tailwind gehört der @theme-Block ins Einstiegs-Stylesheet. Wichtig ist nur, dass die Datei innerhalb des Projekts liegt, das das Tool sehen kann.
3. Schreibe die dauerhafte Regel. Die meisten KI-Coding-Tools lesen eine projektweite Anweisungsdatei — der Name variiert je nach Tool, die Idee nicht. Füge eine Regel in etwa so hinzu: Alle Farben, Schriftgrößen und Abstände kommen aus tokens.css; referenziere die Custom Properties beim Namen; führe keine neuen Hex-Werte oder Pixel-Literale ein.
4. Prompte in Rollen. Frage nach „der Accent-Rolle auf der primären Aktion“, nicht nach „einem schönen Blau“. Das Vokabular des Prompts sollte dem Vokabular der Datei entsprechen.
5. Prüfe Diffs auf rohe Werte. Ein neuer Hex-Code oder ein hartcodierter Pixel-Wert, der in einem Diff auftaucht, ist das Anzeichen, dass die Quelle umgangen wurde. Die Korrektur ist nicht „ändere die Farbe“ — sie ist „nutze die Rolle“.

Um zu sehen, was der Agent tatsächlich lesen würde, öffne ein in Scale Composer generiertes Tailwind-v4-Theme — ein @theme-Block, in dem die Farbrampen, Schriftgrößen und Abstands-Stufen alle aus einer globalen Skala abgeleitet sind, bereit zum Einfügen in ein Projekt.

Warum Rollen referenzieren statt rohe Werte?

Es gibt einen Grund für den Code und einen für das Modell.

Für den Code: Ein roher Wert, der in eine Komponente kopiert wird, ist ein Fork — heute korrekt, beim ersten Rebrand verwaist. Eine referenzierte Rolle ist ein lebendiger Link: Ändere, was --color-accent speichert, und jeder Konsument aktualisiert sich, auch Code, den die KI vor Monaten geschrieben hat. Die Rollen-Indirektion ist auch das, was einen Dark Mode praktikabel macht: Scale Composer leitet seinen Dark Mode als separaten Satz von Werten unter denselben Rollennamen ab — eine Ableitung, keine Invertierung —, sodass Code, der Rollen referenziert, durchdachte dunkle Werte übernimmt, ohne eine einzige Änderung.

Für das Modell: Namen begrenzen den Auswahlraum. Nach „einem Blau“ gefragt, zieht ein Modell aus einer praktisch unbegrenzten Menge plausibler Werte. Aufgefordert, aus einem Dutzend Rollennamen in einer Datei zu wählen, die es sehen kann, ist die richtige Antwort in seinem Kontext vorhanden, und die Aufgabe schrumpft von Generierung zu Nachschlagen. Genau dieses Zusammenfallen ist die Quelle der Konsistenz — und sein Fehlen ist der Grund, warum KI-generierte Interfaces vom Marken-Kurs abdriften.

Wie hältst du die Datei als einzige Quelle?

Zwei Gewohnheiten. Erstens: Bearbeite die Exporte nicht von Hand — ein editierter Wert in tokens.css forkt sie von der DTCG-Quelle weg, und der nächste Export ersetzt ihn. Wenn sich ein Wert ändern muss, ändere ihn an der Quelle — importiere die DTCG-Datei zurück in Scale Composer, passe an, exportiere neu; der Roundtrip ist verlustfrei, sodass die Datei zwischen Quelle und Export zirkulieren kann, ohne zu verfallen. Zweitens: Verankere dieselbe Erwartung in den Anweisungen der KI — die Tokens-Datei ist generiert, also sollte das Tool Änderungen an der Quelle vorschlagen, statt Werte inline zu editieren.

Funktioniert das auch außerhalb von Cursor?

Der Mechanismus verallgemeinert sich auf jedes Tool, das Projektdateien liest — editor-integrierte Agenten, CLI-Agenten und webbasierte Generatoren, die Projektkontext annehmen. Bei reinen Chat-Tools gilt dasselbe Prinzip in gröberer Form: Füge den Tokens-Block am Anfang der Konversation ein und liefere ihn in jeder Session erneut, da die Quelle dann in der Konversation statt im Repo lebt. Tool-Namen und Features ändern sich schnell; das Muster aus Datei plus Anweisung ist stabil geblieben, weil es sich auf die eine Sache stützt, die all diese Tools teilen — sie lesen, was vor ihnen liegt.

Beginne beim Export

Wenn das Projekt nicht auf Tailwind läuft, verlässt dasselbe System es als reines CSS: exportiere dieselbe Skala als CSS Custom Properties — identische Rollennamen in framework-neutraler Form. Das Format ist ein Rendering; die Namen sind der Vertrag. Tausche das Rendering passend zu deinem Stack, und die Anweisung, die du der KI gibst, bleibt Wort für Wort dieselbe.