Touch Grass: Open-Source Brutalist Design System, Shipped with Claude Code
I shipped an open-source brutalist design system from scratch - multi-platform tokens, 10 primitives, 8 patterns, a public docs site, and a Swift package - in 48 hours, using Claude Code as an operating system for product work. The result is the visual spine of Timeouts, my iOS social gym for time off the phone. This is not vibe coding: every component ran through a loop of brainstorming → planning → test-driven execution → code review, with skills, persistent memory, and subagents preserving context and product judgment.
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, 8 patterns, 8 foundations pages rendered live, 17 Vitest suites, a public docs site at timeouts.app/touch-grass, tokens emitted to 4 platforms from a single source of truth, CI green, MIT license, v0.1.2 tagged. Total time from blank repo to public release: 48 hours. The Timeouts landing shipped in parallel consuming the same DS via build-time pinning. The method is repeatable - the repo is the proof-of-concept for how product designers can use Claude Code as an operating system, not as autocomplete.
🖼️ 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.
