Puntos Clave
- Hicimos una plantilla inicial de Claude Code para construir aplicaciones web de pila completa desde lenguaje natural — 20 habilidades, 3 agentes, pila tecnológica Next.js. Clónala, 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. La idea es que describas lo que quieres en palabras normales y la IA se encargue 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. Considéralo un parque de juegos entretenido para aprender desarrollo asistido por IA.
- Tiene licencia MIT y es gratis — bifúrcalo, rómpelo, crea algo interesante con él.
Espera, ¿una empresa BPO hizo esto?
Sí, lo sabemos — una empresa de centros de llamadas 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 esqueleto de proyecto cada vez. Así que empaquetamos nuestra configuración en una plantilla que funciona con Claude Code, y pensamos que a otras personas también podría resultarles útil.
No es nada revolucionario. Es simplemente un buen punto de partida si quieres intentar construir algo con IA.
Qué tiene adentro
La Fullstack Vibe-Coding Template es básicamente un proyecto inicial para Claude Code — la herramienta de programación con IA de Anthropic. La clonas, le dices a Claude lo que quieres en español plano, y te arma toda la aplicación. Base de datos, interfaz, APIs, pruebas — 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 “habilidades” preescritas y 3 agentes auxiliares que viven en la carpeta .claude/skills/ y le enseñan a Claude cómo hacer las cosas bien.
Las habilidades (nombre elegante para archivos de instrucciones)
Cada habilidad es simplemente un archivo de texto con instrucciones para una tarea específica. Claude las lee y sigue las reglas. Nada sofisticado, pero mantiene las cosas consistentes.
Construir cosas: diseño de base de datos, patrones de API, pruebas, control de versiones.
Mantenerlo limpio: revisiones de seguridad, consejos de rendimiento, accesibilidad (WCAG), actualización de dependencias.
Hacerlo bonito: componentes de interfaz (Tailwind + shadcn/ui), múltiples idiomas (i18n), gráficos y datos.
Los auxiliares: un agente que determina qué habilidades usar. Otro que aprende de tu trabajo y crea nuevas habilidades. (La verdad, este último está bastante interesante.)
La pila tecnológica
Pila 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 pruebas
- Configuración de CI/CD incluida
Cómo lo usamos (la historia aburrida)
Somos una empresa BPO — gestionamos atención al cliente para otras empresas. Nuestro equipo de operaciones constantemente pide herramientas pequeñas: un tablero para este cliente, un componente de reportes para aquella cuenta, un seguimiento de flujo de trabajo para incorporación de personal. El software genérico 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 la misma configuración cada vez.
Alguien necesita algo
Un gerente de operaciones dice: “Necesito un tablero 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 aplicación — base de datos, APIs, interfaz, todo.Lo limpiamos
Un humano revisa el código, ejecuta las pruebas, 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 esqueleto — Next.js, Tailwind, Drizzle. Podrías construir lo mismo en un fin de semana.
Lo ú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 habilidades 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 nuestra habilidad de revisión de seguridad no es lo suficientemente buena para que desconocidos la lean, tampoco lo es para nosotros.
Ve a jugar con ella
La plantilla está en github.com/callnovo-lab/fullstack-vibe-coding-template. Licencia MIT. Gratis. Clónala, instala Claude Code y dile lo que quieres construir.
Dos comandos entretenidos:
/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 nuevas habilidades 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ómpela, bifúrcala, crea algo raro con ella. De eso se trata.
