Puntos Clave
- Hicimos una plantilla starter de Claude Code para construir apps web fullstack desde lenguaje natural — 20 skills, 3 agentes, stack Next.js. Clónalo, describe lo que quieres y mira cómo lo construye.
- Es un gran primer paso si tienes curiosidad por el vibe-coding — no necesitas ser ingeniero. El punto es que describes lo que quieres en palabras normales y la IA se encarga del resto.
- Aviso justo: es un proyecto de juguete — lo usamos internamente para armar herramientas rápidas, pero no es software empresarial probado en batalla. Piénsalo como un parque de juegos divertido para aprender desarrollo asistido por IA.
- Tiene licencia MIT y es gratis — haz fork, rómpelo, crea algo genial con él.
Espera, ¿Una Empresa BPO Hizo Esto?
Sí, lo sabemos — una empresa de call center publicando una plantilla de programación en GitHub suena raro. Pero tenemos un equipo pequeño de ingeniería que construye herramientas internas constantemente, y nos cansamos de configurar el mismo scaffolding de proyecto cada vez. Así que empaquetamos nuestro setup en una plantilla que funciona con Claude Code, y pensamos que otras personas podrían encontrarla útil también.
No es nada revolucionario. Es simplemente un buen punto de partida si quieres intentar construir algo con IA.
Qué Tiene Adentro
El Fullstack Vibe-Coding Template es básicamente un proyecto starter para Claude Code — la herramienta de programación con IA de Anthropic. Lo clonas, le dices a Claude lo que quieres en español plano, y te arma toda la app. Base de datos, UI, APIs, tests — todo el paquete.
¿Suena demasiado bueno para ser verdad? Más o menos lo es. Funciona sorprendentemente bien para proyectos simples, pero no esperes milagros con nada demasiado complejo. La salsa secreta son 20 “skills” pre-escritos y 3 agentes helper que viven en la carpeta .claude/skills/ y le enseñan a Claude cómo hacer las cosas bien.
Los Skills (Nombre Elegante para Archivos de Prompts)
Cada skill es simplemente un archivo de texto con instrucciones para una tarea específica. Claude los lee y sigue las reglas. Nada sofisticado, pero mantiene las cosas consistentes.
Construir cosas: diseño de base de datos, patrones de API, testing, control de versiones.
Mantenerlo limpio: revisiones de seguridad, tips de rendimiento, accesibilidad (WCAG), actualización de dependencias.
Hacerlo bonito: componentes de UI (Tailwind + shadcn/ui), múltiples idiomas (i18n), gráficos y datos.
Los helpers: Un agente que determina qué skills usar. Otro que aprende de tu trabajo y crea nuevos skills. (Este la verdad está bastante cool.)
El Stack
Stack estándar de desarrollo web moderno:
- Next.js 14 con React 18 y TypeScript
- Tailwind CSS con componentes shadcn/ui
- Drizzle ORM — SQLite en local, MySQL en producción
- Vitest + Playwright para testing
- Configuración de CI/CD incluida
Cómo Lo Usamos (La Historia Aburrida)
Somos una empresa BPO — gestionamos servicio al cliente para otras empresas. Nuestro equipo de operaciones constantemente pide herramientas pequeñas: un dashboard para este cliente, un widget de reportes para aquella cuenta, un tracker de flujo de trabajo para onboarding. El software normal no cubre estas necesidades de nicho, así que nuestro pequeño equipo de ingeniería las construye.
Esta plantilla es simplemente el punto de partida que usamos cuando armamos estas herramientas internas rápidas. Nada glamuroso — solo nos ahorra copiar y pegar el mismo setup cada vez.
Alguien Necesita Algo
Un gerente de operaciones dice “Necesito un dashboard que muestre X, Y y Z.”Lo Describimos
Escribimos lo que la herramienta debería hacer en español plano.Claude Construye el Primer Borrador
Clonamos la plantilla, le damos la descripción, y Claude genera la app — base de datos, APIs, UI, todo.Lo Limpiamos
Un humano revisa el código, corre los tests, arregla las partes raras y lo despliega. Generalmente toma unos días.Eso es todo. Sin gran visión. Solo una forma más rápida de construir herramientas pequeñas.
¿Por Qué Regalarlo?
¿Honestamente? No es tan valioso como código propietario. Es un scaffold — Next.js, Tailwind, Drizzle. Podrías construir lo mismo en un fin de semana.
Lo que es útil es el patrón — la idea de enseñarle a un asistente de IA las mejores prácticas de tu equipo a través de archivos de skills estructurados. Creemos que más personas deberían probar este enfoque, especialmente quienes no son ingenieros y tienen curiosidad por la programación con IA.
Además, poner código en GitHub nos mantiene honestos. Si nuestro skill de revisión de seguridad no es lo suficientemente bueno para que desconocidos lo lean, tampoco es lo suficientemente bueno para nosotros.
Ve a Jugar con Él
La plantilla está en github.com/callnovo-lab/fullstack-vibe-coding-template. Licencia MIT. Gratis. Clónalo, instala Claude Code y dile lo que quieres construir.
Dos comandos divertidos:
/just-do-it— Ejecuta todas las verificaciones de calidad en tu código automáticamente./improve-skills— Aprende de lo que acabas de construir y crea nuevos skills para la próxima vez.
Si tenías curiosidad por el vibe-coding pero no sabías por dónde empezar — esta es una forma bastante relajada de probarlo. Rómpelo, haz fork, crea algo raro con él. De eso se trata.
