Comment Coinbase a utilisé Code Connect pour guider ses agents et réduire les coûts liés aux tokens

L'équipe Coinbase Design System (CDS) soutient la plus grande plateforme d'échange de cryptomonnaies des États-Unis, sur mobile et sur le web, pour les particuliers comme pour les entreprises. Elle a mis à l'échelle un design system axé sur la qualité, la cohérence et l'accessibilité – mais qu'est-ce qui doit changer lorsque les principaux utilisateurs passent des ingénieurs aux agents ? Le responsable technique Erich Kuerschner a vu une opportunité d'améliorer la productivité des agents avec le serveur MCP de Figma, Code Connect et les propres compétences de l'équipe CDS. Pour le vérifier, il a réalisé une évaluation et a constaté qu'en moyenne, Code Connect réduisait les coûts de 22,5 % et le temps d'exécution des tâches d'environ 22 %.

« Les tests ont montré que Code Connect réduit souvent le nombre de tokens que votre agent doit consommer pour convertir un design Figma en code. », dit-il. « La qualité de ce code est nettement supérieure, grâce au meilleur contexte que Code Connect fournit. » Voici comment l'équipe CDS s'est adaptée aux nouveaux workflows d'ingénierie grâce à Code Connect et a mesuré son impact sur les délais, la qualité et les coûts.

Intégrer Code Connect aux workflows agentiques

L'équipe CDS disposait déjà de quelques compétences d'agent visant à apprendre aux agents à respecter les bonnes pratiques de leur design system : choisir les composants adaptés à la tâche, éviter les composants et les modèles obsolètes, utiliser les tokens de design CDS, et bien plus encore. Elle avait bâti un environnement interne de prototypage en s'appuyant sur ces compétences ; ainsi, tout ce qui y était créé restait par défaut dans le périmètre CDS. Toutefois, ces deux éléments étaient conçus pour l'écriture de code à partir de zéro. Un autre workflow courant restait mal pris en charge : la transformation d'un design Figma en code CDS de qualité production. Les ingénieurs produit ont indiqué à l'équipe que ce processus était lent, imprécis et trop imprévisible pour être intégré à leurs workflows habituels.

Code Connect constituait le levier évident, mais CDS n'avait pas mis à jour ses correspondances depuis une date antérieure à la sortie du serveur MCP de Figma. Ce qui existait était obsolète, et de nombreux composants nouveaux n'avaient aucun modèle du tout. « D'après ce que j'avais entendu dire de Code Connect, il s'agissait d'un moyen d'améliorer la fiabilité des workflows design vers code sans avoir à compter uniquement sur les compétences de nos agents », déclare Erich.

L'adoption complète et la modernisation de la configuration de Code Connect impliqueraient des mises à jour de centaines de composants à travers le mobile et le web. Erich a utilisé Claude Code pour créer un workflow autonome capable de traiter en parallèle une liste de composants Figma, la compétence figma-code-connect se chargeant de la rédaction des modèles. « En quatre heures environ, nous sommes passés d'une migration partielle de nos composants vers le nouveau format Code Connect à une couverture complète de notre design system », dit-il.

Aujourd'hui, chaque composant CDS dans Figma est connecté à son homologue dans le code via Code Connect. Code Connect fait partie de chaque workflow de composant de l'équipe d'ingénierie CDS. L'équipe utilise le serveur MCP de Figma pour récupérer les spécifications de conception, créer ou mettre à jour des composants dans le code, et maintenir les modèles Code Connect correspondants synchronisés avec les dernières modifications

Configurer l'évaluation

Il était temps d'évaluer la qualité des résultats générés par les agents en fonction de la consommation de tokens et du temps consacré à la mise en œuvre, avec et sans Code Connect. « Nous voulions comprendre ce que Code Connect nous apportait et si cela permettrait de répondre aux préoccupations de nos ingénieurs produit concernant la fiabilité du workflow design vers code », déclare Erich.

Il a utilisé le même design, le même prompt et le même modèle (Sonnet 4.6) pour trois essais dans une base de code vierge, en réinitialisant le tout après chaque passage pour « s'assurer qu'il ne restait aucun indice susceptible d'être exploité par l'agent suivant », explique-t-il. Il a également dû prendre en compte la mise en cache des prompts, susceptible d'influer sur l'expérience et de générer des résultats de test positifs pour des raisons étrangères à Code Connect. Le prompt était simple et volontairement vague : Implémente ce design depuis Figma, avec un lien vers le fichier de design.

L'objectif était d'adopter un design qui ne soit ni trop simple (par exemple, un bouton accompagné d'un champ de saisie) ni trop complexe (par exemple, l'écran d'accueil complet d'une application mobile), mais qui se situe à mi-chemin.

Il y avait aussi quelques pièges, explique Erich : « Dans l'en-tête de notre exemple fictif, nous avons utilisé le composant CDS Stepper ; celui-ci possède des dizaines de propriétés et s'avère assez complexe au niveau du code. Le plus important était de disposer d'une grande variété de composants, y compris ceux qui posaient souvent des difficultés aux agents. Ces derniers étaient notamment connus pour « halluciner » les noms des illustrations et des icônes. Une fois l'adoption de Code Connect finalisée, ce problème a disparu du jour au lendemain. »

Mesurer le ROI de Code Connect

Qu'il s'agisse des résultats visuels ou du code produit, les deux principaux facteurs examinés par Erich étaient le choix des composants et le respect du design system. « Avec Code Connect, la sélection de composants était excellente », dit-il. Les agents utilisaient systématiquement les composants appropriés – y compris des éléments complexes comme le ListCell et le Stepper – plutôt que de les créer manuellement à partir de primitives : « Une erreur fréquente que nous constations chez les agents avant l'utilisation de Code Connect consistait à construire le composant Stepper à l'aide de deux barres de progression et d'étiquettes. » Il a vérifié si les agents utilisaient les bons tokens de conception – en privilégiant les couleurs et les dimensions sémantiques plutôt que le style via CSS ou des styles en ligne.

Les trois essais ont montré que Code Connect permettait de réaliser le même travail à moindre coût et plus rapidement. En moyenne, il a réduit l'utilisation de tokens de 11,5 %, le temps de mise en œuvre de 22,3% et les coûts de 22,5 %, chaque essai s'améliorant selon ces mesures. L'évaluation a clairement montré que les compétences des agents et Code Connect ont des rôles différents :

• Les compétences de l'agent CDS déterminent la manière dont il met en œuvre une solution. Du choix du modèle approprié à l'évitement des fonctionnalités obsolètes, ces décisions garantissent des résultats de haute qualité, en particulier à grande échelle.
• Code Connect fournit à l'agent le meilleur contexte possible lorsqu'il travaille à partir de designs. Grâce à la disponibilité immédiate du contexte des composants, le système a consommé moins de tokens pour effectuer des recherches et des tentatives, ce qui a permis de réaliser des économies de temps et de coûts, quelles que soient les compétences des agents.

Au-delà de ses tests avec Code Connect, l'équipe CDS évalue régulièrement ses compétences en matière de design system afin de s'assurer que leur évolution ne pose pas de problème aux agents. Elle a remarqué qu'à chaque nouvelle génération de modèles, les agents parviennent de mieux en mieux à utiliser les CDS sans recourir à des compétences. Eric considère les évaluations comme un moyen de se préparer à une époque où les compétences pourraient ne plus être nécessaires – la qualité du contexte, en revanche, comptera toujours. « Vous ne voulez pas vous retrouver coincé sans Code Connect dans ce scénario futur », dit-il, « car nous avons vu ce qui se passe : l'agent peut complètement laisser libre cours à son interprétation du design. »

En savoir plus sur Code Connect, qui est disponible dans les forfais Organisation et Entreprise pour les licences Full et Dev.