Touch Grass: un design system in 48 ore con Claude Code
Design system open source costruito in 48 ore, con Claude Code come sistema operativo di lavoro. 18 componenti testati, un audit di accessibilità pulito e token per 4 piattaforme, pubblicato su npm come v1.0.0 (MIT). È la base visiva di Timeouts, la mia app iOS di palestra sociale per il tempo lontano dal telefono.
Sfida
Consegnare un DS production-grade con token multi-piattaforma (CSS, Tailwind v4, Figma W3C, Swift SPM), decine di componenti completamente testati, un docs site pubblico e CI/CD in un weekend - senza cadere nel vibe coding né perdere l'identità visiva per strada. Il vincolo autoimposto: zero angoli arrotondati, zero testo grigio, zero motion, Geist Mono ovunque ci siano metadata. Brutalismo come forza vincolante, non come mood board.
Soluzione
Un metodo ritualizzato in quattro step: brainstorming per trasformare l'intento in uno spec breve, planning esplicito per trasformare lo spec in TODO ordinati per dipendenze, esecuzione test-driven dove Vitest precede il JSX, e code review da un subagent indipendente che confronta il risultato con lo spec. Le skills codificano conoscenza procedurale riutilizzabile. La memoria persistente cattura le decisioni di prodotto così non vanno rispiegate. Subagents paralleli gestiscono ricerca e review senza inquinare il contesto principale. Stack: Style Dictionary 4 + Tailwind v4 + React 19 + Vite + Vitest + Playwright + Cloudflare Workers.
Risultati
10 primitives e 8 patterns, 17 suite di test, un audit di accessibilità senza violazioni sulle 27 pagine del sito di documentazione e token emessi per 4 piattaforme da un'unica fonte. Pubblicato su npm come @touch-grass-ds/react v1.0.0 (MIT), con documentazione live su timeouts.app/touch-grass.
Galleria
Apprendimenti Chiave
L'IA non sostituisce il product designer - sostituisce la parte del lavoro che il designer non avrebbe dovuto fare in primo luogo. Lavoro umano: scegliere cosa costruire, fissare la tesi visiva, decidere le dimensioni dei tap target, vietare border-radius come manifesto. Lavoro commodity: scrivere forwardRef, configurare Style Dictionary, impalcare test case, accudire il lockstep dei file per ogni nuovo componente. Lo scambio: tenere il giudizio, delegare l'esecuzione. I designer con gusto forte e direzione chiara guadagnano un assistente instancabile; i designer senza direzione generano solo rumore più in fretta.
Precisa transformar um problema de produto em uma experiência implementável?
Posso ajudar a conectar estratégia, interface e engenharia em uma entrega que continua legível depois do handoff.
