Waarom raadt een AI je componenten mis?

Een AI-agent die Figma-designs omzet naar code heeft één groot probleem: hij ziet de componenten in je design, maar weet niet hoe ze in de echte codebase heten of werken. Dus gaat hij raden. Soms raadt hij goed. Vaker bouwt hij iets na van primitieven, terwijl je al een kant-en-klaar component had liggen.

Dit is iets waar ik eerlijk gezegd te lang mee heb rondgelopen. Ik werkte met Figma en Claude voor design-to-code werk, en de output was wisselend. Soms perfect, soms een handgemaakte versie van een component die we al hadden. Het probleem zat niet in het model. Het zat in de context die ik meegaf.

Code Connect is de oplossing die Figma biedt voor dit probleem. Het is een koppeling (mapping) tussen een component in Figma en zijn tegenhanger in de code. Vergelijk het met een woordenboek: de AI ziet ‘Stepper’ in het design en slaat op in het woordenboek op wat dat in jouw codebase betekent, inclusief alle properties en gebruik.

Zonder dat woordenboek gaat de agent gokken. En bij complexe componenten, zoals een Stepper met tientallen properties, levert dat bijna altijd rommel op. Met een goede design system opzetten-aanpak leg je in één tekstbestand vast hoe jouw merk eruitziet, dat is een laagdrempelig startpunt als je nog geen volledig design system hebt.

Wat leverde 22% tijdsbesparing op in de praktijk?

Coinbase testte Code Connect in een gecontroleerde opzet: hetzelfde design, dezelfde prompt, hetzelfde model, drie keer uitgevoerd. Met en zonder Code Connect. Het resultaat was consistent: elke run met Code Connect was goedkoper, sneller en nauwkeuriger dan zonder. Gemiddeld 22,5% lagere kosten en 22% kortere implementatietijd.

De testopzet was slim. Ze gebruikten een design dat niet te simpel en niet te complex was: een mix van componenten, inclusief een paar lastige gevallen zoals de Stepper (complex, veel properties) en icoon- en illustratienamen (die agents notoir slecht raden).

Dat laatste punt trof me. Agenten hallucineren icoon- en illustratienamen. Ze verzinnen namen die niet bestaan. Na het instellen van Code Connect verdween dat probleem volledig. Niet minder vaak. Verdwenen.

De verklaring is logisch: de agent hoeft niet meer te zoeken en te raden welk icoon er bedoeld wordt. De mapping vertelt het hem direct. Minder zoekwerk betekent minder tokens, en minder tokens betekent lagere kosten en kortere looptijd. Dit is precies waarom ik nu bij elk project als eerste check of het design system goed is opgezet voordat ik een AI-agent op een design loslaat. Een slordig design system is een dure agent.

Overigens controleerde de test ook voor prompt caching, een techniek waarbij eerder verwerkte context hergebruikt wordt. Dat kan resultaten vertekenen als je het niet uitschakelt. Ze deden dat wel, wat de uitkomsten betrouwbaarder maakt.

Agent skills vs. Code Connect: doen ze hetzelfde?

Nee, en dat onderscheid is belangrijk. Agent skills vertellen een AI hoe hij iets moet bouwen: welke patronen te kiezen, welke componenten te vermijden, hoe je design tokens gebruikt. Code Connect geeft de agent context over wat er beschikbaar is. De twee vullen elkaar aan, ze vervangen elkaar niet.

Dit is een inzicht dat ik zelf ook pas later begreep. Ik dacht dat goede instructies (agent skills of een systeem-prompt) genoeg waren om een AI goed te laten presteren op design-to-code taken. Dat klopt deels. Maar instructies over hoe je iets bouwt helpen niet als de agent niet weet wat er al gebouwd is.

De vergelijking die ik gebruik: agent skills zijn de werkwijze van een nieuwe collega, Code Connect is het onboarding-document met alle bestaande componenten. Je hebt beide nodig.

Interessant is ook de langetermijnvisie hierachter. Naarmate AI-modellen beter worden, hebben ze minder expliciete instructies (skills) nodig om goede keuzes te maken. Maar de kwaliteit van de context, weten welke componenten er zijn en hoe ze werken, blijft altijd relevant. Dat maakt Code Connect eigenlijk toekomstvaster dan agent skills.

Wil je begrijpen hoe Figma Skills werken als herbruikbare AI-instructies? Lees dan hoe Figma Skills designers helpen met AI-workflows als goed startpunt om het verschil voelbaar te maken.

Wat moet je nu doen als je een design system hebt?

Check of je componenten in Figma gekoppeld zijn aan de code via Code Connect. Zijn ze dat niet, of zijn de mappings verouderd? Dan geef je elke AI-agent die je gebruikt een slechte startpositie. Updaten hoeft niet per hand: je kunt een agent de mappings laten schrijven op basis van een lijst componenten.

Het Coinbase-team had hetzelfde probleem: bestaande mappings waren verouderd en nieuwe componenten hadden helemaal geen template. Ze losten dat op door een agent in te zetten die de mappings parallel bijwerkte. In vier uur hadden ze volledige dekking voor hun design system.

Dat is de aanpak die ik zou volgen. Niet handmatig elke component doorlopen, maar een gestructureerde lijst maken en een agent het werk laten doen. Let op: de output moet je nog wel controleren. Een agent die mappings schrijft kan fouten maken, zeker bij complexe componenten.

Heb je nog geen design system? Dan is dit een goed moment om na te denken over hoe je dat opzet. Niet als luxe voor grote teams, maar als fundament voor alles wat je met AI bouwt. Met een DESIGN.md leg je in één tekstbestand vast hoe jouw merk eruitziet, dat is een laagdrempelig startpunt als je geen volledig design system hebt.

Voor wie WordPress gebruikt en wil weten hoe AI past in het bredere plaatje van webdesign en development: AI inzetten voor WordPress-code begrijpen en verbeteren laat zien hoe je AI als sparringpartner gebruikt in plaats van als schrijfmachine.