Kein getestetes Design-System erreicht die volle KI-Reife: In einem neuen offenen Benchmark bleiben alle vier Kandidaten im Mittelfeld. Der Open Design System Bench lässt echte Coding-Agenten gegen Ihre Komponenten-Bibliothek antreten und benotet, wie sauber sie treffen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Ein Design-System soll dafür sorgen, dass jede Oberfläche gleich aussieht. Nur hält sich der KI-Agent, der die Oberfläche baut, oft nicht daran: Cursor oder Claude Code erfinden Komponenten, die nie existierten, oder umgehen die Komponenten-Bibliothek ganz. Christoph Hellmuth, Design Engineer bei Nord Security, hat dafür erstmals eine Messlatte gebaut.
Das Wichtigste in Kürze
- Der Open Design System Bench lässt KI-Coding-Agenten Oberflächen aus Ihrer React- und TypeScript-Bibliothek bauen und benotet, wie sauber das Ergebnis zum System passt.
- Ein kostenloser Audit prüft sieben Kriterien, von der Agenten-Anleitung AGENTS.md über maschinenlesbare Tokens bis zur Export-Hygiene, und vergibt einen KI-Reifegrad ohne API-Schlüssel.
- Von vier geprüften Systemen landet keines im Reifegrad „KI-nativ“ ab 70 Punkten; das beste erreichte laut Autor 63,4.
- Gute Dokumentation hob die Trefferquote der Modelle je nach Fall um bis zu 26 Punkte.
Was steckt im Open Design System Bench?
Der Benchmark arbeitet auf zwei Ebenen. Die erste läuft gratis und ohne Anmeldung: Ein Audit durchleuchtet die Bibliothek nach sieben Kriterien, von der Agenten-Anleitung als Markdown-Datei über maschinenlesbare Design-Tokens bis zur Frage, ob veraltete Komponenten klar als solche markiert sind. Am Ende steht ein KI-Reifegrad zwischen 0 und 100.[1]
Die zweite Ebene kostet Rechenzeit. Hier bauen echte Agenten aus knappen Vorgaben fertige Oberflächen, die der Bench auf richtige Importe, saubere Komponenten-Aufrufe und Barrierefreiheit prüft. Nötig sind Node.js ab Version 20 und ein eigener API-Schlüssel; der Code steht unter MIT-Lizenz auf GitHub, ganz ohne Telemetrie.[2]
Warum scheitern Coding-Agenten am eigenen Design-System?
Über 898 benotete Durchläufe mit sechs Modell-Konfigurationen zeigten drei Fehlerbilder: Agenten bauen munter weiter, obwohl der Code längst bricht, sie umgehen das System und setzen alles von Hand neu auf, oder sie liefern ehrgeizige, aber kaputte Ergebnisse. Häufig erfinden die Modelle Komponentennamen, die zum Vokabular des Systems nicht passen.
Den Ausschlag gibt die Dokumentation, weniger das Modell. Klare, maschinenlesbare Anleitungen hoben die Trefferquote je nach Modell um 23 bis 26 Punkte, bei anderen immerhin um 6 bis 11. Sichtbare Mängel fielen dabei nebenbei auf: In jedem geprüften System steckten unexportierte Komponenten oder unlesbare Changelogs.
Die drei Reifegrade
Vier geprüfte Systeme, alle im Mittelfeld
Woher die Zahlen stammen
Ein Design-System, das nur Menschen verstehen, ist im Agenten-Zeitalter ein halbes System. Den Reifegrad kostenlos zu messen, ist billiger als jede Oberfläche, die ein Agent am Regelwerk vorbei zusammenbaut.
— Markus Seyfferth, Chefredakteur Dr. Web
Was bedeutet das für Teams im DACH-Raum?
Bisher ließ sich die KI-Tauglichkeit eines Systems nur schätzen oder im manuellen Review beurteilen. Werkzeuge wie Figmas Code Connect oder eine gepflegte Storybook-Doku helfen beim Anschluss an die Agenten, liefern aber keine vergleichbare Note. Genau diese Lücke füllt der Bench.
Am meisten bringen laut den Ergebnissen eine AGENTS.md im Repository, maschinenlesbare Design-Tokens und ein Changelog, das veraltete Komponenten klar kennzeichnet. Für Agenturen und Inhouse-Teams mit einer React-Bibliothek lohnt der Gratis-Audit als erster Schritt, ähnlich wie das Verpacken von Frontend-Wissen für Agenten. Keines der vier getesteten Systeme gilt bislang als KI-nativ, der Abstand zur Spitze bleibt also für alle klein.
Der schnellste Test kostet nichts: Nach der Node-Installation liefert der Gratis-Audit die Punktzahl in Sekunden. Steigt die Zahl nach jeder aufgeräumten Komponente, arbeitet Ihr Design-System künftig für den Agenten statt gegen ihn.
Quellen
[1] Christoph Hellmuth: „How AI-ready is your design system?“
[2] GitHub: christophhdesign/open-design-system-bench (MIT-Lizenz)
Mehr Newshunger?
- Sie haben kein Design-System, sondern eine Komponenten-Bibliothek
- Figma-Skills: Designer schreiben dem KI-Agenten ihre Regeln als Markdown
- Balsa UI: Ein Vue-Komponenten-System für KI-Agenten statt fürs Copy-Paste
- Material Design: Googles Designsystem und seine Grenzen
- Atomic Design: So gestalten Sie Ihre Website modular
