Wie Coinbase mit Code Connect Agenten führt und die Token-Kosten senkt

Das Coinbase Design System (CDS) Team unterstützt die größte Kryptowährungsbörse in den USA sowohl mobil als auch im Web für Verbraucher und Unternehmen. Es hat ein Designsystem aufgebaut, das Qualität, Konsistenz und Barrierefreiheit gewährleistet – aber was muss sich ändern, wenn sich die Hauptbenutzer*innen nicht mehr Ingenieure sind, sondern Agenten? Der technische Leiter Erich Kuerschner sah eine Gelegenheit, den Output der Agenten mit dem Figma MCP Server, Code Connect und den CDS-eigenen Agenten-Skills zu verbessern. Um dies zu testen, führte er eine Bewertung durch und stellte fest, dass Code Connect durchschnittlich die Kosten um 22,5 % und die Aufgabenfertigstellungszeiten um etwa 22 % reduziert.

„Die Tests zeigten, dass Code Connect oft die Anzahl der Token reduziert, die ein Agent verbrauchen muss, um ein Figma-Design in Code umzuwandeln“, sagt er. „Die Code-Qualität ist dank des besseren Kontexts, den Code Connect bietet, deutlich höher.“ Hier erfahren Sie, wie das CDS-Team sich für neue Engineering-Workflows mit Code Connect angepasst hat und wie es seine Auswirkungen auf Zeit, Qualität und Kosten gemessen hat.

Einbindung von Code Connect in agentische Arbeitsabläufe

Das CDS-Team hatte bereits einige Skills entwickelt, um die Agenten zur Einhaltung der Design Best Practices zu zwingen: die richtigen Komponenten für die Aufgabe zu wählen, veraltete Komponenten und Muster zu vermeiden, CDS-Design-Token zu nutzen und vieles mehr. Auf Grundlage dieser Skills wurde eine interne Prototyping-Testumgebung aufgebaut, sodass alles, was dort entstand, von vornherein an das CDS gebunden war. Aber beide waren darauf abgestimmt, von Grund auf neuen Code zu schreiben. Ein anderer gängiger Workflow war hingegen noch unterversorgt: die Umwandlung von Figma-Designs in produktionsfertigen CDS-Code. Produktingenieure berichteten, dass der Prozess zu langsam, ungenau und unvorhersehbar sei, um in ihre regulären Abläufe eingebaut zu werden.

Code Connect war die offensichtliche Lösung, aber die Mappings stammten noch aus der Zeit vor der Veröffentlichung des Figma MCP-Server. CDS hatte sie seither nicht aktualisiert. Was da war, war veraltet, und für viele neue Komponenten gab es überhaupt keine Vorlagen. „Nach dem, was ich über Code Connect gehört hatte, bot es wohl eine Möglichkeit, die Zuverlässigkeit von Design-zu-Code-Workflows zu verbessern, ohne ausschließlich auf Agenten-Skills angewiesen zu sein“, erzählt Erich.

Die vollständige Aktualisierung des Code-Connect-Setups würde Updates von Hunderten von Komponenten für Web und mobil erfordern. Erich entwickelte mit Claude Code einen agentischen Workflow, um Figma-Komponenten listenweise parallel durchzuarbeiten, wobei der Skill figma-code-connect die Vorlagen schrieb. „In etwa vier Stunden waren wir von ein paar vereinzelten Komponenten, die bereits zum neueren Code Connect-Format migriert worden waren, zur vollständigen Abdeckung unseres Designsystems übergegangen“, erzählt er.

Heute ist jede CDS-Komponente in Figma über Code Connect mit ihrem Pendant im Code verbunden. Code Connect ist Teil jedes Komponenten-Workflows im CDS-Engineering-Team. Über den Figma MCP-Server werden Designspezifikationen abgerufen, Komponenten im Code erstellt oder aktualisiert und die entsprechenden Code Connect-Vorlagen der Komponenten mit den neuesten Änderungen synchron gehalten.

Einrichtung der Evaluierung

Jetzt war die Zeit gekommen, die Qualität der Agenten-Outputs mit der Token-Nutzung und dem Zeitaufwand für die Implementierung mit und ohne Code Connect zu evaluieren „Wir wollten verstehen, was Code Connect uns bringt und ob es uns helfen würde, die Bedenken unserer Produktingenieure hinsichtlich der Zuverlässigkeit des Design-to-Code-Workflows zu adressieren“, so Erich.

Er verwendete dasselbe Design, denselben Prompt und dasselbe Modell (Sonett 4.6) für drei Durchläufe in einer leeren Codebasis. Nach jedem Durchlauf wurde das Setup zurückgesetzt, um „sicherzustellen, dass keine Spuren für den nächsten Agenten gelegt wurden“, wie er erzählt. Ebenfalls zu berücksichtigen war der Prompt-Caching-Effekt, der das Experiment potenziell beeinflussen und positive Testergebnisse aus Gründen produzieren konnte, die nicht mit Code Connect zusammenhängen. Der Prompt war einfach und absichtlich vage und mit einem Link zur Designdatei versehen: Implementiere dieses Design aus Figma.

Das Ziel war ein Design, das nicht zu einfach (z. .B ein Button mit Eingabe) oder zu komplex (z. .B ein kompletter Startbildschirm einer Mobil-App) war, sondern irgendwo dazwischen lag.

Es gab auch ein paar Fallen, erzählt Erich: „Im Header unseres konstruierten Beispiels verwendeten wir die Komponente CDS Stepper, die Dutzende von Eigenschaften aufweist und im Code ziemlich komplex ist. Das Wichtigste war, eine breite Palette von Komponenten zu haben, einschließlich solcher, die für Agenten häufige Herausforderungen darstellten. Zum Beispiel waren die Agenten berüchtigt dafür gewesen, die Namen von Abbildungen und Symbolen zu erfinden. Nachdem wir die Implementierung von Code Connect abgeschlossen hatten, verschwand dieses Problem über Nacht.“

Der ROI von Code Connect

Sowohl bei der visuellen als auch in der Code-Ausgabe waren die beiden Hauptfaktoren, die Erich betrachtete, die Auswahl der Komponenten und die Einhaltung des Designsystems. „Mit Code Connect war die Komponentenauswahl ausgezeichnet“, sagt er. Die Agenten verwendeten konsequent die richtigen Komponenten, selbst die kniffligen wie ListCell und Stepper, anstatt sie manuell mit Grundelementen zu erstellen: „Ein häufiger Fehler von Agenten ohne Code Connect war, dass sie die Stepper-Komponente mit zwei Fortschrittsbalken und Labels bauten.“ Erich überprüfte, ob die Agenten die richtigen Design-Tokens verwendeten, anhand der Verwendung von semantischen Farben und Größen anstellle der Gestaltung mit CSS oder Inline-Stilen.

Die drei Durchläufe zeigten, dass Code Connect die gleiche Aufgabe günstiger und schneller erledigte. Im Durchschnitt reduzierte Code Connect den Token-Verbrauch um 11,5 %, die Implementierungszeit um 22,3 % und die Kosten um 22,5 %, wobei sich jeder Durchlauf um diese Werte verbesserte. Die Evaluierung machte deutlich, dass Agenten-Skills und Code Connect unterschiedliche Aufgaben haben:

• Die CDS-Agenten-Skills bestimmen, wie der Agent eine Lösung implementiert. Von der Wahl des richtigen Musters bis zur Vermeidung von veralteten Elementen stellen diese Entscheidungen hochwertige Ergebnisse sicher, insbesondere in umfangreichen Anwendungen.
• Code Connect gibt dem Agenten optimalen Kontext ausgehend vom Design. Ausgestattet mit dem Komponentenkontext sparte Code Connect Token ein, die sonst zum Suchen und Raten verbraucht worden wären, und bewirkte unabhängig von den Skills konkrete Kosten- und Zeitersparnisse.

Abseits von Tests mit Code Connect evaluiert das CDS-Team auch regelmäßig seine Designsystem-Skills, um sicherzustellen, dass Änderungen an diesen Skills keine Probleme für die Agenten verursachen. Das Team hat bemerkt, dass mit jeder neuen Modellgeneration die Agenten das CDS auch ohne die Skills immer besser nutzen. Eric sieht die Evaluierungen als eine Möglichkeit, sich auf eine Zeit einzustellen, in der Skills vielleicht nicht mehr gebraucht werden. Aber die Qualität des Kontexts wird immer entscheidend bleiben. „Ich möchte in dieser Zukunft nicht ohne Code Connect dastehen“, sagt er, „weil wir gesehen haben, was passiert: Der Agent wird das Design frei interpretieren.“

Erfahre mehr über Code Connect, das in Organization- und Enterprise-Abos für Full- oder Dev-Lizenzen enthalten ist.