Warum bauen Coding-Agents Komponenten neu, die längst im Designsystem existieren? Fehlender Kontext. Genau hier setzt Code Connect an.
Arbeitest du als Entwickler mit KI-gestützten Coding-Agents, kennst du das Szenario: Der Agent bekommt ein Design aus Figma und liefert Code, der auf den ersten Blick stimmt. Aber schaut man genauer hin, hat er eine Button-Komponente selbst aus <div>s gebaut, obwohl es eine produktionsreife Button-Komponente im eigenen Design System gibt. Das Ergebnis sieht richtig aus, ist aber für deinen Codebase falsch. Der Agent hat nicht mutwillig Mist gebaut – ihm fehlte die Information, dass es diese Komponente bereits gibt.
Code Connect adressiert dieses Problem in Kombination mit dem Figma MCP Server. Statt nur einer generischen React-Darstellung des visuellen Designs erhält der Agent einen echten Code-Snippet direkt aus eurem Design System. Das spart Zeit, reduziert Token-Kosten und führt zu besserer Code-Qualität. Die Entwickler bei Figma haben das evaluiert – mit messbaren Ergebnissen.
Was Code Connect für Coding-Agents verändert
Figma’s MCP Server (Model Context Protocol) erlaubt Coding-Agents, strukturierte Kontextinformationen aus einem Design abzurufen. Das Kernwerkzeug get_design_context liefert dem Agenten eine Codebeschreibung in React – also eine visuell korrekte, aber generische Darstellung dessen, was auf dem Canvas zu sehen ist. Der Agent weiß damit, wie das UI aussieht, aber nicht, wie es in eurem Projekt aufgebaut ist.
Das führt zu drei typischen Verhaltensweisen: Der Agent erfindet eine neue Komponente von Grund auf, obwohl es eine passende im Design System gibt. Oder er wählt die falsche Komponente, weil er die Nomenklatur nicht kennt. Und selbst wenn er die richtige findet, macht er unnötige Arbeit – er durchsucht Ordner, rät bei Imports und verbrennt dabei Tokens. Code Connect eliminiert genau diese unnötige Arbeit.
Wenn Code Connect eingerichtet ist, ersetzt der Figma MCP Server Teile des generierten React-Codes durch produktionsnahe Snippets aus eurem Codebase. Der Agent bekommt dann nicht nur eine abstrakte Beschreibung eines Segmented Controls, sondern direkt den Import und den Aufruf der echten Komponente: <SegmentedControl value="design" options={"Design","Code"} />. Damit ist klar, welche Komponente, welche Props und welche Werte er verwenden soll – keine Ratespiele, kein Suchen, kein Neuerfinden.
Diese Kontextanreicherung wirkt wie ein Bauplan für einen Handwerker. Gibst du ihm nur ein Foto des gewünschten Möbelstücks, improvisiert er nach Augenmaß. Gibst du ihm eine technische Zeichnung mit exakten Maßen und Materialangaben, arbeitet er zielgerichtet und das Ergebnis passt genau. Code Connect ist die technische Zeichnung für deinen Coding-Agent.
Die Messung: Wie Figma die Vorteile evaluiert hat
Um den konkreten Nutzen zu beziffern, hat das Team von Figma ein Evaluierungs-Setup gebaut. Sie testeten dieselben Design-to-Code-Aufgaben einmal mit und einmal ohne Code Connect. Insgesamt 27 Testfälle wurden durchlaufen, jeweils mit zwei unterschiedlichen React-basierten Design-Systemen: Das „Simple Design System“ (SDS) – ein Beispiel-System mit fast vollständiger Code-Connect-Abdeckung – und die „Figma Pattern Library“ (FPL), ein realistisches internes System, das nur teilweise Code-Connectiert ist.
Die Qualität des generierten Codes wurde von LLM-Judges bewertet. Diese verglichen den Output mit Referenz-Snippets und bewerteten nach fünf Kriterien: Korrektheit, Code-Qualität, Wartbarkeit, Vollständigkeit und Best Practices. Die Noten lagen auf einer Likert-Skala von 1 bis 4, wobei 1 für völlig unbrauchbar und 4 für exzellent steht. Zusätzlich wurden die Token-Nutzung und die Dauer jedes Runs erfasst.
Die Ergebnisse sind eindeutig. Mit Code Connect verbessert sich die mittlere Code-Qualität um einen vollen Punkt – von 2 auf 3. Die Token-Nutzung sinkt im Median um 29,5 Prozent, die Bearbeitungszeit um 19,6 Prozent. Der Agent liefert besseren Code, braucht weniger Rechenleistung und ist schneller fertig. Die Effekte zeigten sich konsistent über alle Testfälle hinweg.
Warum die Abdeckung der entscheidende Faktor ist
Der Nutzen hängt davon ab, wie gut euer Design System mit Code Connect abgedeckt ist. Das Team von Figma beobachtete klare Unterschiede zwischen den beiden getesteten Systemen. Bei SDS, wo fast alle Komponenten Code-Connectiert sind, war der Anteil an Code-Connect-Snippets in den MCP-Antworten mit etwa 20 Prozent deutlich höher als bei FPL, wo nur rund 6 Prozent der Antworten echte Snippets enthielten.
Ein anschauliches Beispiel zeigt die Wirkung: Bei einer Aufgabe ohne Code Connect durchsuchte der Agent den node_modules-Ordner, machte breite Greps nach Icon-Namen und baute die Tab-Bar manuell mit CSS nach. Der Output sah optisch ähnlich aus, war aber nicht funktional – die Tabs waren hartkodiert und nicht interaktiv. Mit Code Connect griff der Agent direkt auf die echten Tabs- und Button-Komponenten zu, benötigte nur 77 Prozent der Zeit und 62 Prozent der Tokens, und der Code war sauber und korrekt.
Die Qualität des Ergebnisses skaliert mit der Sorgfalt, die ihr in eure Code-Connect-Abdeckung investiert. Je mehr Komponenten, Tokens und Varianten verknüpft sind, desto weniger Raum bleibt für Improvisation. Das ist keine Raketenwissenschaft, erfordert aber eine bewusste Pflege – genau wie ein gutes Design System selbst.
Coinbase: Ein Praxisbeispiel aus einem großen Unternehmen
Coinbase zeigt, wie Code Connect in der echten Welt wirkt. Das Coinbase Design Systems (CDS)-Team betreut die zentralen Design-Komponenten, Tokens und Infrastruktur für alle großen Consumer-Produkte. Als die Frontend Engineers auf agentengetriebene Entwicklung umstellten, investierten sie gezielt in Code Connect. Frontend Engineer Erich Kuerschner beschreibt den Unterschied: Ohne Code Connect erfand der Agent manchmal eigene Komponenten – etwa einen Stepper aus einfachen Progress-Bars. Mit Code Connect sieht der Agent die korrekte Darstellung als Code und erhält direkte Import-Pfade zu den echten CDS-Komponenten. Das Ergebnis: deutlich bessere Code-Qualität und eine spürbare Token-Ersparnis.
Das Beispiel von Coinbase zeigt, dass Code Connect kein Werkzeug nur für kleine Teams oder einfache Projekte ist. Gerade in großen Codebasen mit vielen Komponenten und strikten Design-Richtlinien schlägt der Nutzen voll durch. Der Agent erhält eine klare, maschinenlesbare Anweisung, welche Komponente zu verwenden ist – kein Raten, kein Abweichen vom Standard.
Auch wenn die Zahlen von Coinbase nicht im Detail veröffentlicht wurden, passt das Bild zu den Ergebnissen von Figma: Mehr Kontext führt zu weniger Fehlern, weniger Token-Verbrauch und schnelleren Durchläufen. Genau das sind die Hebel, die für produktive Teams zählen.
Was das konkret für dein Team bedeutet
Die Evaluierung von Figma bestätigt, was viele Entwickler intuitiv spüren: KI-Agenten brauchen Kontext, um wirklich gut zu sein. Ein Agent ist kein Orakel – er kann nur das nutzen, was er sieht. Bekommt er nur ein Bild des Designs, wird er so lange raten, bis etwas einigermaßen passt. Das kostet Zeit und Geld. Mit Code Connect gibst du ihm die Antworten, bevor er überhaupt anfängt zu suchen.
Für euer Team bedeutet das: Arbeitet ihr bereits mit dem Figma MCP Server, lohnt sich die Investition in Code Connect gleich doppelt. Ihr verbessert nicht nur die Qualität eurer Code-Generierung, sondern senkt gleichzeitig die Betriebskosten – weniger Tokens, weniger Rechenzeit, weniger Iterationen. Die Steigerung von einer ganzen Likert-Stufe mag abstrakt klingen, aber in der Praxis heißt sie: weniger kaputte Imports, weniger manuelle Nacharbeit, weniger Gespräche mit dem Agenten über seine Fantasie-Komponenten.
Die Einrichtung ist kein Hexenwerk. Code Connect folgt einer klaren Struktur: Komponenten in Figma werden mit Code-Snippets aus eurem Repository verknüpft. Je nach Umfang eures Design Systems kann das ein paar Stunden oder ein paar Tage dauern, aber die Amortisation beginnt mit dem ersten Agenten-Lauf, der keine eigene Button-Komponente mehr erfindet. Der Bericht von Figma liefert eine solide Grundlage für Entscheidungen zu eurem Agenten-Workflow.
Quelle: figma.com
