Već neko vrijeme testiram AI alate za dizajn. Stitch, Pencil, Figma Make, Claude Design. Svi proizvode vizualno dobre ekrane. Nijedan ne čita vaš dizajn sistem. Nijedan ne kreira komponente koje možete ponovno koristiti.
Ali iza svega toga postoji tiši problem. Kad sam ih testirao, dao sam im styleguide datoteke, token fileove i definicije komponenti. Alati su većinu toga ignorirali. Zaključak je bio da AI alati nisu spremni za produkcijski dizajn.
To je točno. Ali postoji i drugi način čitanja iste situacije. Da su alati imali pravilnu token arhitekturu s kojom mogu raditi, i da su je zaista mogli pročitati (što Figma MCP danas omogućuje), output bi bio strukturalno drugačiji. Problem nije samo u tome što AI alati ignoriraju vaš sistem. Problem je u tome što većina sistema nije izgrađena na način koji AI alatima daje nešto smisleno za čitanje.
Ovaj post govori o izgradnji te osnove. Design system strukturiran oko tokena, ne samo komponenti, tako da kad se AI integracija konačno zatvori (a hoće), system bude spreman za čitanje i od strane strojeva i od strane ljudi.
Tokeni prije komponenti
Instinkt je uvijek krenuti s gumbima i karticama. To je vidljiv, zadovoljavajući dio izgradnje izajn sistema. Ali komponente izgrađene bez pravilnog token sloja ispod određuju odluke koje kasnije postaje skupo mijenjati. I ne daju AI alatima ništa strukturirano na što se mogu osloniti.
Pristup koji stavlja tokene na prvo mjesto znači organiziranje Figma varijabli u tri kolekcije koje referenciraju jedna drugu. Svaki sloj ima drugačiji posao.
Brand kolekcija sadrži sirove vrijednosti. Kompletne ljestvice boja (od 50 do 950 za svaki ton), veličine tipografije u pikselima, spacing jedinice, border radijuse. Te vrijednosti nemaju mišljenje o tome gdje ili kako se koriste. One su kompletan set opcija dostupnih sistemu.
Ljestvice boja zaslužuju pažnju. Pravilna ljestvica prolazi kroz cijeli raspon za svaku obitelj boja u konzistentnim koracima. Primarna brand boja, neutralne boje, semantičke boje za success, warning i error stanja. Izgradnja kompletne ljestvice unaprijed je bitna jer šest mjeseci kasnije netko će trebati suptilan hover state ili specifičan kontrast koji nije bio planiran. Ako ljestvica ima praznine, rješenje je hardkodirana vrijednost. A hardkodirane vrijednosti su način na koji sistemi počinju pucati.
Alias kolekcija dodaje značenje. Umjesto da komponenta direktno referencira "Blue 500", alias token poput "color-primary" ili "color-surface" pokazuje na brand vrijednost. Alias nosi dizajnersku namjeru. Brand token nosi sirovi broj.
Tu dark mode prestaje biti problem. Dva moda u alias kolekciji. Light mode mapira "color-surface" na najsvjetliji neutral. Dark mode mapira ga na najtamniji. Svaka komponenta koja koristi "color-surface" prebacuje se automatski. Bez dupliciranih komponenti, bez ručnih overrideova, bez zasebnog dark-mode Figma filea.
Tipografija funkcionira na isti način. Umjesto da ručno primjenjujete "16px Monument Grotesk Regular" po desetcima frameova, alias poput "text-body-default" objedinjuje font family, weight, size i line height u jedan token. Ažurirajte alias, i cijeli system prati.
Mapped kolekcija povezuje tokene s komponentama. Tokeni poput "button-background-primary", "input-border-default", "card-padding-horizontal" referenciraju alias tokene, koji referenciraju brand tokene. Tri sloja.
Ovo djeluje kao pretjerani inženjering dok ne dođe dan kad netko treba promijeniti primarnu boju gumba. S mapped tokenima, to traje pet sekundi. Bez njih, traje cijelo popodne traženja po frameovima.
Struktura s tri sloja također omogućuje multi-brand podršku. Zamijenite brand kolekciju i sve nizvodno razriješi se na nove vrijednosti. Iste komponente, drugačiji vizualni identitet.
I tu se priča vraća na AI. Kad sam eksportirao naš styleguide kao JSON i dao ga Claude Designu, datoteka je sadržavala svaki token koji koristimo u produkciji. Claude Design je neke od njih koristio, a druge ignorirao. Bez povratne informacije o tome koje tokene je razumio, a koje preskočio. Ali činjenica da su tokeni postojali u strukturiranom, slojevitom formatu upravo je ono što Figma MCP čita. AI agent koji koristi MCP ne generira gumb od nule. On povlači gumb iz vašeg sistema. Token arhitektura je sučelje između vaših dizajnerskih odluka i bilo kojeg alata (ljudskog ili AI) koji ih koristi.
Responsive kolekcija za breakpoint-aware tokene
Izvan tri osnovna sloja, četvrta kolekcija pokriva vrijednosti koje se mijenjaju po breakpointima. Heading koji je 48px na desktopu postaje 32px na mobitelu. Container padding se pomiče sa 64px na 24px.
Definiranje tih vrijednosti u responsive kolekciji s modovima za svaki breakpoint znači da vrijednosti žive na jednom mjestu. Prebacite mod, i dizajn pokazuje kako se prilagođava. Bez ručnih overrideova po frameovima.
Tipografija od ovoga ima najviše koristi. Ljestvice tipova trebaju drugačije proporcije na različitim veličinama ekrana. Responsive kolekcija vam omogućuje definiranje "heading-1-size" sa zasebnim vrijednostima za mobitel, tablet i desktop. Komponenta ostaje ista. Kontekst se mijenja.
Form komponente kao pravi test
Tokeni su nevidljiva infrastruktura. Test toga radi li arhitektura je ono što se događa kad počnete graditi komponente na njoj. Form elementi su najteži test jer nose najviše kompleksnosti stanja.
Jedan text input ima najmanje osam stanja: default, hover, focused, filled, disabled, error, error-focused, read-only. Svako stanje treba zasebne vrijednosti za border boju, background boju, boju teksta, boju placeholdera i boju labela. Pomnožite to sa svakim form elementom u systemu (checkbox, radio, select, textarea, toggle) i broj individualnih dizajnerskih odluka brzo raste.
S mapped tokenima, svaka od tih odluka donosi se jednom i referencira posvuda. "input-border-default" referencira alias "color-border-subtle". "input-border-focus" referencira "color-primary". "input-border-error" referencira "color-error". Jedna komponenta, sva stanja pokretana token slojem.
Labeli i helper tekst najbolje funkcioniraju kao zasebne komponente koje se kompoziraju s inputom. Label koristi "text-label" tokene. Helper tekst koristi "text-caption" tokene za default stanje i "color-error" za greške. Gradnja njih kao nezavisnih dijelova znači da ista label komponenta radi s checkboxima, radio buttonima i selectima. Bez ponovne izgradnje.
Checkboxi i radio buttoni prate isti token obrazac. Checked, unchecked, indeterminate. Dijele većinu svojih token referenci s input poljem. Focus ringovi, error stanja, disabled opacity. Definirajte ih za inpute, i ostali form elementi ih nasljeđuju. Konzistentnost postaje svojstvo systema umjesto nečega što se nameće ručno.
Kad atomski dijelovi postoje, form grupe ih kompoziraju. "Form field" obuhvaća label, input i helper tekst. "Form section" grupira više polja s konzistentnim spacingom iz spacing tokena. Svaki sloj referencira istu osnovu. Promijenite border radius token i svaki form element se ažurira. Promijenite error color alias i svako error stanje u systemu ga reflektira.
Zašto je ovo danas važnije nego prije
Dizajn sistemi su oduvijek bili bitni za konzistentnost i brzinu. Ali AI alati dodaju novi razlog da se arhitektura postavi kako treba.
U mojim prethodnim testovima, svaki AI alat za dizajn generirao je ekrane u vakuumu. Stitch, Pencil, Figma Make. Sjedite u projektu s 200+ komponenti i AI gradi sve od nule, kao da vaš design system ne postoji. Vizual je u redu. Struktura je prazna.
Tehnički jaz se zatvara. AI agenti već mogu čitati vaše Figma tokene, komponente i auto-layout pravila kroz MCP. Most postoji. Pitanje je daje li mu vaš sistem nešto vrijedno za čitanje.
Ravna lista hardkodiranih vrijednosti je čitljiva ali nije korisna. Token arhitektura s tri sloja, jasnim imenovanjem, semantičkim aliasima i mapiranjima na razini komponenti daje AI agentu dovoljno konteksta da generira output koji pripada vašem systemu umjesto da stoji pokraj njega. Brand kolekcija govori agentu koje boje postoje. Alias kolekcija govori mu što te boje znače. Mapped kolekcija govori mu koja boja ide na koju komponentu u kojem stanju.
Ovo nije o tome da AI alati rade dizajn umjesto vas. Kao što sam ranije napisao, alati su ruke, ne mozgovi. Pravi skill je ukus, konceptualizacija, razumijevanje proizvoda. Ali dobro strukturirana token arhitektura znači da ruka poseže za pravim dijelovima umjesto da izmišlja nove.
Gdje dizajn sistemi pucaju
Dizajn sistemi ne propadaju dramatično. Oni erodiraju. Nekoliko obrazaca se ponavlja.
Komponente bez tokena. System izgleda koherentno nekoliko mjeseci. Onda netko treba ažurirati primarnu boju i otkrije da je hardkodirana na desetke mjesta. Trud potreban da se to popravi djeluje veći od truda da se krene ispočetka. System se forkira, i dvije verzije počinju divergirati.
Figma bez koda. Figma library je pola dizajn sistema. Ako tokeni ne teku u CSS varijable ili Tailwind config, dizajn i codebase se razilaze sa svakim sprintom. Token struktura s tri sloja mapira se direktno na CSS custom propertije. Brand tokeni postaju root-level varijable. Aliasi ih referenciraju. Mapped tokeni referenciraju aliase. Arhitektura je ista na obje strane.
Otpor pri usvajanju. Dizajn sistem koji je teže koristiti nego graditi od nule neće se koristiti. Ako developer može zgrabiti dijeljenu komponentu i shippati brže nego što bi pisao custom stilove, koristit će system. Ako ne može, gradit će svoju verziju.
Što slijedi
Osnova su brand tokeni. Struktura su alias i mapped slojevi iznad. Dokaz je prvi set komponenti izgrađen u potpunosti na toj osnovi.
Dark mode, multi-brand, responsive breakpointi i konzistentnost komponenti prolaze kroz istu arhitekturu s tri sloja. Svaka odluka donesena na razini tokena teče kroz cijeli sistem. I kad se AI alati konačno povežu s vašim dizajn sistemom kroz MCP (neki to već rade), ti isti tokeni postaju zajednički jezik između vas i stroja.
Posao je u tome da se ti prvi slojevi postave kako treba. Nakon toga, gradnja na njima je laki dio.
