Touch Grass: design system em 48h com Claude Code
Design system open source construído em 48h, com Claude Code como sistema operacional de trabalho. 18 componentes testados, auditoria de acessibilidade limpa e tokens para 4 plataformas, publicado no npm como v1.0.0 (MIT). É a base visual do Timeouts, meu app iOS de academia social para tempo fora do celular.
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 e 8 patterns, 17 suítes de teste, auditoria de acessibilidade sem violações nas 27 páginas do docs site e tokens emitidos para 4 plataformas de uma única fonte. Publicado no npm como @touch-grass-ds/react v1.0.0 (MIT), com docs ao vivo em timeouts.app/touch-grass.
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.
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.
