Każdy w firmie może dziś zmienić stronę przez AI. Jak BILL pilnuje spójności
Kiedyś stronę zmieniał jeden zespół. Dziś landing page dodaje marketing, dokumentację developerzy, a cennik poprawia product manager, każdy ze swoim agentem AI. Bez wspólnych zasad każdy z tych agentów wprowadzi trochę inne kolory, odstępy i przyciski.
Kod, który tylko wygląda jak produkt
W tekście z sierpnia 2026 roku David Cai, architekt oprogramowania interfejsów w amerykańskiej firmie fintechowej BILL, opisuje na blogu inżynierskim firmy problem, który zna każdy, kto pracuje z agentami AI. Poproś agenta o stronę ustawień, a dostaniesz wiarygodnie wyglądającą stronę ustawień. Dopiero przy bliższym spojrzeniu widać kolory wpisane na sztywno zamiast tokenów i przycisk zbudowany od zera, prawie taki sam jak ten z biblioteki komponentów.
Pojedynczo te decyzje nie wyglądały na błędy. Razem odciągały produkt od design systemu, a każde odstępstwo kosztowało komentarz w code review i kolejną rundę poprawek. Według tekstu wszystkie te potknięcia miały jedną przyczynę: agent pracował na ślepo. Wiedza o tym, jak zrobić to dobrze, istniała, tylko nie w formie, z której umiał skorzystać.
Design system, który czytają też agenci
BILL ma design system o nazwie Trinity, a jego źródłem prawdy jest Storybook. Zespół nie budował niczego od nowa. Dobudował do istniejącego systemu warstwę dla agentów: narzędzie wiersza poleceń, serwer MCP i zestaw instrukcji (tak zwanych skilli), przez które agent może zapytać o komponenty i zasady.
Efekt widać w testach A/B opisanych w tekście. Agent z dostępem do design systemu za pierwszym razem tworzył właściwe komponenty, a zużycie tokenów na zadanie spadło o 31 do 63 procent. Agent bez tego dostępu w jednym z testów miał zbudować grupę kafelków wyboru, a wstawił zwykłe przyciski radiowe z kolorami i odstępami wpisanymi na sztywno.
To samo widzi Luke Wroblewski
Luke Wroblewski pracuje z design systemami od ponad 20 lat i na swoim blogu opisuje wzorzec znany każdemu zespołowi projektowemu. Firma inwestuje w system, potem nie nadąża z jego aktualizacją i w końcu dokumentacja opisuje produkt, którego już nie ma. Przy agentach AI dochodzi drugi kłopot. Marketing, developerzy i product manager zmieniają stronę przez własnych agentów, a każdy agent wprowadzi własny ton, kolory i odstępy, jeśli nic go nie poprowadzi.
W projektach, które pokazuje (strony Intent, Sol i Aria), działa to tak. Kolory, fonty, rozmiary tekstu i siatka są zapisane w kodzie jako tokeny. Plik AGENTS.md każe agentom korzystać z istniejących klas i zmiennych, zamiast kopiować wartości. Strona design systemu powstaje z tego samego kodu co serwis, więc zawsze jest aktualna. Kiedy ktoś prosi agenta o nowy przycisk, agent sięga po istniejący komponent, który sam dostosowuje się do trybu ciemnego, i nikt nie musi niczego sprawdzać ręcznie.
“Agents read it every single time.”
„Agenci czytają ją za każdym razem” (tłum. CAASUAL).
Tym zdaniem kończy się tekst. Projektanci latami namawiali ludzi do czytania dokumentacji design systemu, z różnym skutkiem. Agenci czytają ją sami, o ile istnieje w formie, którą potrafią przeczytać.
Ilu firm to dotyczy
Z badania zeroheight wśród 123 osób pracujących z design systemami wynika, że 59% widzi interfejsy, które omijają design system. Połowa mówi, że inne działy korzystają z AI bez udziału design systemu, i tyle samo, że cudze użycie AI rodzi problemy. 44% organizacji po prostu to toleruje. Tylko 17% ocenia swoją dokumentację jako bardzo dobrze przygotowaną dla AI, choć 48% ma już serwer MCP.
Od czego zacząć u siebie
Serwer MCP nie jest potrzebny na start. Najrozsądniej zacząć od tokenów, czyli kolorów, typografii i odstępów zapisanych w kodzie jako nazwane wartości, z których korzysta cała strona. Kiedy są gotowe, dochodzi krótka instrukcja dla agentów i automatyczne sprawdzanie, czy nowe ekrany i zmiany w kodzie zgadzają się z design systemem, zanim trafią do klientów. Jeśli firma nie ma jeszcze design systemu, najlepiej zaprojektować go razem z interfejsem, o czym piszemy na stronie o projektowaniu UX/UI.
W naszej usłudze to obszar spójność bez pilnowania. Niespójności wychodzą od razu, a nie po premierze, niezależnie od tego, kto i jakim narzędziem wprowadził zmianę. Jak dobrze opisany design system skraca przekazywanie projektów developerom, piszemy w tekście o design handoffie w erze AI.
AI design workflows
Sprawdźmy, czy Twój design system jest gotowy na agentów
Na bezpłatnej rozmowie ocenimy, czy agenci AI w Twojej firmie mogą korzystać z design systemu, i wskażemy pierwszy krok.
Najczęstsze pytania
Co to jest design system dla agentów AI?
To design system zapisany tak, żeby agenci AI mogli go czytać i stosować: tokeny w kodzie, instrukcje dla agentów i aktualna dokumentacja komponentów. Dzięki temu agent każdej osoby w firmie tworzy interfejs zgodny z resztą produktu.
Czym są design tokens?
To nazwane wartości, z których składa się wygląd produktu, na przykład kolory, typografia, odstępy i zaokrąglenia. Zapisane w kodzie pozwalają zmienić styl w jednym miejscu i pilnować, żeby nikt, ani człowiek, ani agent, nie wpisywał przypadkowych wartości.
Jak sprawdzić, czy projekt i kod są zgodne z design systemem?
Najpewniej automatycznie. AI porównuje nowe projekty i zmiany w kodzie z tokenami i komponentami design systemu i zgłasza odstępstwa przed wdrożeniem.
Źródła
- David Cai, „How We Made Our Design System Bilingual: One Source of Truth for Humans and AI Agents”, BILL Engineering, 17 sierpnia 2026.
- Luke Wroblewski, „Design Systems for AI Agents”, LukeW, 1 października 2026.
- zeroheight, „The State of AI in Design Systems 2026”.
CAASUAL nie jest powiązane z autorami ani z firmami opisanymi w tekście. Przypadki streszczamy własnymi słowami na podstawie publicznie dostępnych materiałów, a jedno zdanie cytujemy w oryginale wraz z naszym tłumaczeniem. Nazwy firm i produktów należą do ich właścicieli.