Besserer Code, weniger Tokens: Die Vorteile von Code Connect in MCP

Coding-Agenten werden immer besser darin, Entwürfe in Code umzusetzen. Aber ohne den richtigen Kontext bauen sie deine Benutzeroberfläche oft aus Grundelementen neu auf, anstatt die Komponenten aus dem Produktionscode zu nutzen, die dein Team bereits pflegt. Dies kann dazu führen, dass die Ausgabe zwar richtig aussieht, aber trotzdem für Ihren Codebestand falsch ist. Es kann auch dazu führen, dass der Agent mehr Zeit (und Tokens) mit Suchen, Raten, Debuggen und Umschreiben verbringt.

Wenn Agenten mit dem Figma-MCP-Server arbeiten, kann Code Connect ihnen zusätzlichen Kontext liefern, indem es Figma-Komponenten mit den tatsächlichen Komponenten in deinem Code verknüpft. Wenn Code Connect eingerichtet ist, erhalten Agenten produktionsrelevante Code-Schnipsel in der MCP-Antwort, anstatt nur eine React-Darstellung des visuellen Designs.

Ursprünglich haben wir Code Connect entwickelt, um den Design-to-Code-Prozess für menschliche Entwickler*innen zu verbessern. Doch heute erledigen viele Teams und Rollentypen diese Art von Arbeit mit Coding-Agenten. Daher haben wir untersucht, ob und in welchem Maße Code Connect die Leistung der Agenten verbessert.

In unseren Auswertungen haben wir festgestellt, dass Code Connect Agenten genauso wie menschliche Entwickler dabei hilft, sich an die Designsysteme eines Unternehmens zu halten und bessere Ergebnisse schneller zu produzieren. Wir haben Design-zu-Code-Aufgaben mit Agenten getestet, die den MCP-Server von Figma nutzten, sowohl mit als auch ohne eingerichtete Code Connect-Vorlagen.

Wir haben festgestellt, dass mit Code Connect:

• Die mittlere Aufgabendauer wurde um 19,6 % reduziert.
• Die Code-Qualität ist um einen vollen Punkt auf einer Likert-Skala von 1 bis 4 gestiegen.
• Die Tokennutzng für die durchschnittliche Aufgabe wurde um 29.5% reduziert.

Dieser Beitrag veranschaulicht, wie Code Connect den Agenten Kontext bietet, wie wir die Evaluierungen durchgeführt haben und was wir dabei gelernt haben.

So bereichert Code Connect die MCP-Serverantwort von Figma

Der MCP-Server von Figma ermöglicht es codierenden Agenten, strukturierten Kontext zu einem Design abzurufen. Eines der Schlüssel-Tools, get_design_context, gibt dem Agenten eine Code-Beschreibung in React von dem, was sich auf der Arbeitsfläche befindet. Die Ausgabe ist optisch korrekt, aber da der Agent nicht weiß, wie sich das auf die Komponenten in deinem Code bezieht, passieren meist drei Dinge:

• Der Agent erstellt eine neue Komponente von Grund auf.
• Der Agent wählt die falsche Komponente aus deinem Designsystem aus.
• Der Agent findet schließlich die richtige Komponente, erledigt aber unnötige Arbeit dabei, was zusätzliche Tokens verbraucht.

Wenn Code Connect-Vorlagen eingerichtet wurden, ersetzt der Figma-MCP-Server Teile des generierten React-Codes durch produktionsgenaue Code-Snippets. Anstatt zu raten, hat der Agent jetzt echten Code, den er von Ihrer Codebasis verwenden kann. Es wird genau angegeben, welche Komponente importiert werden soll und welche Eigenschaftswerte übergeben werden müssen.

Hier ist ein praktisches Beispiel für den Unterschied. Ohne Code Connect wird MCP von Figma den Coding-Agenten React folgendermaßen übergeben:

<div role="tablist" className="flex gap-1 rounded-md bg-gray-100">
  <button className="bg-white shadow rounded">Design</button>
  <button className="text-gray-600">Code</button>
</div>

Mit Code Connect erhält der Coding-Agent einen genauen Code-Schnipsel, der aus Ihrem bestehenden Designsystem stammt, und alles, was er tun muss, ist, ihn an der richtigen Stelle zu verwenden.

<SegmentedControl value="design" options={["Design", "Code"]} />

So haben wir den Einfluss von Code Connect gemessen

Wir haben ein Evaluierungssystem entwickelt, das denselben Satz von Design-zu-Code-Aufgaben auf zwei Arten ausführt: einmal ohne Code Connect und einmal mit Code Connect-Vorlagen. Für jeden unserer 27 Testfälle haben wir die Code-Qualität, Token-Nutzung und Dauer gemessen.

Wir haben zwei Designsysteme getestet, beide basieren auf React: Simple Design System (SDS), Figma's Beispiel-Designsystem, und Figma Pattern Library (FPL), unser größeres und komplexeres internes Designsystem. SDS ist sehr gut mit Code Connect verbunden; die von uns getesteten MCP-Antworten bestanden im Durchschnitt zu 20 % aus Code Connect-Snippets. FPL ist ein Beispiel für ein realistisches Designsystem mit lückenhafter Code Connect-Abdeckung, wobei Code Connect etwa 6 % der Antworten ausmachte.

Die LLM-Urteile bewerteten das Endergebnis anhand von Code-Snippets, die wir als genau kennen, und was wir im idealen Fall vom Agenten erzeugt haben möchten. Diese wurden anhand des folgenden Rubrik der Code-Qualitätsmetriken bewertet:

1. Korrektheit: Erfüllt die Implementierung korrekt die Aufgabenanforderungen? Gibt es Bugs, logische Irrtümer oder fehlende Funktionalitäten?
2. Codequalität: Ist der Code sauber, idiomatisch und gut organisiert? Folgt er den Konventionen der verwendeten Sprache/des Frameworks?
3. Wartbarkeit: Ist der Code lesbar, gut strukturiert und leicht zu ändern? Sind Variablen-/Funktionsnamen beschreibend? Wird die Komplexität gut verwaltet?
4. Vollständigkeit: Deckt die Implementierung alle Aspekte der Aufgabe ab? Werden Randfälle angemessen behandelt?
5. Best Practices: Richtiges Fehlerhandling, Typsicherheit, Leistungseigenschaften, Barrierefreiheit und Sicherheit? Keine unnötige Komplexität oder toter Code?

Die Endnote war eine 1–4 Likert-Skala:

1. Fehlerhaft: Der Code enthält Syntaxfehler, stürzt ab oder scheitert völlig daran, die Aufgabe auszuführen.
2. Schlecht: Der Code funktioniert teilweise, weist aber erhebliche Probleme auf – schlechte Muster, fehlende Fehlerbehandlung, schlechte Struktur oder wesentliche Korrektheitsprobleme.
3. Gut: Solide Implementierung mit kleineren Problemen – leichte Stilinkonsistenzen, kleine übersehene Randfälle oder kleinere Redundanzen.
4. Exzellent: Sauberer, idiomatischer, gut strukturierter Code, der die Aufgabe korrekt implementiert und Best Practices folgt.

Einige dieser Ausführungen enthielten komplexe Designs zur Implementierung. End-to-End dauerten einige Läufe (einschließlich mehrfacher Ausführungen aller Varianten, um Ausreißerfälle auszuschließen) über 24 Stunden zur Fertigstellung. Auf der Modellseite testeten wir sowohl Claude Sonnet 4.5 als auch Claude Opus 4.7.

Das Ergebnis?

Im Vergleich zur Ausgangsbasis ohne Code Connect erzielten die Aufgaben, die Code Connect-Vorlagen verwendeten, diese mittleren Ergebnisse in Bezug auf die End-to-End-Agentenausführung, bei Nutzung von get_design_context:

• Code-Qualität: +1, von 2 auf 3, auf einer 1–4 Likert-Skala
• Token-Nutzung: -29,5 %
• Dauer: -19.6%

Da es sich hierbei um Medianwerte handelt, verbergen sie einige der Trends, die wir zwischen verschiedenen Fällen beobachtet haben. Der Hauptfaktor, der die Zahlen beeinflusst hat, war die Abdeckung von Code Connect – das ist eine Mischung davon, wie viel der Übergabedesigns aus Komponenten des Designsystems bestehen und wie viele dieser Komponenten mit Code Connect verbunden sind. Je höher diese beiden Aspekte sind, desto größer ist der Anteil von Code Connect-Snippets im Vergleich zu einfachem React in der Antwort des get_design_context-Tools und desto besser sahen die Ergebnisse aus.

Es ist auch erwähnenswert, dass das Simple Design System ein einfacherer Fall für ein LLM ist. Da es unser Beispiel-Designsystem ist, stimmen die Komponenten- und Eigenschaftsnamen bereits gut zwischen Design und Code überein. Selbst damit haben wir größere Verbesserungen festgestellt als mit unserem FPL-Designsystem, da die Abdeckung von Code Connect im SDS höher war. Im Fall des SDS haben wir fast alle Komponenten mit Code Connected versehen.

Wenn die Abdeckung von Code Connect hoch ist, neigen Agenten dazu, weniger explorative Werkzeugaufrufe zu machen und weniger Zeit mit dem Suchen nach Komponenten- und Symbolnamen zu verbringen. Im folgenden FPL-Beispiel inspizierten die Durchläufe ohne Code Connect node_modules, führten breite Suchen nach Icon-Namen durch und bauten in mehreren Durchläufen die Tab-Leiste von Grund auf neu und arbeiteten an benutzerdefiniertem CSS. Mit Code Connect griff der Agent direkt auf die echten Tabs- und Button-Komponenten zu und beendete die Aufgabe in ~77% der Zeit und ~62% der Tokens.

Die Ergebnisse in der Code-Qualität sind ebenso interessant. Ohne Code Connect baute der Coding-Agent die Tabs und Buttons als reinen React-Code und CSS von Hand. Auch wenn es visuell ähnlich aussieht, ist es nicht einmal funktional – die Tabs sind nicht interaktiv, sondern hartcodiert, um wie die Designs auszusehen, einschließlich des ausgewählten Zustands! Beachte außerdem die kleinen Unterschiede bei den Symbolen und den Abständen – Details, die für ein hochwertiges Produkt entscheidend sind; die Ergebnisse mit Code Connect kamen dem Original viel näher.

Hier ist ein Beispiel Code-Schnipsel aus dem Ergebnis ohne Code Connect:

{/* Plain divs for the tabs */}
<div className="lv-tabs">
  <div className="lv-tab lv-tab-inactive"><span className="lv-tab-text-inactive">File</span></div>
  <div className="lv-tab lv-tab-active"><span className="lv-tab-text-active">Assets</span></div>
</div>

…


{/* Raw button element */}
<button className="lv-browse-btn">
  <span className="lv-browse-btn-text">Browse team libraries</span>
</button>

…

/* CSS: ~300 more lines*/
.lv-tab { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-medium, 5px); }
.lv-tab-inactive { background: var(--color-bg, white); }

Mit Code Connect hat der Coding-Agent korrekt Designsystemkomponenten importiert und verwendet, was zu prägnanterem, hochwertigerem Code führte:

{/* Usage of the FPL tab component */}
const [tabPropsMap, tabPanelPropsMap, tabManager] = Tabs.useTabs<'firstTab' | 'secondTab'>(
  { firstTab: true, secondTab: true },
  { defaultActive: 'secondTab' },
)

<Tabs.TabStrip manager={tabManager}>
  <Tabs.Tab {...tabPropsMap.firstTab}>File</Tabs.Tab>
  <Tabs.Tab {...tabPropsMap.secondTab}>Assets</Tabs.Tab>
</Tabs.TabStrip>

…


{/* Usage of the FPL Button component */}
<Button variant="primary" width="fill" onClick={() => {}}>
  Browse team libraries
</Button>

Erkenntnisse für alle, die mit LLMs entwickeln

Agenten wissen nicht automatisch, was „guter“ Code in Ihrem Unternehmen bedeutet – Sie müssen ihnen den richtigen Kontext geben. Wenn man sie sich selbst überlässt, werden sie Zeit und Tokens darauf verwenden, die richtigen Komponenten in Ihrem Designsystem zu finden, oder sie werden sie gerne neu erstellen. Das Ergebnis sieht vielleicht optisch korrekt aus, aber der Code ist vielleicht nicht das, was du in deine Codebasis einpflegen möchtest. Um gute Arbeit zu leisten, benötigen Agenten expliziteren, strukturierten Kontext – in diesem Fall einen echten Code-Schnipsel, wie man die Komponente in Ihrem Code-Repository implementiert.

Wenn du den Figma-MCP-Server bereits nutzt, kannst du mit Code Connect weitere Teile deines Designsystems einbinden, um schneller, kostengünstiger und mit qualitativ hochwertigeren Ergebnissen vom Entwurf zum Code zu gelangen. Die Anleitung findest du hier.