Design-Systeme für KI-Agenten: Warum Microsoft sein Design-System als MCP-Server ausliefert

Ein Design-System aus lauter gleichen Bausteinen erzeugt trotzdem uneinheitliche Oberflächen, sobald KI-Agenten den Code schreiben. Microsofts CoreAI-Team liefert sein Design-System deshalb doppelt aus: als Figma-Bibliothek für Menschen und als MCP-Server für die Agenten. Fünf Azure-Portale übernahmen das Paket binnen weniger Wochen, die Umsetzung dauerte statt Monaten nur noch Tage.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Design-Systeme galten lange als Werkzeug für Menschen, als Bibliothek aus Komponenten, an der sich Designer und Entwickler orientieren. Mit generativer KI kommt eine zweite Leserschaft hinzu, die dieselben Regeln braucht, aber anders liest. Microsoft legte für diesen Fall einen konkreten Weg vor.

Das Wichtigste in Kürze

• Microsoft liefert sein CoreAI-Design-System zweifach aus: als Figma-Bibliothek für Designer und als MCP-Server, den KI-Agenten direkt abfragen.
• Der Engpass ist nicht die Komponente, sondern die Absicht dahinter, also wann ein Muster gilt und warum.
• Nach Microsofts Angaben übernahmen bis August 2026 fünf Azure-Portale das Paket, im Juni noch keines. Die Umsetzungszeit fiel laut Microsoft von Monaten auf Tage.
• Material UI liefert einen eigenen MCP-Server, das Muster greift also über Microsoft hinaus.

Warum bauen KI-Agenten die falsche Oberfläche?

KI-Agenten spiegeln die verfügbaren Bausteine wider, nicht die Aufgabe des Nutzers. Microsofts CoreAI-Team nutzte für seine Produkte durchgehend die Komponenten des Systems Fluent 2. Trotzdem wirkte die Produktfamilie zusammengewürfelt, weil jedes Team über Navigation, Layout und Abläufe eigenständig entschied.

Fehlende Absicht. „Obwohl wir dieselben atomaren Komponenten verwendeten, wirkte unsere Produktfamilie bruchstückhaft“, sagt Jenny Lanier Wolski, Principal Design Manager bei Microsoft CoreAI.^[1] In der Komponenten-Doku steht die Syntax, nicht aber die Absicht dahinter, also wann ein Muster passt und welcher Ansatz warum. Ohne diese Einordnung greift ein Agent zur nächstbesten Komponente und bildet die technische Struktur ab, nicht den Arbeitsweg.

Wie macht Microsoft sein Design-System maschinenlesbar?

Microsoft liefert dieselben Regeln über zwei Kanäle aus, eine Figma-Bibliothek für Designer und einen MCP-Server, den KI-Agenten nach Kontext, Beispielen und Absicht abfragen. John Maeda, bei Microsoft für Produkteinfachheit zuständig, ordnet diesen Doppelweg in vier Säulen ein und stellt die Kohärenz in den Mittelpunkt.

Monate auf Tage. Nach Microsofts Angaben übernahmen bis August 2026 fünf Azure-Portale das npm-Paket, im Juni noch keines. Die dokumentierten Muster verkürzten die Umsetzung laut Wolski von Monaten auf Tage.^[1]

Was heißt das für Teams im DACH-Raum?

Prüfen Sie, ob Ihr Design-System nur Bausteine liefert oder auch die dokumentierte Absicht, die ein KI-Agent zum richtigen Einsatz braucht. Material UI liefert seit Kurzem einen offiziellen MCP-Server, der KI-Assistenten Zugriff auf über 50 React-Komponenten gibt.^[2] Aus der Idee wird ein Muster, denn das Design-System wandert von der Vorlage zur Wissensquelle für Agenten. Andere bauen ihre Komponenten von vornherein für Agenten, etwa das Vue-System Balsa UI.

Konkrete Schritte. Agenturen und Inhouse-Teams sollten ihr eigenes System auf maschinenlesbare Absicht abklopfen, nicht nur auf Farben und Abstände. Wie KI-tauglich ein Design-System wirklich ist, lässt sich inzwischen im Benchmark messen. Parallel klärt die Branche, warum KI-Apps überhaupt einen gemeinsamen Standard brauchen. Ein Team, das Cursor, Claude Code oder ähnliche Werkzeuge zulässt, hat die Entscheidung längst getroffen: Agenten bauen die Oberflächen mit.

Nächster Schritt. Nehmen Sie Ihr Design-System einmal aus der Sicht eines Agenten in den Blick. Steht neben jeder Komponente, wann und warum sie gilt? Fehlt diese Ebene, beginnt die Arbeit genau dort, nicht bei einer neuen Farbpalette.

Quellen

[1] Microsoft: „Designing product simplicity for the agentic AI era“

[2] Material UI: „Model Context Protocol (MCP) for MUI“

Mehr Newshunger?

• Die Aufräum-Ära der UX: Wenn Teams hinter der KI aufräumen
• Mesurer: Der Open-Source-Inspektor, der Design-Feedback an KI-Agenten liefert
• Elf ladbare KI-Skills: Ein Design Engineer verpackt sein Frontend-Wissen für Agenten
• Design-System-Adoption: Warum jede Kopie wie echte Nutzung aussieht
• Is Agentic: Vercels kostenloser Test bewertet, wie gut KI-Agenten Ihre Website nutzen