Touch Grass: Design System Brutalista Open-Source, Entregue com Claude Code
Entreguei um design system brutalista open-source do zero - tokens multiplataforma, 10 primitives, 8 patterns, um docs site público e um Swift package - em 48 horas, usando Claude Code como sistema operacional para trabalho de produto. O resultado é a espinha visual do Timeouts, meu app social de fitness em iOS para tempo longe da tela. Isso não é vibe coding: cada componente passou por um loop de brainstorming → planning → execução test-driven → code review, com skills, memória persistente e subagents preservando contexto e julgamento de produto.
Desafio
Entregar um DS production-grade com tokens multiplataforma (CSS, Tailwind v4, Figma W3C, Swift SPM), dezenas de componentes com testes completos, um docs site público e CI/CD num fim de semana - sem cair em vibe coding nem perder identidade visual pelo caminho. A restrição auto-imposta: zero border-radius, zero texto cinza, zero motion, Geist Mono onde houver metadata. Brutalismo como força restritiva, não como mood board.
Solução
Um método ritualizado em quatro passos: brainstorming para transformar intenção em spec curto, planning explícito para transformar spec em TODOs ordenados por dependência, execução test-driven onde o Vitest é escrito antes do JSX, e code review por um subagent independente que compara o resultado contra o spec. Skills codificam conhecimento procedimental reutilizável. Memória persistente captura decisões de produto para que não precisem ser re-explicadas. Subagents paralelos cuidam de busca e review sem poluir o contexto principal. Stack: Style Dictionary 4 + Tailwind v4 + React 19 + Vite + Vitest + Playwright + Cloudflare Workers.
Resultados
10 primitives, 8 patterns, 8 páginas de foundations renderizadas ao vivo, 17 suítes Vitest, um docs site público em timeouts.app/touch-grass, tokens emitidos para 4 plataformas a partir de uma única fonte, CI verde, licença MIT, v0.1.2 tagueada. Tempo total do repo vazio ao release público: 48 horas. A landing do Timeouts foi publicada em paralelo consumindo o mesmo DS via build-time pinning. O método é repetível - o repo é a prova de conceito de como product designers podem usar Claude Code como sistema operacional, não como autocomplete.
🖼️ Galeria
Principais Aprendizados
IA não substitui o product designer - substitui a parte do trabalho que o designer não deveria estar fazendo em primeiro lugar. Trabalho humano: escolher o que construir, fixar a tese visual, decidir tamanhos de tap target, banir border-radius como manifesto. Trabalho commodity: escrever forwardRef, configurar Style Dictionary, montar casos de teste, cuidar do lockstep de arquivos para cada componente novo. A troca: ficar com o julgamento, delegar a execução. Designers com gosto forte e direção clara ganham um assistente que não cansa; designers sem direção só geram ruído mais rápido.
