sie 2026 – wrz 2026
Epsilon Lab
206 komponentów dla strony Epsilon, mierzonych względem Stripe i pilnowanych przez automatyczne bramki
- Strony i aplikacje
- Biblioteka komponentów
- Czas trwania
- 1 miesiąc
- Firma
- Epsilon Solutions
- Rola
- Projekt własny; wyznaczenie poprzeczki jakości i kierowanie agentami
Przegląd
Samodzielna aplikacja Next.js z 206 komponentami w 23 kategoriach, baza, z której budowana jest strona Epsilon. Odwzorowuje zmierzoną geometrię, typografię i animacje Stripe w kolorach Epsilon, a automatyczne bramki jakości utrzymują ją na tyle rygorystyczną, by agenci mogli budować z niej strony bez odchodzenia od wzorca.
Narzędzia
- Next.js
- React
- TypeScript
- Vitest
- Playwright
- axe-core
- Claude Code
Mierzone, nie na oko
Strona potrzebowała bazy komponentów, których jakość się mierzy, a nie ocenia na oko: dokładne odstępy i typografia, dostęp z klawiatury, kontrast, ograniczony ruch i poprawne renderowanie tekstu gruzińskiego. Baza musiała też być na tyle rygorystyczna, by agenci AI mogli budować z niej strony bez odchodzenia od wzorca.
Geometria Stripe, kolory Epsilon
Wartości pochodzą z produkcyjnego CSS i kodu dashboardu samego Stripe, a nie z szacunków. Umowa jest prosta: geometria i interakcja od Stripe, kolor i treść od Epsilon. Dwa pliki tokenów są jedynym źródłem kolorów, czego pilnuje bramka CSS. Nowe komponenty, takie jak menu, combobox, selektor daty i tabela danych, stosują wzorce klawiaturowe WAI-APG.
Bramki i agenci
Jedno polecenie uruchamia bramki CSS, sprawdzanie typów, lint, zestaw testów Vitest, build produkcyjny i test dymny pod kątem błędów konsoli, sieci, hydratacji i axe. W kampanii dopracowania każdy z 206 komponentów dostał własnego agenta Claude Code, a po nich przyszli agenci weryfikujący, wszystko pod moim kierunkiem. Pilotażowy szablon aplikacji w stylu ClickUp z 12 trasami audytowano tak długo, aż pełny przebieg niczego nie wykazał.
Rezultat
Kampania dopracowania naprawiła 730 defektów, a zestaw testów urósł do 5 358 specyfikacji. Dopuszczalna liczba ustaleń axe dotyczących kontrastu kolorów spadła ze 127 do 17, każdy z 1 420 elementów jest osiągalny z klawiatury przy 0 pułapkach, animacja w stanie spoczynku spadła ze 180–240 do ok. 0,2 klatki na sekundę, a przycięte dolne wydłużenia gruzińskich liter zmniejszyły się ze 141 uciętych pikseli do 0.