„Konvencije nisu dokumentovane. One su provođene.“
Pet problema na koje smo stalno nalijetali, i sistem koji ih rješava
Jedanaest projekata naučilo nas je istih pet propusta. CDS je ono što smo napravili da ih prestanemo plaćati.
Kroz jedanaest projekata nalijetali smo na istih pet propusta. Web i mobilni krenu identično, a dvije godine kasnije dijele samo ime. Figma je jedan izvor istine, kod drugi, i nikome nije jasno koji je tačan. Konvencije žive u README-u i poštuju se dok neko nema vremena. Svaki novi proizvod počinje svoj sloj komponenti od nule. A proizvod koji se prodaje pod tuđim brendom ima ili tokene ili trideset kopija koje nikad neće biti održavane.
CDS odgovara na svih pet. Dizajn tokeni dolaze iz Figme automatski, preko MCP servera — tokeni, ne komponente. Token teme razrješava se po platformi — CSS varijabla na webu, sentinel koji native resolver zamijeni — pa split živi jedan sloj ispod mjesta poziva, umjesto da se u njega prelije. A konvencije nisu dokumentovane nego provođene: ~2.450 linija provjera koje obaraju build.
74 komponente, 430 testova, katalog od 81 stranice generisan iz koda.
Problem
Platform.select stavlja granu gdje god je zgodno, uslovni importi puštaju svaki fajl da se razdvoji. Ništa ne ostavlja trag i ništa ne pukne kad se namnože.Ograničenje
Šta smo uradili
Split platforme spušten jedan sloj ispod poziva
createTheme()pretvara token u string koji se razrješava po platformi, pa se${theme.color.fg.default}ponaša isto svuda. Dijeljeni recepti stoje iznad toga i razlikuju se samo po okidaču —:hoverpremapressed. Postoji jedna definicija boje, pa se boje ne mogu razići.Poziv za prijavu identičan na tri meteTokeni iz Figme dolaze automatski
Preko MCP servera, sa ručnim putem kao rezervom. Token sloj je paket —
tokenshranicore,corehraniui— pa izmjena ima jednu ulaznu tačku umjesto pretrage i zamjene kroz cijeli kod. To pokriva tokene, ne komponente: palete, skale i vrijednosti teme dolaze iz Figme, komponente se pišu u kodu.Tokeni, ne komponenteInvarijante dobile vlasnika koji obara build
verify-tokens(902 linije),verify-conventions(1.056) iverify-katalog(485), plus ESLint plugin sa četiri pravila. Jedno pravilo nosi arhitekturu: pattern ne smije imati.nativevarijantu. CI poziva taj lanac i tri prava builda — Next, Vite i Metro — jer jenext buildjedino mjesto gdje se pravilo o'use client'stvarno provjerava.~2.450 linija provjeraIsporučeno kao paket koji je već u upotrebi
U našoj finansijskoj platformi — i na ovom sajtu. Pokrivenost je pun set, ne starter: primitivi, forme, overlayi, navigacija i podaci. Mjereno:
sideEffects: falsespustio je ulaz koji uvozi samoBoxsa 253.075 B na 241.309 B. Zamka stoji zapisana pored:@cds/tokensse ne smije tako označiti, jer se tadreset.cssizbaci i raspored se sruši bez ijedne greške.253.075 B → 241.309 BNijedna komponenta ne zna svoju boju
Samo ime tokena. Novi brend je novi set vrijednosti, ne novi kod. To je dokazano na ranijem proizvodu sa preko trideset bijelih labela; ovdje je arhitektura od prvog commita, a ne spašavanje.
30+ labela, bez novog koda
Box, Button, Card, Input i Text — split se dogodio u primitivima. Identičan je poziv; omotač ostaje platformski.Listovi koji prevode jedan element platforme i ništa više. Ovdje split pripada: mehanički je, ograničen i nevidljiv za sve iznad.
div u View, input u TextInput — i ništa više.Rezultat
Šta bismo uradili drugačije
Pregledali smo svih 74 komponente i našli 188 nalaza koji se svode na tri korijenska uzroka — a sva tri prolaze cijeli lanac alata. Taj pregled je trebao biti na 30 komponenti, ne na 74: isti uzroci su već bili prisutni i bili bi red veličine jeftiniji za ispravku. Sve 188 je ispravljeno; pokrivenost za aria-label i tabindex je još otvorena.
Metoda i tri uzroka opisani su u zasebnom tekstu na blogu.
- TypeScript
- Next.js 16
- React Native 0.87
- Vite
- styled-components
- pnpm workspaces
- Figma MCP
- custom ESLint plugin