Ein maschinenlesbares Designsystem entscheidet inzwischen darüber, ob ein KI-Agent im Frontend brauchbaren Code liefert oder teuren Ausschuss. Buzz Usborne, Principal Designer bei Help Scout, baute ein System aus über 200 Komponenten so um, dass auch Sprachmodelle das System zuverlässig auslesen.[2] Der Aufwand steckt dabei nicht im KI-Werkzeug, sondern in dieser Vorarbeit.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Der Reflex vieler Teams lautet, die KI einzuschalten und schneller zu gestalten. Ohne sauber benannte Bauteile, hinterlegte Variablen und eine feste Brücke zum Code bauen die Agenten die Komponenten aber auf eigene Faust nach und verschwenden Rechenbudget. Wie groß der Unterschied ausfällt, hat Figma beziffert.
Das Wichtigste in Kürze
- Erst ein maschinenlesbares Designsystem macht KI-Werkzeuge im Frontend zuverlässig: klare Namen, Variablen und definierte Zustände jeder Komponente.
- Figmas Funktion Code Connect verknüpft jede Design-Komponente mit ihrem echten Code-Baustein, statt den Agenten raten zu lassen.
- Coinbase misst mit Code Connect 22,5 Prozent weniger Kosten, 22,3 Prozent weniger Umsetzungszeit und 11,5 Prozent weniger Tokens pro Aufgabe.
- Für Agenturen und Inhouse-Teams verschiebt sich die Arbeit vom Pixel-Feinschliff zur Pflege von Namen, Tokens und der Brücke zwischen Figma und Code.
Warum hilft KI im Frontend erst mit einem lesbaren System?
Ein Designsystem war lange für Menschen gebaut. Ein Gestalter erkennt aus dem Kontext, welcher Button in welche Karte gehört, ein Sprachmodell nicht. Bekommt ein Agent nur ein Bild oder lose Ebenen, baut er die Komponente auf eigene Faust nach, oft mit falschen Abständen und doppelten Bauteilen.
Die Rettung liegt in der Struktur. Figma nennt vier Stellschrauben für ein KI-taugliches System: sprechende Namen, ein Layout, das die Hierarchie zeigt, Komponenten-Eigenschaften für die Zustände und Variablen statt roher Farbwerte. Genau diese semantische Ebene beschreibt Dr. Web schon länger, von den Design Tokens bis zum DESIGN.md-File, das einem Modell die Gestaltungsregeln vorgibt.
Der Schritt ist Teil einer größeren Bewegung. Microsoft liefert sein Designsystem als MCP-Server direkt an die Agenten aus, und ein eigener Benchmark prüft, wie KI-tauglich ein System überhaupt ist.
Was bringt Code Connect messbar?
Code Connect verknüpft jede Komponente aus dem Designsystem mit ihrem echten Code-Baustein. Fragt ein KI-Agent über Figmas Schnittstelle eine Ansicht ab, liefert Code Connect den hinterlegten Code der realen Komponente zurück, nicht eine generische Nachbildung. Ohne diese Verknüpfung fehlt der Bezug zum Produktionscode, mit ihr greift der Agent die richtigen Bausteine.
Wie viel diese Verknüpfung ausmacht, hat Coinbase in einem kontrollierten Test gemessen und über den Figma-Blog veröffentlicht.[1] Bei gleichem Design, gleichem Prompt und drei Durchläufen sank die Zeit bis zur fertigen Umsetzung um 22,3 Prozent, der Token-Verbrauch um 11,5 Prozent und die Kosten um 22,5 Prozent. Jeder Durchlauf fiel mit Code Connect günstiger aus.
Nur für Menschen gebaut
- Namen nach Bauchgefühl
- Feste Farb- und Maßwerte
- Zustände nur im Kopf des Designers
- Der Agent rät die Komponente
Maschinenlesbar mit Code Connect
- Sprechende, eindeutige Namen
- Variablen statt roher Werte
- Zustände als Komponenten-Eigenschaft
- Der Agent erhält den echten Code
Der Gewinn entsteht nicht am KI-Knopf, sondern in der Ordnung davor. Ein sauber benanntes, mit dem Code verdrahtetes Designsystem spart bei Coinbase gut ein Fünftel der Umsetzungskosten; ohne diese Ordnung bezahlen Teams die Halluzinationen ihrer Agenten in Tokens.
— Michael Dobler, Herausgeber Dr. Web
Was heißt das für Agenturen und Inhouse-Teams?
Für Studios und Inhouse-Teams im DACH-Raum verschiebt sich die wertvolle Arbeit. Nicht der letzte Pixel-Feinschliff zahlt sich aus, sondern die Hygiene des Systems: eindeutige Namen, gepflegte Variablen und eine gültige Verbindung zwischen Figma und dem Frontend-Code. Diese Verschiebung trifft die Rolle des Designers ähnlich hart wie die agentischen Design-Tools.
Der erste Schritt kostet kein KI-Abo, sondern Disziplin. Vergeben Sie sprechende Komponentennamen und ersetzen Sie feste Farb- und Maßangaben durch Variablen. Danach hinterlegen Sie die möglichen Zustände jeder Komponente als Eigenschaft und verknüpfen die Bausteine mit dem echten Code. Fertige Sammlungen wie ein Vue-Komponenten-System für KI-Agenten zeigen die Richtung.
Bei Coinbase amortisiert sich diese Vorarbeit über 22,5 Prozent geringere Kosten pro Umsetzung, und je mehr Ansichten ein Team baut, desto schneller rechnet sich der Aufwand.
Quellen
[1] Figma-Blog: „How Coinbase Used Code Connect to Guide Agents and Shrink Token Costs“
[2] Buzz Usborne: „Designing with AI“
Mehr Newshunger?
- Open Design System Bench: Wie KI-tauglich ist Ihr Design-System?
- Design-Systeme für KI-Agenten: Warum Microsoft sein Design-System als MCP-Server ausliefert
- Agentische Design-Tools: Miro und Figma verschieben die Rolle der Designer
- DESIGN.md: Ein Markdown-File gegen den generischen KI-Look
- Balsa UI: Ein Vue-Komponenten-System für KI-Agenten statt fürs Copy-Paste
- Die KI-Ästhetik: Warum immer mehr Software gleich aussieht
