Touch Grass: Design System Brutalista Open-Source, Spedito con Claude Code
Ho spedito un design system brutalista open-source da zero - token multi-piattaforma, 10 primitives, 8 patterns, un docs site pubblico e un Swift package - in 48 ore, usando Claude Code come sistema operativo per il lavoro di prodotto. Il risultato è la colonna visiva di Timeouts, la mia app social fitness su iOS per il tempo lontano dallo schermo. Questo non è vibe coding: ogni componente è passato attraverso un loop di brainstorming → planning → test-driven execution → code review, con skills, memoria persistente e subagents a preservare contesto e giudizio di prodotto.
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, 8 patterns, 8 pagine di foundations renderizzate live, 17 suite Vitest, un docs site pubblico su timeouts.app/touch-grass, token emessi su 4 piattaforme da un'unica fonte, CI verde, licenza MIT, v0.1.2 taggata. Tempo totale da repo vuoto a release pubblica: 48 ore. La landing di Timeouts è stata spedita in parallelo consumando lo stesso DS via build-time pinning. Il metodo è replicabile - il repo è la prova di concetto di come i product designer possano usare Claude Code come sistema operativo, non come autocomplete.
🖼️ 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.
