# Vibe Planning: Metodología Completa

## ¿Qué es el Vibe Planning?

El Vibe Planning es la fase más crítica del proceso de Vibe Coding. Consiste en crear una documentación estructurada y detallada que sirve como base para todo el desarrollo posterior. Sin esta fase, los proyectos tienen una tasa de éxito muy baja.

### Importancia del Planning

**Estadísticas de éxito**:
- **Sin Planning**: 1 de cada 10 intentos será exitoso
- **Con Planning adecuado**: 1 de cada 2 intentos funcionará correctamente
- **Tiempo de desarrollo**: Se reduce de meses a días

**¿Por qué falla la gente?**
- Saltan directamente al coding sin preparación
- No proporcionan suficiente contexto a la IA
- Usan prompts genéricos sin estructura
- No tienen una visión clara del proyecto

## Metodología de 3 Prompts Consecutivos

### Prompt 1: Arquitectura del Proyecto

**Objetivo**: Crear la documentación de arquitectura técnica completa.

**Estructura del Prompt**:
```xml
<meta>
[Definición clara del objetivo del proyecto]
</meta>

<inspirations>
[Referencias e inspiraciones específicas]
</inspirations>

<guidelines>
[Directrices técnicas y estéticas]
</guidelines>

<practicalities>
[Consideraciones prácticas y tecnológicas]
</practicalities>

<context>
[Contexto específico del proyecto]
</context>
```

**Herramientas recomendadas**:
- **Primera opción**: Manus (créditos gratuitos disponibles)
- **Segunda opción**: ChatGPT con Deep Research (4+ minutos de investigación)
- **Tercera opción**: Gemini 2.5 Pro con Deep Research

**Proceso**:
1. Rellenar la plantilla con datos específicos del proyecto
2. Ejecutar Deep Research (4+ minutos, 20+ fuentes, 40+ búsquedas)
3. Descargar como Markdown (no PDF para poder editar)
4. Revisar y eliminar secciones innecesarias (deployment, seguridad avanzada, etc.)
5. Guardar como `architecture.md` en carpeta `docs/`

### Prompt 2: Features y Características

**Objetivo**: Definir todas las funcionalidades específicas que debe tener la aplicación.

**Estructura del Prompt**:
```xml
<mvp_requirements>
[Funcionalidades obligatorias del MVP]
</mvp_requirements>

<user_stories>
[Historias de usuario específicas]
</user_stories>

<technical_specifications>
[Especificaciones técnicas detalladas]
</technical_specifications>

<constraints>
[Limitaciones y restricciones del proyecto]
</constraints>
```

**Ejemplos de User Stories**:
- "Como usuario quiero crear un prompt optimizado basado en una idea de máximo 2 líneas"
- "Como usuario quiero tener mi propia cuenta personal"
- "Como usuario quiero ver todos mis prompts creados anteriormente"
- "Como usuario quiero poder editar y versionar mis prompts"

**Proceso**:
1. Definir funcionalidades MVP claramente
2. Escribir user stories específicas y medibles
3. Ejecutar Deep Research para obtener mejores prácticas
4. Filtrar contenido innecesario (eliminar testing end-to-end, compliance, etc.)
5. Guardar como `features.md` en carpeta `docs/`

### Prompt 3: Plan de Acción Detallado

**Objetivo**: Crear una guía paso a paso para la implementación.

**Características del Plan**:
- **No es documentación**: Es un conjunto de tareas específicas
- **Uso tarea por tarea**: Se copia una tarea completa cada vez
- **Orden lógico**: Desde setup hasta funcionalidades avanzadas
- **Implementación incremental**: Cada tarea es un bloque completo de trabajo

**Estructura típica**:
1. **Configuración inicial del entorno**
2. **Estructura básica de directorios** 
3. **Configuración de Docker y servicios**
4. **Setup del backend (FastAPI/Django)**
5. **Configuración de base de datos**
6. **Autenticación y autorización**
7. **APIs principales (CRUD)**
8. **Frontend básico (páginas principales)**
9. **Integración frontend-backend**
10. **Funcionalidades específicas del negocio**

**Proceso de uso**:
1. Descargar como PDF (no necesita edición)
2. Copiar SOLO la Tarea 1 completa con todos sus subtareas
3. Pegar en editor de código (Claude Code, Cursor, etc.)
4. Esperar implementación completa y verificar
5. Solo entonces copiar Tarea 2 completa
6. Repetir hasta completar todas las tareas

## Herramientas para Vibe Planning

### Manus
- **Ventajas**: Créditos gratuitos, optimizado para investigación
- **Uso**: Ideal para los 3 prompts de planning
- **Limitación**: Créditos limitados (compartir con amigos para más)

### ChatGPT Deep Research
- **Característica**: Investigación profunda (4+ minutos, 20+ fuentes)
- **Ventaja**: Acceso a información actualizada y contextualizada
- **Proceso**: Pregunta detalles adicionales para mejorar el resultado

### Gemini 2.5 Pro
- **Ventaja**: Gratuito, ventana de contexto grande
- **Uso**: Alternativa cuando se agotan créditos de otras herramientas

## Plantillas y Prompts Optimizados

### ¿Por qué funcionan los Prompts XML?

**Base científica**:
- La IA detecta y clasifica mejor la información con etiquetas XML
- Inspirado en los System Prompts filtrados de Cursor ($9B company)
- Separa claramente cada sección para mejor comprensión

**Estructura recomendada**:
```xml
<section_name>
Contenido específico de esta sección
</section_name>
```

### Plantilla de Arquitectura
```xml
<meta>
Crear una [tipo de aplicación] que permita [funcionalidad principal].
La aplicación debe [objetivos específicos y medibles].
</meta>

<inspirations>
- [Referencia 1]: [Por qué es relevante]
- [Referencia 2]: [Características específicas a replicar]
- [Referencia 3]: [Elementos de diseño o funcionalidad]
</inspirations>

<guidelines>
Tecnologías:
- Frontend: [Next.js, React, Vue, etc.]
- Backend: [FastAPI, Django, Node.js, etc.]
- Base de datos: [PostgreSQL, MySQL, etc.]
- Estilo: [Tailwind CSS, profesional, moderno]
- Características: [Responsive, accesible, escalable]
</guidelines>

<practicalities>
- Framework de desarrollo: [Especificar]
- Patrones de diseño: [Especificar]
- Arquitectura: [Microservicios, monolito, etc.]
- Deployment: [Docker, VPS, cloud]
</practicalities>

<context>
[Descripción detallada del proyecto, usuarios objetivo, casos de uso]
</context>
```

## Mejores Prácticas del Planning

### DO's (Hacer)
1. **Ser específico**: "Dashboard estilo Netflix" vs "dashboard bonito"
2. **Incluir referencias visuales**: Mencionar aplicaciones conocidas como inspiración
3. **Definir tecnologías**: Especificar frameworks y herramientas exactas
4. **User stories detalladas**: Cada funcionalidad como historia específica
5. **Orden lógico**: Planning → Design → Coding, nunca saltar pasos
6. **Una tarea por vez**: En el coding, implementar tarea completa antes de siguiente

### DON'Ts (No hacer)
1. **Prompts genéricos**: "Crea una app que haga dinero"
2. **Saltar planning**: Ir directo al coding
3. **Sobrecargar contexto**: Demasiada información innecesaria
4. **Copiar plan completo**: Pegar todas las tareas juntas al editor
5. **Ignorar errores**: No verificar cada implementación antes de continuar

### Filtrado de Documentación

**Eliminar siempre**:
- Funcionalidades futuras/roadmap
- Testing end-to-end (al principio)
- Deployment avanzado
- Security avanzada (OAuth complejo, etc.)
- Compliance y regulaciones
- Backup strategies
- Monitoring avanzado (al principio)

**Mantener siempre**:
- Arquitectura básica
- Estructura de archivos
- APIs principales
- Autenticación básica
- CRUD operations
- Frontend básico
- Integración frontend-backend

## Ejemplo Práctico Completo

### Caso de Estudio: Plataforma de Prompts

**Prompt 1 - Arquitectura**:
```xml
<meta>
Crear una plataforma SaaS que permita a usuarios introducir ideas simples (1-2 líneas) 
y generar documentación estructurada completa con arquitectura técnica, funcionalidades 
y plan de acción usando IA.
</meta>

<inspirations>
- Notion: Por su interfaz limpia y organización de documentos
- GitHub: Por el sistema de proyectos y documentación
- V0: Por la generación automática de código desde prompts
</inspirations>

<guidelines>
Tecnologías obligatorias:
- Frontend: Next.js con TypeScript
- Backend: FastAPI con Python
- Base de datos: PostgreSQL
- Estilo: Tailwind CSS con diseño minimalista profesional
- Contenedores: Docker para desarrollo
- Características: Responsive, accesible, escalable
</guidelines>

<practicalities>
- Desarrollo con Docker Compose para servicios múltiples
- APIs RESTful para comunicación frontend-backend
- Sistema de autenticación JWT
- Almacenamiento de archivos localmente (al principio)
- Deployment en VPS usando Docker
</practicalities>

<context>
Usuarios objetivo: Desarrolladores y no-desarrolladores que quieren crear aplicaciones 
con IA pero necesitan mejor metodología. La plataforma debe generar documentación 
profesional que sirva como base para herramientas como Claude Code o Cursor.

Funcionalidades core:
1. Input de idea simple
2. Generación de arquitectura técnica
3. Definición de features detalladas  
4. Plan de acción paso a paso
5. Exportación de documentación
</context>
```

**Resultado esperado**: 20+ páginas de documentación técnica detallada.

### Verificación de Calidad

**Checklist de Planning exitoso**:
- [ ] Documentación de arquitectura > 15 páginas
- [ ] Features específicas y medibles definidas  
- [ ] Plan de acción con 20+ tareas ordenadas lógicamente
- [ ] Tecnologías específicas definidas (no genéricas)
- [ ] User stories concretas y testeable
- [ ] Estructura de archivos clara
- [ ] APIs definidas con endpoints específicos
- [ ] Flujo de datos documentado

## Troubleshooting Común

### "La IA me genera código en el Planning"
**Solución**: Agregar explícitamente "NO escribas código en esta respuesta, solo documentación y arquitectura"

### "El Planning es muy genérico"
**Solución**: Ser más específico en las inspiraciones y tecnologías. Usar ejemplos concretos.

### "Demasiada información innecesaria"
**Solución**: Filtrar agresivamente. Solo mantener lo esencial para MVP.

### "No sé qué tecnologías especificar"
**Solución**: Investigar stacks populares en el tipo de aplicación que quieres crear. Usar combinaciones probadas:
- **Web App**: Next.js + FastAPI + PostgreSQL
- **Dashboard**: React + Node.js + MongoDB  
- **SaaS**: Next.js + Django + PostgreSQL

## Siguientes Pasos

Una vez completado el Vibe Planning:
1. **Proceder a Vibe Design**: Crear mockups y diseños visuales
2. **Preparar entorno**: Setup de herramientas (Claude Code, Cursor, etc.)
3. **Iniciar Vibe Coding**: Implementación tarea por tarea
4. **Nunca saltarse pasos**: El planning es la base de todo el éxito posterior