ago 2026 – set 2026
Epsilon Lab
206 componenti per il sito di Epsilon, misurati su Stripe e presidiati da controlli automatici
- Siti e app
- Libreria di componenti
- Durata
- 1 mese
- Azienda
- Epsilon Solutions
- Ruolo
- Titolare; definizione dello standard di qualità e guida degli agenti
Panoramica
Un’app Next.js autonoma con 206 componenti in 23 categorie, la base su cui è costruito il sito di Epsilon. Segue la geometria, la tipografia e il movimento di Stripe, misurati con precisione, nei colori di Epsilon, e controlli di qualità automatici la rendono abbastanza rigorosa perché gli agenti possano costruirci pagine senza derive.
Strumenti
- Next.js
- React
- TypeScript
- Vitest
- Playwright
- axe-core
- Claude Code
Misurato, non a occhio
Il sito aveva bisogno di una base di componenti la cui qualità fosse misurata anziché giudicata a occhio: spaziature e tipografia esatte, accesso da tastiera, contrasto, movimento ridotto e resa corretta del testo georgiano. Doveva anche essere abbastanza rigorosa perché gli agenti AI potessero costruirci pagine senza derive.
La geometria di Stripe, il colore di Epsilon
I valori sono presi dal CSS e dal codice della dashboard che Stripe ha effettivamente rilasciato, non stimati. Il contratto è semplice: geometria e interazione da Stripe, colore e contenuto da Epsilon. Due file di token sono le uniche fonti di colore, e un gate CSS lo impone. I nuovi componenti come il menu, la combobox, il date picker e la tabella dati seguono i pattern da tastiera WAI-APG.
Gate e agenti
Un unico comando esegue i gate CSS, i controlli dei tipi, il lint, la suite Vitest, la build di produzione e uno smoke test per errori di console, rete, idratazione e axe. In una campagna di rifinitura ognuno dei 206 componenti ha avuto il proprio agente Claude Code, seguito da agenti di verifica, tutti sotto la mia direzione. Un pilota di app template in stile ClickUp con 12 route è stato verificato finché un passaggio completo non ha trovato più nulla.
Risultato
La campagna di rifinitura ha corretto 730 difetti, e la suite di test è cresciuta fino a 5.358 spec. Il numero consentito di rilievi axe sul contrasto dei colori è sceso da 127 a 17, tutti i 1.420 elementi sono raggiungibili da tastiera con 0 trappole, l’animazione a riposo è scesa da 180-240 a circa 0,2 fotogrammi al secondo, e i discendenti georgiani tagliati sono passati da 141 pixel tagliati a 0.