MANIFIESTO // VIBEISCODING.COM
NO SOY SOLO UN PROGRAMADOR.
SOY QUIEN DIRIGE.
Este sitio existe porque aprendí que la IA no reemplaza el criterio — lo amplifica. Lo construí sin escribir una línea de código a mano, tomando cada decisión de arquitectura, contenido y producto. Lo que lees aquí es el resultado de ese proceso.
// filosofía
EL MANIFIESTO
EL PROBLEMA
El vibe coding tiene mala fama: código sin estructura, sin estándares, sin contexto. Prompts sueltos que producen algo que funciona hoy y se rompe mañana sin saber por qué ni cómo resolverlo. El problema no es la IA. Es que nadie enseña a usarla bien. No hay un lugar donde practicar el método, no solo el resultado. Donde aprender a dirigir, no solo a generar. Y nadie lo enseña porque la IA funciona de todas formas. Das una instrucción, produce algo, y eso es suficiente para sentir que avanzas. La adrenalina de ver código generarse en tiempo real hace que las bases parezcan opcionales — hasta que el proyecto crece, algo falla, y no tienes herramientas para entender qué pasó ni cómo arreglarlo. Eso es lo que faltaba. Y eso es lo que este sitio intenta resolver.
La IA no es el problema. El problema es no saber dirigirla.
EL QUIEBRE
El quiebre fue doble. Primero, ver a la IA hacer cosas que yo no entendía cómo había hecho. No porque fueran mágicas — sino porque eran buenas. Arquitectura coherente, decisiones razonables, código que funcionaba. Eso me obligó a prestar atención de otra forma. El segundo fue ver a amigos y colegas rechazarla. No por razones técnicas — sino por identidad. Antes sabían que eran buenos programadores porque veían el código que producían con sus propias manos. Con IA, esa certeza desaparece. Y en lugar de adaptarse, eligieron descartarla con el argumento de que "pierden el control". Ahí entendí el problema real: no es una discusión sobre herramientas. Es una discusión sobre quién eres cuando ya no produces el código tú mismo.
No es una discusión sobre herramientas. Es una discusión sobre identidad.
FILOSOFÍA
Vibe coding no es magia. No es darle un prompt a la IA y subir lo que salga a producción sin saber qué hay adentro. La filosofía es simple: tienes que entender el proceso. No necesitas escribir cada línea, pero sí saber qué se está construyendo, por qué, y qué implicaciones tiene. Lo que no entiendes hoy es una deuda que pagas mañana — con un bug que no sabes cómo diagnosticar, con una arquitectura que no puedes explicar, con código que no puedes mantener. La IA puede hacer el trabajo. Pero también puede explicarte por qué lo hizo así, sugerirte qué aprender, señalarte recursos — cursos, documentación, tecnologías — para que ese conocimiento se vuelva tuyo. Que no lo estés escribiendo tú no significa que debas dejar de aprender. El objetivo no es reemplazar el aprendizaje. Es que el aprendizaje ocurra mientras construyes, no antes.
Que la IA lo construya no te exime de entenderlo.
CÓMO TRABAJO
Todo empieza con claridad sobre el objetivo. Antes de escribir un prompt, defino qué quiero construir, cuál es el resultado final esperado, y cuáles son los features mínimos necesarios para llegar ahí. Con eso sobre la mesa, le pido a la IA que complemente el plan: que identifique vacíos, señale lo que no consideré, y sugiera elementos que podrían sumarse. No para seguir todo ciegamente — sino para tener una visión más completa antes de decidir. Cada sugerencia pasa por un filtro: el mío. La IA propone, yo valido. Lo que entra al proyecto es lo que yo entiendo y apruebo. Lo que no entiendo, lo investigo antes de aceptarlo. Así el proceso no es "pedirle a la IA que construya" — es una conversación técnica donde yo llevo la dirección y la IA ejecuta con criterio.
La IA propone. Yo valido. Lo que entra es lo que entiendo.
PARA QUIÉN ES ESTO
Para cualquier persona con curiosidad intelectual y ganas de aprender haciendo. No importa si eres desarrollador, diseñador, emprendedor, o alguien que nunca ha escrito una línea de código — lo que importa es la disposición a entender el proceso. Este sitio no es para quien busca un atajo. Es para quien quiere incorporar una forma de trabajar que amplifica lo que ya sabe, lo que ya piensa, lo que ya construye. Y aunque aquí lo llamamos vibe coding, el principio aplica más allá del software: definir un objetivo, iterar con una herramienta inteligente, validar con criterio propio. Es un proceso de aprendizaje haciendo — que puede adaptarse a casi cualquier área donde tengas algo que construir.
No es para quien busca un atajo. Es para quien quiere entender mientras construye.
EL COMPROMISO
Lo que vas a encontrar aquí son herramientas para pensar mejor el proceso — no para saltárselo. Proyectos diseñados para que practiques lo que importa: definir el objetivo, estructurar el problema, tomar decisiones de arquitectura, y delegar con criterio lo que la IA hace mejor que tú. Porque hay una parte del desarrollo que es repetitiva, reiterativa, y que se convierte en un cuello de botella cuando la haces a mano: el código. Una IA bien instruida lo produce más rápido y con menos errores — pero solo si le das las pautas correctas. Y para eso necesitas las bases. El compromiso es que cada proyecto en este sitio está pensado para que llegues más lejos de lo que llegarías solo — sin perder de vista que el criterio, la dirección y el entendimiento siguen siendo tuyos.
La IA escribe mejor y más rápido. Pero solo si tú sabes qué pedirle.
QUIÉN LO FIRMA
Soy Mager — desarrollador web con foco en WordPress y automatizaciones con IA. No soy un gurú ni un experto en todo: soy alguien que eligió aprender haciendo, que nunca quiso perder la curiosidad, y que un día decidió hacer las cosas de manera diferente. Este sitio nació como un proyecto personal para explorar el vibe coding en serio — con estructura, con criterio, con buenas prácticas. Y también como una forma de mostrar lo que hago y cómo lo hago, por si le sirve a alguien más que quiera recorrer el mismo camino.
Lo que me define no es lo que sé. Es que nunca dejo de querer aprender.
Mager — LinkedIn// transparencia radical
CÓMO SE CONSTRUYÓ ESTO
Este es el registro real del proceso. Cada decisión, cada iteración, cada agente usado — documentado tal como ocurrió en la conversación con Claude.
Primera conversación. Se define el proyecto: blog de ideas de Vibe Coding organizadas por nivel de dificultad. Se decide el stack (Next.js 15, Tailwind v3, MDX), el design system "The Luminescent Void", y el modelo de negocio (MVP gratuito, monetización futura).
- Stack: Next.js 15 App Router + TypeScript + Tailwind CSS v3
- Contenido: MDX con next-mdx-remote + gray-matter + validación Zod
- Design system: fuchsia #ff89ac/#e30071, violet #ac8aff, cyan #8ff5ff, void negro
- Decisión: sin video background — CSS gradient animado por performance
- i18n: diccionario de strings en español neutro, preparado para multiidioma
7 agentes de Claude generan toda la estrategia y el contenido base. Cada agente tiene un rol específico y sus outputs alimentan las fases siguientes.
- Product Manager → scope del MVP, backlog priorizado
- Estratega Digital → sitemap, user journey, roadmap de monetización
- SEO Specialist → keywords, estructura de URLs, meta templates, schema.org
- Vibe Coding Expert → 5 proyectos completos con tech stack y pasos
- Copywriter → hero copy, about, microcopy en español neutro
- UI/Design → design system unificado, inventario de componentes
Estructura del proyecto desde cero. Sin create-next-app (el directorio ya tenía archivos). Instalación manual de dependencias, config de Tailwind con los tokens del design system, y toda la infraestructura base.
- Tailwind v3 instalado explícitamente (Next.js 15 trae v4 por defecto)
- tailwind.config.ts con tokens completos: colores, tipografía, sombras, gradientes
- site.config.ts con feature flags: newsletter, analytics, donations, membership
- Tipos Zod para frontmatter de proyectos MDX
- Diccionario i18n: src/lib/i18n/es.ts con todos los strings del sitio
- 5 archivos MDX de proyectos con contenido completo
50+ componentes implementados siguiendo el design system. Iteración visual intensa: colores, botones, tipografía, efectos y animaciones.
- UI primitivos: Button (4 variantes), GradientText, GlassPanel, Card, Chip, LevelBadge
- Layout: Navbar glassmorphism, Footer, menú mobile
- Hero: gradiente CSS animado + grain overlay + HeroBeam (SVG stroke-dashoffset)
- ProjectCard, ProjectGrid, BentoGrid para detalle
- Corrección hydration mismatch (LanguageTool extension → suppressHydrationWarning)
- Iteración de botones: solid fuchsia #e30071, hover color change, tamaño reducido
Páginas del sitio, sección meta del proceso, bento grid transparente sobre cómo se construyó vibeiscoding.com.
- Página /sobre con manifiesto estructurado en 6 secciones editables
- Sección AIBuiltSection: bento grid de 7 celdas mostrando el proceso
- Agentes con colores únicos e iconos Lucide
- Roadmap del proyecto integrado en el bento
- Timeline de proceso (este componente)
Newsletter con Mailchimp, analytics con Umami, responsive polish y accesibilidad.
- API route /api/newsletter proxy a Mailchimp
- Script de Umami analytics condicional
- Responsive completo: mobile 375px, tablet 768px, desktop 1280px+
- Lighthouse 95+ en todas las categorías
Testing completo, checklist de QA, deploy a Vercel con dominio vibeiscoding.com.
- QA checklist: navegación, responsiveness, meta tags, newsletter
- Deploy en Vercel free tier
- Configuración de dominio vibeiscoding.com
- Variables de entorno: Mailchimp API key, Umami website ID
// principios
PILARES
DIRIGIR, NO SOLO GENERAR
El vibe coding no es copiar lo que la IA produce. Es saber qué pedirle, por qué, y qué hacer con el resultado. La dirección siempre es tuya.
HERRAMIENTAS CON CRITERIO
No recomendamos herramientas por hype. Cada sugerencia tiene una razón: costo, velocidad, compatibilidad con flujos de IA, comunidad activa. La herramienta es el medio — el método es lo que importa.
APRENDER MIENTRAS CONSTRUYES
Tengas o no las bases, el proceso exige entender lo que se construye. La IA puede explicarte lo que hace, sugerirte recursos y señalarte lo que no sabes. Aprender antes, durante o después — lo que importa es no ignorarlo.
CURIOSIDAD COMO MÉTODO
No saber algo no es un obstáculo — es el punto de partida. La curiosidad intelectual sostenida es lo que separa a quien dirige de quien solo ejecuta.