La serie día a día del canal, desde la primera app hasta el planificador de workflows y proyectos reales. Aprende haciendo: plan conciso, fases con checklist y construcción guiada.
Día 1–2 · plan sencillo, Lovable
Día 3 · enjambres de agentes
Día 4–5 · construyendo la herramienta
Día 6–9 · Supabase, 21st.dev
Día 10–11 · interfaces y bots
Día 13 · herramientas a medida
Subasta de caballos · sistema PETS
El punto de partida de la serie: crear una aplicación real desde cero con Claude Code. La regla de oro del Día 1 — describe QUÉ, no CÓMO. Un plan .md mantenerlo ligero vale más que fijar bibliotecas demasiado pronto.
La mayoría se atasca porque da demasiados detalles técnicos ("usa Framer Motion X") en vez de requisitos ("tarjetas con hover suave"). Definir requisitos visuales/de UX y dejar que Claude elija las bibliotecas reduce las alucinaciones y el retrabajo. Quien viene de Lovable migra el proyecto y obtiene control real del código.
Plan .md breve: el qué, no el cómo; activa el modo de planificación (Shift+Tab) antes de editar
Construye en fases cortas; cada fase termina con: build ok · screenshot · commit · resumen en 5 líneas
¿Se rompió "de la nada"? Ejecuta un git diff del último estado bueno y aísla por bisección
# script de resgate no package.json "rescue": "rimraf node_modules .next dist && npm i"
O Claude Flow es un framework para ejecutar enjambres de agentes (enjambres de agentes) que trabajan en paralelo. Dos arquitecturas: Swarm (agentes independientes en paralelo) y Hive Mind (memoria compartida entre ellos).
Dividir una construcción entre agentes que trabajan en paralelo (UI, API, almacenamiento, pruebas) la acelera mucho, pero solo funciona con plan y checklist de validación. La diferencia entre «vibe coder» (itera sin un plan) e «ingeniero agéntico» (proceso + arquitectura) es lo que genera un sistema funcional, no una simulación.
npx claude-flow@alpha init --force # inicializa o Flow # rode o swarm com UI interativa: claude-flow swarm "..." --cloud # depurar MCP: claude mcp list --debug claude mcp remove FlowNexus claude mcp add FlowNexus "npx -y flow-nexus mcp"
Aliases en la terminal (p. ej., dsp) para no escribir comandos largos
Supabase Realtime en lugar de Redis; Vite.js para prototipos rápidos
Agrega -y a npx para resolver problemas de rutas y permisos
Pide documentar antes de implementar; checklist antes de la compilación final
💡 Consejo: Usar Supabase local en desarrollo reduce costos, y las políticas RLS + los enlaces firmados o vencidos evitan filtrar datos en enlaces públicos.
De los Días 4 y 5: construir un planificador de flujos de trabajo — una herramienta con UI, persistencia y lógica — y luego iterar con «grandes actualizaciones» sobre una base estable.
Es el salto de la «app de demostración» a una herramienta que tú usarías. Muestra cómo evolucionar un proyecto existente sin romper lo que ya funciona: commits por fase, una base siempre estable y actualizaciones grandes hechas con un plan.
| Etapa | Qué hacer |
|---|---|
| Base | CRUD + UI mínima funcionando, con commit |
| Plan | Modo de plan (Shift+Tab) para diseñar la "gran actualización" |
| Iterar | Una funcionalidad a la vez, build en verde en cada paso |
| Rescate | Diff/bisección cuando algo regrese |
A partir del Día 6, el proyecto gana Servidores MCP — el protocolo que proporciona herramientas externas a Claude. Supabase MCP (banco/auth/storage) y 21st.dev MCP (componentes de UI "mágicos") aparecen en la serie.
Con MCP, Claude consulta el esquema de la base de datos real, crea tablas y genera la UI a partir de bibliotecas de componentes, sin que tengas que salir de la terminal. Es lo que transforma un prototipo en una app conectada. (La ruta 5 profundiza en MCP.)
# listar / adicionar / remover MCP servers claude mcp list claude mcp add supabase "npx -y @supabase/mcp-server" claude mcp add magic "npx -y @21st-dev/magic" # dentro da sessão: /mcp # ver status dos servers conectados
Patrón: conecta el MCP, pídele a Claude «lee el esquema actual» antes de generar código y configura RLS en Supabase antes de cualquier enlace público.
El Día 10 construye un dashboard (visualización de datos con gráficos y métricas); el Día 11 muestra cómo Claude Code ayuda a crear GPTs / asistentes personalizados a partir de tu contenido.
Dashboard es el caso de uso que más aparece en productos reales y un excelente ejercicio de UI + datos. Los GPTs muestran Claude Code como herramienta de autoría: estructura las instrucciones, la base de conocimiento y el flujo del bot.
Fuente real (API/Supabase), no un mock
Tarjetas de métricas + gráficos; describe la UX
Captura de pantalla → ajuste → commit por fase
El Día 13 cambia el enfoque: en vez de pagar por varios «superapps»/SaaS, tú construye la herramienta a medida con Claude Code — exactamente con las funciones que usas, sin lo demás.
Es la tesis económica del curso: mucho de lo que pagas por suscripción puede convertirse en una pequeña app propia. Controlas los datos, pagas solo la infraestructura y lo ajustas cuando quieras. Claude Code reduce el costo de «hacerlo tú».
Uso sencillo y repetido, tus datos, integración con tu stack
Mucho cumplimiento normativo, escala enorme, funciones que cambian cada semana
Dos proyectos completos guiados en la comunidad: uno subasta de caballos y un sistema PETS (registro/gestión). Desde el schema de la base de datos hasta la UI, mostrando el flujo de punta a punta.
Ver cómo nace una app completa — modelado de datos, pantallas, reglas de negocio — consolida todo lo de las rutas anteriores. Son buenos «proyectos ancla» para que los rehagas con tu propio tema.
| Capa | 🐎 Subasta | 🐾 PETS |
|---|---|---|
| Datos | lotes, ofertas, usuarios | tutores, mascotas, servicios de atención |
| Regla | puja mínima, tiempo de subasta | agenda, historial, vacunas |
| UI | listado + pantalla de oferta en vivo | ficha de la mascota + dashboard |
💡 Siguiente paso: toma la estructura de estos ejemplos y cambia el dominio por el tuyo. El mismo esqueleto, contenido diferente: es la forma más rápida de aprender.