MCP für Design-Tokens, erklärt
Model Context Protocol ist ein offener Standard, der KI-Assistenten mit externen Werkzeugen und Daten verbindet. Auf Design-Tokens angewendet stellt ein MCP-Server die aktuellen Werte eines Projekts einem KI-Coding-Agenten bereit, damit erzeugte Komponenten das echte Designsystem verwenden statt Werte, die das Modell erfindet.
Das Problem dahinter
Ein KI-Agent, der eine Komponente schreibt, muss seine Designwerte irgendwoher nehmen. Mangels Besserem nimmt er, was er im Training gesehen hat: verbreitete Tailwind-Standards, populäre Paletten, plausible Abstände.
Das Ergebnis kompiliert, wirkt vernünftig und ist falsch. Nicht sichtbar falsch - das ist ja die Schwierigkeit. Es ist ein Hex-Wert nahe an deiner Primärfarbe statt deiner Primärfarbe.
Die Palette in den Prompt zu kopieren hilft für ein Gespräch. Es übersteht das nächste nicht und skaliert nicht auf ein Team.
Was MCP ändert
Model Context Protocol ist ein offener Standard, um KI-Assistenten Werkzeuge und Daten zugänglich zu machen. Ein Client wie Cursor oder Claude Code verbindet sich mit einem Server und kann dessen Werkzeuge dann während einer Aufgabe aufrufen.
Für ein Designsystem heißt das: Der Agent kann die Werte in dem Moment abfragen, in dem er sie braucht, statt auf das angewiesen zu sein, was im Prompt gelandet ist. Ein typischer Server bietet:
- Token-Abfrage: die aktuellen Werte für Farbe, Typografie, Abstände, Radius, Schatten und Bewegung
- Komponenten-Abfrage: die Spezifikation einer benannten Komponente
- Verstoßprüfung: welche Werte in einem Codeblock fest verdrahtet sind und welche Tokens sie ersetzen
- Token-Vorschläge: ein Weg für den Agenten, einen im System nicht definierten Wert anzufragen, statt ihn zu erfinden
Der letzte Punkt wiegt schwerer, als er aussieht. Er verwandelt den Fehlerfall von stiller Erfindung in eine explizite Anfrage, die ein Mensch beantworten kann.
Wie man einen anbindet
MCP-Clients lesen eine kleine JSON-Konfiguration, die den Server benennt und beschreibt, wie er erreichbar ist. In Cursor liegt sie in den MCP-Einstellungen des Projekts, in Claude Code wird sie über die CLI ergänzt. Die Authentifizierung ist üblicherweise ein auf ein Projekt begrenztes Token.
Einmal verbunden, steht dem Agenten das Designsystem bei jeder Generierung zur Verfügung - ohne Einfügen pro Prompt.
Warum das etwas anderes ist als eine Regeldatei
Cursor-Rules und ähnliche Mechanismen schieben statischen Text in den Kontext. Das funktioniert und lohnt sich, aber der Text ist eine Momentaufnahme: Er stimmt, bis die Tokens sich ändern, und ist danach zuversichtlich falsch.
Ein MCP-Server wird zum Aufrufzeitpunkt gelesen. Ändert sich ein Token, sieht die nächste Generierung den neuen Wert, ohne dass jemand eine Datei aktualisiert.
Wo Flash DSM hier steht
Flash DSM betreibt einen MCP-Server, der die obigen Werkzeuge für jedes Designsystem bereitstellt, das dir gehört - anbindbar aus Cursor, Claude Code oder jedem MCP-Client mit einem begrenzten Token.