MANIFIESTO // VIBEISCODING.COM
NO SOY UN PROGRAMADOR.
SOY QUIEN DIRIGE.
Este sitio es el resultado de un experimento: construir algo real, útil y honesto usando IA como herramienta principal. Lo que lees aquí es lo que aprendí en el proceso.
// filosofía
EL MANIFIESTO
EL PROBLEMA
Escribe aquí: ¿qué frustración o vacío existía antes de crear el proyecto? ¿Qué te faltaba cuando querías aprender a programar con IA?
EL QUIEBRE
Escribe aquí: el momento o idea que lo cambió todo. ¿Por qué vibe coding, por qué ahora?
FILOSOFÍA
Escribe aquí: cómo entiendes el vibe coding. No es magia ni atajo — es un cambio de flujo de trabajo.
CÓMO TRABAJO
Escribe aquí: tu proceso real. Cómo usas la IA como co-pilot. Qué herramientas. Qué decisiones siguen siendo tuyas.
PARA QUIÉN ES ESTO
Escribe aquí: a quién le hablas. A quién no. Sé honesto sobre el público objetivo.
EL COMPROMISO
Escribe aquí: qué puede esperar quien siga el blog. Sin promesas vacías.
// 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
ITERACIÓN BRUTAL
El MVP no es el destino — es el método. Creemos en lanzar rápido, medir en contexto real y mejorar con evidencia. No en planificar en el vacío hasta que la idea pierda energía.
HERRAMIENTAS CON CRITERIO
No recomendamos stack por hype. Cada sugerencia de herramienta en este sitio tiene una razón: costo, velocidad de setup, compatibilidad con flujos de IA, comunidad activa. Si cambiamos de opinión, lo decimos.
CLARIDAD TÉCNICA
El vibe coding no es magia ni atajo. Es un cambio de flujo de trabajo que requiere entender lo que estás haciendo, aunque no escribas cada línea. Acá no simplificamos en exceso ni inflamos lo básico.
ACCESO ABIERTO
Todo el contenido del sitio es gratuito. Siempre. No hay paywall en las ideas. El conocimiento sobre cómo construir cosas debería estar disponible para quien quiera aprender.