Así codeamos con Claude · 01: la idea y el setup
Quiero documentar el proceso real de armar una app con Claude Code. Sin maquillar las preguntas que me hace ni inflar los pasos que toma. La serie va a tener varios capítulos, uno por etapa del proyecto.
El sujeto de prueba es TinySprite, una mini app web para hacer pixel art. Pequeña. Bonita. Suficiente excusa para escribir.
La idea cruda
La carpeta ya se llamaba tinysprite desde hace rato. Le tiré a Claude un párrafo en bruto: editor de sprites web, sidebar con tools, paleta, sizes chicos, exportar a varios formatos, cozy pastel con dark y light. Y arranquemos.
Lo primero que hizo: preguntar
Claude no arrancó a tirar código. Devolvió seis preguntas:
- Stack: Next o Vite
- Sizes: hasta dónde, custom o solo presets
- Export: qué formatos exactos, sprite sheet sí o no
- Frames y animación: dentro o fuera del MVP
- Persistencia: localStorage, cloud, nada
- Canvas: zoom, pan, fit automático
Algunas las respondí rápido. Otras me hicieron parar y pensar diez segundos extra que no habría puesto solo.
Sizes
Los presets quedaron en 8, 16, 32, 64. Custom hasta 128. Más grande deja de ser tiny.
Paleta cozy pastel
Cream, dusty pink, sage, peach y lilac para light. Su contraparte profunda para dark. Todo en tokens CSS, así el toggle es una sola variable.
Los siete capítulos
El plan que armó tiene siete pasos. Después de cada uno hay checkpoint antes de seguir.
El setup
Acá no se construye casi nada visible. Se decide cómo se va a sentir trabajar en el proyecto durante semanas.
Stack final: Next 16 con App Router y Turbopack, React 19, TypeScript 5, ESLint. CSS Modules con custom properties para el theme. Sin Tailwind. Zustand viene en el capítulo 3 cuando aparece estado real.
El resultado visible:
Una card. Nada hace nada. Pero los tokens andan, el routing funciona, el build pasa, el hook pre-commit corre solo, y la paleta cozy ya se ve.
Dos commits, una línea cada uno, sin Co-Authored-By:
chore: init next 16 + ts + eslint (app router, src/, no tailwind)
chore: scaffold folders, cozy pastel tokens, husky pre-commit
Tag v0.1.0 sobre el primero.