Touch Grass: un design system en 48h con Claude Code
Design system open source construido en 48h, con Claude Code como sistema operativo de trabajo. 18 componentes con pruebas, una auditoría de accesibilidad limpia y tokens para 4 plataformas, publicado en npm como v1.0.0 (MIT). Es la base visual de Timeouts, mi app iOS de gimnasio social para tiempo fuera del celular.
Desafío
Entregar un DS production-grade con tokens multiplataforma (CSS, Tailwind v4, Figma W3C, Swift SPM), decenas de componentes completamente testeados, un docs site público y CI/CD en un fin de semana - sin caer en vibe coding ni perder la identidad visual por el camino. La restricción autoimpuesta: cero esquinas redondeadas, cero texto gris, cero motion, Geist Mono donde haya metadata. Brutalismo como fuerza restrictiva, no como mood board.
Solución
Un método ritualizado en cuatro pasos: brainstorming para convertir la intención en un spec corto, planning explícito para convertir el spec en TODOs ordenados por dependencias, ejecución test-driven donde Vitest se escribe antes que el JSX, y code review por un subagent independiente que compara el resultado contra el spec. Skills codifican conocimiento procedimental reutilizable. La memoria persistente captura decisiones de producto para que no haya que re-explicarlas. Subagents paralelos manejan búsqueda y review sin contaminar el contexto principal. Stack: Style Dictionary 4 + Tailwind v4 + React 19 + Vite + Vitest + Playwright + Cloudflare Workers.
Resultados
10 primitives y 8 patterns, 17 suites de pruebas, una auditoría de accesibilidad sin violaciones en las 27 páginas del sitio de docs y tokens emitidos a 4 plataformas desde una única fuente. Publicado en npm como @touch-grass-ds/react v1.0.0 (MIT), con docs en vivo en timeouts.app/touch-grass.
Galería
Aprendizajes clave
La IA no reemplaza al product designer - reemplaza la parte del trabajo que el diseñador no debería haber estado haciendo en primer lugar. Trabajo humano: elegir qué construir, fijar la tesis visual, decidir tamaños de tap target, prohibir border-radius como manifiesto. Trabajo commodity: escribir forwardRef, configurar Style Dictionary, montar test cases, cuidar el lockstep de archivos para cada componente nuevo. El trueque: quedarse con el criterio, delegar la ejecución. Los diseñadores con criterio claro ganan un asistente que no se cansa; los diseñadores sin dirección sólo generan ruido más 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.
