Touch Grass: Design System Brutalista Open-Source, Enviado con Claude Code
Lancé un design system brutalista open-source desde cero - tokens multiplataforma, 10 primitives, 8 patterns, un docs site público y un Swift package - en 48 horas, usando Claude Code como sistema operativo para el trabajo de producto. El resultado es la columna visual de Timeouts, mi app social de fitness en iOS para tiempo fuera del teléfono. Esto no es vibe coding: cada componente pasó por un loop de brainstorming → planning → test-driven execution → code review, con skills, memoria persistente y subagents preservando el contexto y el criterio de producto.
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, 8 patterns, 8 páginas de foundations renderizadas live, 17 suites Vitest, un docs site público en timeouts.app/touch-grass, tokens emitidos a 4 plataformas desde una única fuente, CI en verde, licencia MIT, v0.1.2 tagueada. Tiempo total desde repo vacío a release público: 48 horas. La landing de Timeouts se lanzó en paralelo consumiendo el mismo DS vía build-time pinning. El método es repetible - el repo es la prueba de concepto de cómo los product designers pueden usar Claude Code como sistema operativo, no como autocomplete.
🖼️ 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.
