De knop bestaat al. Toch maakt een AI-agent een nieuwe, met een eigen kleur, andere afstanden en een extra variant. Op de screenshot lijkt de replica erop. In het project is er echter een tweede component bijgekomen die voortaan apart onderhouden zou moeten worden. Het probleem is niet alleen beeldbegrip, maar ontbrekende componentidentiteit.
Figma Code Connect koppelt designcomponenten aan hun tegenhangers in code en maakt deze relaties bruikbaar voor Dev Mode en MCP. De huidige documentatie beschrijft daarmee een specifieke route voor context. Ze toont geen algemene verbetering van kwaliteit of kosten aan. Onze vraag is: welke informatie heeft een agent nodig om de bestaande knop daadwerkelijk te hergebruiken?
De variant is een contract
Onze eigen voorbeeldcomponent heet QuietButton. Deze heeft een primaire en een secundaire weergave en daarnaast een uitgeschakelde status. De opdracht is niet „Bouw iets vergelijkbaars”, maar „Gebruik deze component in een toegestane configuratie”. Dat klinkt vanzelfsprekend, maar het vereist een precieze relatie tussen design en code.
Design: understated action button
Code: QuietButton
Allowed variant: secondary
Label: View details
State: enabledDeze kaart is een eigen mappingschema, geen configuratiebestand van Code Connect. Ze maakt zichtbaar waar een agent anders zou moeten gokken. Een gelijkklinkende waarde zoals „quiet” is niet automatisch een geldige parameter als de echte component „secondary” verwacht.
Hetzelfde geldt voor inhoud en status. Een knop die ter decoratie gedimd is, kan anders geïmplementeerd zijn dan een bedieningselement dat echt uitgeschakeld is. De visuele indruk alleen is daarom niet genoeg voor de technische mapping.
Eén klein echt voorbeeld is beter dan een lange stijlbeschrijving
Geef de agent naast de mapping een bestaand gebruik mee. Voor een eenvoudige HTML-component kan dat er zo uitzien:
<button class="action action--secondary" type="button">
View details
</button>De classes horen bij ons voorbeeld. Welke CSS-regels ze dragen, moet je eigen project bepalen. De meerwaarde is dat de agent niet eerst een nieuwe structuur hoeft te verzinnen. Hij krijgt een concreet uitgangspunt met beperkte wijzigingen.
Een nuttige aanvulling benoemt wat behouden moet blijven: dezelfde component, geldige varianten, bestaande toetsenbordbediening en het eigenlijke doel van de actie. Een uitgebreide materiaalverzameling met tegenstrijdige voorbeelden zou minder kunnen helpen dan een kort, actueel fragment.
Verouderde mappings kunnen heel overtuigend lijken
Stel dat het project een property hernoemt. De oude mapping blijft begrijpelijk en netjes opgemaakt. Voor de agent is het plausibele context, maar technisch onjuist. De koppeling met de huidige code moet daarom ook worden onderhouden.
Kies voor een praktische controle van wat je al hebt drie veelgebruikte componenten. Noteer van elk één echt gebruik en de toegestane varianten. Vergelijk deze details met de huidige code voordat je een nieuwe mapping publiceert. Deze voorgestelde oefening beweert niet dat er al een repositoryreview is uitgevoerd of dat een AI-run geslaagd is.
Een tegenvoorbeeld maakt de mapping scherper: wat moet er gebeuren als het design om een variant vraagt die de component helemaal niet heeft? In plaats van stilletjes een nieuwe knop te verzinnen, moet de implementatie deze lacune benoemen. Ontbrekende context wordt dan een bewuste ontwerpbeslissing die in het echte project kan worden genomen.
Merkwaarden vullen de component aan, maar vervangen hem niet
Als je een eigen paginacomponent hergebruikt in KENJTEC, kan het merkblad van KENJTEC BrandStudio ai specifieke kleuren, lettertypen en vormen leveren. Pas deze waarden bewust toe op het bestaande HTML/CSS-voorbeeld in plaats van de component alleen op basis van een afbeelding opnieuw te laten uitvinden.
Je eigen HTML, CSS en JavaScript kun je vervolgens handmatig voorbereiden in de ontwikkelaarsmodus van KENJTEC WebSiteBuilder ai, apart bekijken in de preview en publiceren als custom code. Dit betekent geen automatische Code Connect-import en geen hosting van React-apps. De mapping blijft in je externe ontwikkelworkflow.
De technische les is overdraagbaar: een designsysteem bestaat niet alleen uit vergelijkbare vormen. Het heeft controleerbare relaties nodig tussen zichtbare varianten en echte componenten. Hoe concreter deze relaties zijn, hoe minder een agent hoeft te gokken en hoe makkelijker het is om het resultaat ervan te beoordelen tegen het bestaande project.
Bronnen en status
Onderzoek en documentatie, stand per 25 oktober 2026. Code Connect: Introduction.
