Touch Grass: a design system in 48h with Claude Code
Open source design system built in 48h, with Claude Code as the working operating system. 18 tested components, a clean accessibility audit, and tokens for 4 platforms, published on npm as v1.0.0 (MIT). It is the visual base of Timeouts, my iOS social gym for time away from the phone.
Challenge
Deliver a production-grade DS with multi-platform tokens (CSS, Tailwind v4, Figma W3C, Swift SPM), dozens of components fully tested, a public docs site, and CI/CD over a weekend - without falling into vibe coding or losing visual identity on the way. The self-imposed constraint: zero rounded corners, zero grey text, zero motion, Geist Mono wherever metadata lives. Brutalism as a forcing function, not a mood board.
Solution
A four-step ritualized method: brainstorming to turn intent into a short spec, explicit planning to turn the spec into dependency-ordered TODOs, test-driven execution where Vitest ships before the JSX, and code review by an independent subagent diffing the result against the spec. Skills encode reusable procedural knowledge. Persistent memory captures product decisions so they never have to be re-explained. Parallel subagents handle search and review without polluting the main context. Stack: Style Dictionary 4 + Tailwind v4 + React 19 + Vite + Vitest + Playwright + Cloudflare Workers.
Results
10 primitives and 8 patterns, 17 test suites, an accessibility audit with zero violations across the 27 docs pages, and tokens emitted to 4 platforms from a single source. Published on npm as @touch-grass-ds/react v1.0.0 (MIT), with live docs at timeouts.app/touch-grass.
Gallery
Key Learnings
AI does not replace the product designer - it replaces the part of the work the designer should not have been doing in the first place. Human work: choosing what to build, setting the visual thesis, deciding tap target sizes, banning border-radius as a manifesto. Commodity work: writing forwardRef, configuring Style Dictionary, scaffolding test cases, babysitting the file lockstep for each new component. The trade: keep the judgment, delegate the execution. Designers with strong taste and clear direction gain an assistant that never tires; designers without direction just generate noise faster.
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.
