Proces AI-native

Biblioteka czy własny

Każdy projekt, przy którym pracuję, dostaje design system albo pomagam uporządkować ten, który już ma. Nie zawsze od zera: biblioteki takie jak shadcn/ui czy Material od Google to dobry punkt wyjścia. Najczęściej jednak buduję własne, skalowalne systemy dopasowane do klienta. Kiddosy jest jednym z nich, zbudowanym od zera.

Jak powstaje system

1. 1

   Badania ustalają priorytety

   Kiddosy zaczęło się od kilku dużych badań ilościowych i co najmniej 50 badań jakościowych z rodzicami i organizatorami. To one zdecydowały, które ekrany i komponenty są najważniejsze, więc system rósł wokół prawdziwych zadań, a nie ogólnego zestawu.

   AIsynteza wywiadów i ankietJaco budować najpierw

2. 2

   Najpierw tokeny, w jednym pliku

   Kolory, cienie, obramowania i wymiary powłoki żyją w jednym pliku tokenów; komponenty czytają tylko role. Domyślne wartości Tailwinda są wyłączone, więc nic spoza systemu nie istnieje.

   AIwarianty palet i skalJawartości i ich nazwy

3. 3

   Atomy → molekuły → organizmy → layouty

   Komponenty powstają w tej kolejności, każdy ze wszystkimi stanami z katalogu. Komponent trafia tam, gdzie należy złożonością, a nie tam, gdzie był pierwszy raz potrzebny. Komponenty są prezentacyjne: teksty i linki przychodzą z aplikacji.

   AIzakodowane komponenty i stanyJaanatomia, stany, review

4. 4

   Jeden katalog, decyzje obok siebie

   Każdy przykład stoi w kaflu na tle produktu, a 16 rodzin trzyma się razem. Gdy są konkurujące warianty, stoją obok siebie z pytaniem „który wybieramy?”, dopóki nie zdecyduję; wcześniej żaden nie jest uznany za wzorzec.

   AIalternatywy do porównaniaJawybór

5. 5

   Pilnowane testami

   Test end-to-end zmienia token i sprawdza, że dociera do navbara, sidebara i dolnej nawigacji, więc „zmiana w jednej linii” zostaje jedną linią.

   AIpisze i uruchamia testyJaco nie może się zepsuć

Audyt spójności

Audyt pilnuje zasad stylowania, nie pikseli pojedynczego widoku. Podział pracy jest celowy i trzyma koszt nisko: kod mierzy i liczy, model ocenia tylko to, czego kod nie wie, a decyduję ja.

1. 1Pomiar

   Przeglądarka otwiera katalog i zbiera computed style każdego wariantu: wysokość, promień, ramkę, tło, padding, krój, cień i stan fokusu.

2. 2Wykrycie

   Kod oznacza odstępstwa od wariantu wzorcowego rodziny i wartości spoza skali. Skanery liczą kontrast WCAG każdego tekstu i sprawdzają ramki kontrolek wobec WCAG 1.4.11 (3:1).

3. 3Ocena

   Model językowy odpowiada tylko na to, czego kod nie wie: czy odstępstwo uzasadnia funkcja wariantu i czy ten element w ogóle jest interaktywny?

4. 4Decyzja

   Wynik to lista kandydatów do mojej decyzji, nie wyroki. Pełny przebieg kosztuje poniżej 0,001 $.

Kompletność katalogu

Druga kontrola, w ogóle bez modelu, porównuje trzy zbiory wariantów: zdefiniowane w arkuszu, użyte w produkcie i pokazane w katalogu. Pierwszy przebieg znalazł 16 wariantów, które żyją w produkcie, a brakowało ich w katalogu, i 10 zdefiniowanych, ale nieużywanych. Wszystkie braki z produktu zostały dołożone; cel to zero.

• 16braków z produktu, wszystkie zamknięte
• 10nieużywanych wariantów z arkusza
• 0cel

Gdzie decyduję ja

System powstaje w procesie wieloagentowym, który zbudowałem: role agentów, bramki jakości, niezależna ewaluacja i handoffy. Moje skille Claude robią design review, audyty UX/UI, predykcyjne heatmapy i kontrolę spójności design systemu. Przyspieszają pracę, a decyzje podejmuję ja. Wynik AI weryfikuję przez:

• Użytkowników

  Wywiady i testy użyteczności.

• Dane

  Analityka, testy A/B, heatmapy.

• Heurystyki

  Nielsen, WCAG, zasady samego systemu.

• Review

  Z zespołem, akceptacje, iteracje.

Według mojego szacunku ten sam zakres pracy robię dziś średnio o ok. 70% szybciej niż trzy lata temu, a zaoszczędzony czas wkładam w badania i jakość.