UX Collective: kako naterati Claude Code da prati vaš dizajn sistem u Figmi
O čemu je članak
Objavljen u UX Collective u maju 2026. godine, ovo je praktičan implementacioni vodič dizajnera Sen Lina o specifičnom problemu: kada AI agenti za kodiranje poput Claude Code pišu UI na Figma canvas, skloni su korišćenju hardkodovanih vrednosti — hex boja, veličina u pikselima, sirovih razmaka — umesto tokena dizajn sistema i instanci komponenti koje dizajn sistem definiše. Članak opisuje četiri Claude Code Skills koji to sprečavaju u svakoj fazi procesa izgradnje.
Kontekst
Kako Figma MCP server i Claude Code postaju dostupniji, dizajneri eksperimentišu s agentnim tokovima rada gde jezički model dobija bref i generiše dizajn frejme direktno na Figma canvas. Problem koji Sen Lin rešava strukturne je prirode: agent koji nema eksplicitna pravila o dizajn sistemu će proizvoditi rezultate koji izgledaju prihvatljivo, ali narušavaju logiku sistema. Ispravljanje toga naknadno traje duže nego ispravno uraditi od samog početka.
Tok rada sa četiri skill-a
Prvi skill je preflight provera. Pre nego što se ikakav čvor kreira na canvasu, agent vrši audit mape tokena i registra komponenti. Navodi dostupne promenljive, spacing tokene i stilove teksta u Figma fajlu. Ako preflight ne prođe — na primer, ako nijedna komponenta nije povezana — agent se zaustavlja i prijavljuje problem umesto da nastavi.
Drugi skill rukuje parsiranjem dizajn brefa. Kada dizajner podeli screenshot, referentni link ili pisani opis, ovaj skill pretvara ulaz u strukturirani bref: koje sekcije graditi, koje komponente iz povezane biblioteke koristiti i koje tokene primeniti. To čini nameru eksplicitnom pre nego što počne bilo kakva generacija.
Treći skill primenjuje pretragu biblioteke komponenti. Svaki put kada agent treba UI element, najpre upituje povezanu Figma biblioteku komponenti. Ako postoji odgovarajuća komponenta, koristi njenu instancu. Ako ništa nije pronađeno — gradi od nule. Ovo sprečava agenta da generiše proizvoljni UI kada bi komponenta iz sistema mogla da posluži svrsi.
Četvrti skill je QA prolaz za vezivanje tokena. Nakon pisanja na canvas, agent vrši korak validacije koji proverava svako vezivanje — konvertujući hardkodovane hex vrednosti nazad u njihove semantičke ekvivalente tokena gde je primenjivo, i označavajući sve čvorove koji se ne mapiraju na promenljivu.
Ključni argument
Glavna tačka članka: Claude Code sam po sebi nije dovoljan za usklađenost s dizajn sistemom. Usklađenost zahteva eksplicitne instrukcije u svakoj tački odlučivanja. Četiri skill-a dodaju te instrukcije na strukturiran način, tako da je ponašanje agenta predvidljivo kroz različite projekte i fajlove. Autor to formuliše kao: napišite tok rada jednom i pouzdano ga pozivajte, umesto da ponovo objašnjavate pravila sistema u svakom promptu.
Kome je namenjeno
Produktnim dizajnerima i liderima dizajn sistema koji eksperimentišu s Figma MCP ili Claude Code za generisanje UI i žele da osiguraju da AI-generisani rezultati ostanu u okvirima njihovog dizajn sistema.