- Tokeny projektowe to nazwane decyzje: kolory, odstępy, typografia, które zapisujesz raz i używasz wszędzie.
- Gdy AI dostaje tokeny i bibliotekę komponentów, generuje interfejs spójny z twoim stylem zamiast losowego.
- Standard Design Tokens (DTCG) ma stabilną wersję 2025.10, co ułatwia wymianę między narzędziami.
Gdy prosisz AI o interfejs, bez dodatkowych ograniczeń dostajesz coś, co wygląda dobrze, ale każdy kolejny ekran jest nieco inny: inny odcień niebieskiego, inne odstępy, inny promień zaokrąglenia. To zjawisko znają wszyscy, którzy próbowali zbudować spójny serwis z serii niezależnych poleceń. Lekarstwem jest to samo, co stosują zespoły projektowe od lat: tokeny projektowe i biblioteka komponentów. Dają AI wspólny język, w którym wydaje decyzje.
Czym są tokeny projektowe
Token projektowy to nazwana decyzja o wyglądzie: kolor akcentu, kolor tła, skala odstępów, rozmiary czcionek, promień zaokrąglenia, cień. Zamiast wpisywać wartość szesnastkową w pięćdziesięciu miejscach, zapisujesz ją raz pod nazwą i wszędzie używasz nazwy. Zmiana motywu to wtedy zmiana jednej wartości. Dokumentacja Tailwind opisuje to tak: różne projekty potrzebują różnej typografii, kolorów, cieni czy punktów przełamania, a te decyzje niskiego poziomu nazywa się tokenami projektowymi. W Tailwind zapisujesz je w zmiennych motywu, definiowanych dyrektywą @theme; wpływają one na to, które klasy użytkowe istnieją w projekcie, a jednocześnie powstają zwykłe zmienne CSS, do których możesz się odwoływać.
Formalnym standardem wymiany tokenów zajmuje się Design Tokens Community Group. Na stronie grupy ogłoszono pierwszą stabilną wersję specyfikacji 2025.10 oraz format JSON, który ma zapewnić interoperacyjność i motywy między narzędziami. Lista uczestników obejmuje między innymi Figmę, Penpot, Sketcha i Style Dictionary. Dla ciebie wniosek jest praktyczny: tokeny zapisane w otwartym formacie można przenosić między narzędziem do projektowania a kodem.
Biblioteka komponentów jako drugi ogranicznik
Tokeny określają wartości, ale nie powtarzalne elementy, takie jak przycisk, pole formularza czy karta. Tu pomaga biblioteka komponentów. shadcn/ui opisuje się jako zestaw dobrze zaprojektowanych, dostępnych komponentów i platformę dystrybucji kodu. Komponenty trafiają do twojego projektu jako kod, który możesz zmieniać, a dokumentacja wspomina też o integracji z narzędziami AI: jest serwer MCP, rejestry komponentów i możliwość otwarcia komponentu w v0. Kiedy powiesz agentowi, że ma używać komponentów z biblioteki i tokenów z motywu, jego swoboda spada, a spójność rośnie.
| Co zapisujesz | Efekt dla AI | |
|---|---|---|
| Tokeny kolorów | Nazwane kolory marki i stanów | Brak wymyślonych odcieni |
| Skala odstępów i typografii | Kilka rozmiarów zamiast dowolnych | Spójny rytm układu |
| Komponenty | Przycisk, pole, karta w jednym stylu | Powtarzalne elementy interfejsu |
| Reguły w pliku instrukcji | Zasady użycia tokenów i komponentów | Zgodność z systemem przy każdym ekranie |
Jak przekazać system AI
Najskuteczniejszy sposób to zapisać system w plikach projektu. Tokeny trzymaj w jednym pliku motywu. Komponenty w jednym katalogu. W pliku instrukcji dla agenta, takim jak CLAUDE.md, dopisz kilka zdań: używaj wyłącznie tokenów z motywu, nie wpisuj wartości kolorów w kodzie, buduj ekrany z komponentów z biblioteki, a nowego komponentu dodawaj tylko wtedy, gdy żaden nie pasuje. Szczegóły takiego pliku opisuję w artykule o konfiguracji Claude Code. Opisz też zasady dostępności, na przykład minimalny kontrast, bo inaczej agent zoptymalizuje wygląd kosztem czytelności.
- 01DecyzjeKolory, odstępy, typografia, promienie.
- 02TokenyNazwane zmienne w jednym pliku motywu.
- 03KomponentyBiblioteka lub własny zestaw.
- 04InstrukcjaZasady użycia zapisane dla agenta.
- 05GenerowanieEkrany z tokenów i komponentów.
- 06PrzeglądZgodność, kontrast, spójność.
Gdy nie masz jeszcze systemu
Nie musisz zaczynać od pełnego systemu. Wystarczy mała wersja: pięć kolorów, trzy rozmiary odstępów, dwa rozmiary tekstu, jedna rodzina czcionek i trzy komponenty. Zapisz je jako zmienne CSS, poproś AI o zbudowanie strony wyłącznie z nich i oceń wynik. Taki mały system rośnie razem z projektem. Najczęstsze błędy to trzy rzeczy. Za dużo tokenów na starcie, z których połowy nikt nie używa. Nazwy opisujące wartość, a nie rolę, na przykład „niebieski-500” zamiast „akcent”, co utrudnia późniejszą zmianę motywu. Brak zasad użycia, przez co agent i tak wpisuje kolory na stałe. Dobrze jest nazywać tokeny według roli, trzymać ich niewiele i raz na jakiś czas przeszukiwać kod pod kątem wartości, które powinny być tokenami.
Przykład pracy od makiety do działającego komponentu znajdziesz w artykule Z makiety do komponentu, a całość tematu w hubie Design → kod.
Stan wiedzy: 20 października 2026. Standardy i biblioteki szybko się zmieniają; sprawdzaj dokumentację przed użyciem.