Design till kod kräver rätt koppling: din knapp finns redan

Knappen finns redan. Ändå skapar en AI-agent en ny, med egen färg, andra avstånd och en extra variant. På skärmbilden ser kopian likadan ut. I projektet har det dock uppstått en andra komponent som från och med nu måste underhållas separat. Problemet är inte bara bildförståelse, utan saknad komponentidentitet.

Figma Code Connect länkar designkomponenter till deras motsvarigheter i koden och gör dessa relationer användbara för Dev Mode och MCP. Den aktuella dokumentationen beskriver alltså en specifik väg för kontext. Den visar inte någon generell förbättring av kvalitet eller kostnad. Vår fråga är: vilken information behöver en agent för att faktiskt återanvända den befintliga knappen?

Varianten är ett kontrakt

Vår egen exempelkomponent heter QuietButton. Den har ett primärt och ett sekundärt utseende samt ett inaktiverat tillstånd. Instruktionen är inte ”Bygg något liknande” utan ”Använd den här komponenten i en tillåten konfiguration”. Det låter självklart, men det kräver en exakt relation mellan design och kod.

Design: understated action button
Code: QuietButton
Allowed variant: secondary
Label: View details
State: enabled

Det här kortet är ett eget mappningsschema, inte en konfigurationsfil för Code Connect. Det synliggör var en agent annars skulle behöva gissa. Ett värde som låter likadant, till exempel ”quiet”, är inte automatiskt en giltig parameter om den faktiska komponenten förväntar sig ”secondary”.

Detsamma gäller innehåll och tillstånd. En knapp som är nedtonad som dekoration kan vara implementerad annorlunda än en kontroll som faktiskt är inaktiverad. Det visuella intrycket räcker därför inte ensamt för den tekniska mappningen.

Ett litet verkligt exempel är bättre än en lång stilbeskrivning

Ge agenten en befintlig användning vid sidan av mappningen. För en enkel komponent i HTML kan det se ut så här:

<button class="action action--secondary" type="button">
  View details
</button>

Klasserna hör till vårt exempel. Vilka regler i CSS de bär måste fastställas av ditt eget projekt. Mervärdet är att agenten inte förväntas uppfinna en ny struktur först. Den får en konkret utgångspunkt med begränsade ändringar.

Ett användbart tillägg anger vad som ska bevaras: samma komponent, giltiga varianter, befintlig tangentbordsstyrning och handlingens faktiska syfte. En omfattande materialsamling med motstridiga exempel kan hjälpa mindre än ett kort, aktuellt utdrag.

Inaktuella mappningar kan se mycket övertygande ut

Anta att projektet byter namn på en egenskap. Den gamla mappningen förblir begriplig och snyggt formaterad. För agenten är den rimlig kontext, men tekniskt fel. Kopplingen till den aktuella koden måste därför också underhållas.

För en praktisk genomgång av det du redan har kan du välja tre ofta använda komponenter. Anteckna en verklig användning av var och en och dess tillåtna varianter. Jämför dessa uppgifter med den aktuella koden innan du publicerar en ny mappning. Den här föreslagna övningen påstår inte att en granskning av repositoryt redan har genomförts eller att en AI-körning har godkänts.

Ett motexempel skärper mappningen: vad ska hända om designen kräver en variant som komponenten inte har alls? I stället för att i tysthet uppfinna en ny knapp bör implementationen namnge denna lucka. Saknad kontext blir då ett medvetet designbeslut som kan fattas i det faktiska projektet.

Varumärkesvärden kompletterar komponenten men ersätter den inte

Om du återanvänder en egen sidkomponent i KENJTEC kan varumärkesbladet från KENJTEC BrandStudio ai ge specifika färger, typsnitt och former. Tillämpa dessa värden medvetet på det befintliga exemplet i HTML/CSS i stället för att låta komponenten uppfinnas på nytt utifrån enbart en bild.

Din egen HTML, CSS och JavaScript kan sedan förberedas manuellt i utvecklarläget i KENJTEC WebSiteBuilder ai, granskas separat i förhandsvisningen och publiceras som anpassad kod. Detta innebär inte någon automatisk import från Code Connect eller hosting av React-appar. Mappningen stannar i ditt externa utvecklingsflöde.

Den tekniska lärdomen går att överföra: ett designsystem består inte bara av liknande former. Det behöver verifierbara relationer mellan synliga varianter och faktiska komponenter. Ju mer konkreta dessa relationer är, desto mindre behöver en agent gissa och desto lättare är det att bedöma resultatet mot det befintliga projektet.

Källor och status

Research och dokumentation, status per 25 oktober 2026. Code Connect: Introduction.