# Herramientas y Setup para Vibe Coding

## Panorama General de Herramientas

### Categorización por Nivel de Vibe Coding

#### Nivel 1: Herramientas Web IA
- **V0 (Vercel)**: Generación de interfaces React desde prompts
- **Bolt.new**: Aplicaciones completas con stack fullstack
- **Replit**: IDE en la nube con IA integrada
- **Loveable**: Constructor de aplicaciones no-code con IA

**Características comunes**:
- Interfaz web completa
- No requiere setup local
- Generación automática de backend/database
- Ideal para prototipos rápidos
- Limitado control sobre arquitectura

#### Nivel 2: Editores con IA Integrada
- **Cursor**: Editor basado en VS Code con IA potente
- **WindSurf**: Editor optimizado para AI coding
- **Trae AI**: Nuevo editor de TikTok, muy económico
- **GitHub Copilot**: Plugin IA para editores tradicionales

#### Nivel 3: Clientes Agénticos
- **Claude Code**: Cliente agéntico de Anthropic
- **Gemini CLI**: Cliente gratuito de Google
- **Warp 2.0**: Terminal con IA para comandos y desarrollo

## Claude Code: El Rey del Vibe Coding

### ¿Por qué Claude Code es Superior?

**Ventajas técnicas**:
- **Contexto masivo**: 1 millón de tokens vs 200k de Cursor
- **Comprensión profunda**: Mejor para arquitectura compleja
- **Comandos especializados**: Herramientas específicas para desarrollo
- **Modelo de pensamiento**: Claude 4 Opus con reasoning avanzado

### Comandos Esenciales de Claude Code

#### `/init` - Documentación Automática
```bash
/init
```
**Funcionalidad**:
- Crea documentación completa del proyecto actual
- Analiza estructura de archivos, dependencias, configuración
- Genera resumen de arquitectura y patrones de código
- Ideal para contexto inicial en proyectos existentes

**Uso recomendado**:
- Al comenzar a trabajar en proyecto existente
- Para transferir contexto entre sesiones
- Como base para `gemini.md` en otros editores

#### `/memory` - Gestión de Contexto
```bash
/memory show    # Ver memoria actual
/memory add [texto]    # Añadir información
/memory clear   # Limpiar memoria
```

**Casos de uso**:
- Mantener decisiones arquitectónicas importantes
- Recordar patrones específicos del proyecto
- Contexto personalizado para metodología de trabajo

#### `/compress` - Optimización de Contexto
```bash
/compress
```
**Funcionalidad**:
- Reduce el contexto de chat largo a resumen conciso
- Mantiene información relevante, elimina verbosidad
- Útil para sesiones largas de debugging

**Cuándo usar**:
- Después de 5+ intercambios de debugging
- Cuando el contexto se vuelve muy largo
- Para optimizar rendimiento en sesiones extensas

#### `/clear` - Limpieza de Contexto
```bash
/clear
```
**Cuándo usar**:
- Al cambiar de tarea completamente diferente
- Cuando contexto anterior interfiere
- Para empezar sesión limpia manteniendo memoria

#### `/tools` - Herramientas Disponibles
```bash
/tools
```
**Funcionalidades base**:
- File operations (leer, escribir, buscar)
- Command execution
- Web browsing (en algunos casos)
- Code analysis

### Sistema MCP (Model Context Protocol)

**¿Qué son los MCPs?**
- Servidores que proporcionan contexto actualizado a la IA
- Acceso a documentación oficial de frameworks
- Datos en tiempo real de APIs y servicios

**MCPs Esenciales**:
- **Context 7**: Documentación oficial de frameworks (React, Next.js, etc.)
- **Supabase**: Integración directa con servicios Supabase
- **GitHub**: Acceso a repositorios y issues
- **Database**: Consultas directas a bases de datos

**Instalación típica**:
```json
{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["@context7/mcp-server"],
      "env": {
        "CONTEXT7_API_KEY": "your-key"
      }
    }
  }
}
```

### Configuración Óptima de Claude Code

**Modelo recomendado**: Claude 4 Opus (pensamiento extendido)
**Configuración de memoria**: Activada con información del proyecto
**MCPs**: Context 7 como mínimo
**Reglas del proyecto**: Definir en archivo específico

## Cursor: El Editor Familiar

### Fortalezas de Cursor

- **Interfaz familiar**: Basado en VS Code
- **Adopción masiva**: Mayor comunidad y recursos
- **Integración plugins**: Ecosistema VS Code completo
- **Composer**: Herramienta para operaciones multi-archivo

### Comandos y Funcionalidades

#### @ Commands
```bash
@codebase    # Referencia a toda la base de código
@filename    # Referencia a archivo específico
@docs        # Documentación del proyecto
```

#### Composer
- Operaciones multi-archivo simultáneas
- Refactoring complejo
- Implementación de features que afectan múltiples archivos

### Configuración Recomendada

**Model**: Claude 4 Sonnet (balance precio/rendimiento)
**Rules file**: Crear `.cursorrules` con metodología del proyecto
**Extensions**: Mantener mínimas para mejor rendimiento

**Ejemplo `.cursorrules`**:
```
# Project Rules
- Use TypeScript for all new files
- Tailwind CSS for styling, no custom CSS
- Follow established file naming conventions
- Docker for all services
- FastAPI for backend, Next.js for frontend

# Code Style  
- Functional components in React
- Async/await over promises
- Destructuring for cleaner code
- Error boundaries for robust UX
```

## Gemini CLI: La Alternativa Gratuita

### Ventajas de Gemini CLI

- **Completamente gratuito**: Modelo Gemini 2.5 Pro sin costo
- **Contexto grande**: Similar a Claude Code en capacidad
- **Terminal nativa**: Experiencia similar a Claude Code
- **Sistema de memoria**: Archivo `.gemini` para contexto persistente

### Comandos Específicos

#### Sistema de Memoria
```bash
/memory show      # Ver contexto guardado
/memory add      # Añadir información al contexto  
/memory refresh  # Actualizar memoria
```

#### Contexto de Proyecto
**Truco importante**: Renombrar `cloud.md` → `gemini.md`
```bash
# Crear contexto inicial (usando Claude Code)
claude /init > cloud.md
mv cloud.md gemini.md

# Gemini detectará automáticamente gemini.md como contexto
```

### Limitaciones Conocidas

- **Menor pulimiento**: Es más nuevo, menos refinado que Claude Code
- **Comandos limitados**: No tiene equivalente exacto a `/compress`, `/tools`
- **Community**: Menor ecosistema y documentación
- **Debugging**: Menos efectivo para resolución de errores complejos

### Configuración Óptima

**Modelo**: Gemini 2.5 Pro (gratuito)
**Archivo contexto**: `gemini.md` en raíz del proyecto
**Estructura recomendada**:
```
proyecto/
├── gemini.md           # Contexto para Gemini
├── docs/
│   ├── architecture.md
│   ├── features.md
│   └── plan.md
└── src/
```

## Trae AI: La Sorpresa Económica

### ¿Por qué considerar Trae?

- **Precio**: $3-15/mes, extremadamente económico
- **Mejora dramática**: Era terrible con Claude 3.5, excelente con Claude 4
- **TikTok backing**: Respaldo de empresa tecnológica mayor

### Características

- **Modelos**: Claude 4 Sonnet principalmente
- **Interfaz**: Limpia y minimalista
- **Performance**: Sorprendentemente bueno para el precio
- **Target**: Desarrolladores que buscan alternativa económica

### Limitaciones

- **Nuevo**: Menos maduro que Cursor o Claude Code
- **Funcionalidades**: Menos comandos especializados
- **Community**: Ecosistema pequeño
- **MCPs**: Soporte limitado

## Warp 2.0: Terminal con Superpoderes

### Propósito Real de Warp 2.0

**NO es para Vibe Coding serio**:
- Debugging básico funciona, pero herramientas especializadas son superiores
- Mejor para aprender comandos de terminal
- Excelente para usuarios no-técnicos

**SÍ es para**:
- **Aprendizaje de terminal**: Traducir intenciones a comandos
- **Automatización de comandos**: Scripts y workflows
- **Productividad terminal**: Notebooks, variables de entorno

### Características Únicas

#### Workflows personalizados
```bash
# Ejemplo: Script para levantar proyecto
name: "Start Dev"
command: "docker-compose up -d && npm run dev"
description: "Levantar entorno completo de desarrollo"
```

#### Notebooks integrados
- Documentación markdown dentro de la terminal
- Apuntes y comandos organizados
- Importación desde Notion, Obsidian

#### AI Command Translation
```bash
# Input natural: "crear carpeta llamada frontend con proyecto Next.js"
# Output: mkdir frontend && cd frontend && npx create-next-app .
```

### Pricing y Limitaciones

**Plan gratuito**: 150 peticiones/mes
- Suficiente para aprender y testear
- Claude 4 Sonnet y Gemini 2.5 Pro incluidos
- **Limitación**: No Claude 4 Opus

**Plan pagado**: $15-18/mes
- 10,000 archivos de codebase indexados
- Modelos premium
- Teams y colaboración

## Comparativa Técnica Detallada

### Matriz de Decisión

| Criterio | Claude Code | Cursor | Gemini CLI | Trae AI | Warp 2.0 |
|----------|-------------|---------|------------|---------|----------|
| **Costo** | $100+/mes | $20/mes | Gratuito | $3-15/mes | $0-18/mes |
| **Contexto** | 1M tokens | 200K tokens | ~1M tokens | ~500K tokens | Variable |
| **Diseño** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
| **Lógica Backend** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
| **Debugging** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐ |
| **Curva Aprendizaje** | Media | Baja | Media | Baja | Baja |
| **MCPs** | ✅ | ✅ | ❌ | ❌ | ✅ |
| **Community** | Grande | Muy Grande | Pequeña | Pequeña | Media |

### Recomendaciones por Perfil

#### Para Profesionales/Empresas
**Primera opción**: Claude Code
- Máxima calidad y contexto
- Mejor ROI para proyectos complejos
- Herramientas especializadas

**Segunda opción**: Cursor  
- Familiar para equipos de VS Code
- Buen balance precio/funcionalidad
- Ecosistema maduro

#### Para Estudiantes/Experimentadores
**Primera opción**: Gemini CLI
- Completamente gratuito
- Potencia comparable a herramientas pagadas
- Buena introducción al Vibe Coding

**Segunda opción**: Trae AI
- Extremadamente económico
- Sorprendentemente capaz
- Buen upgrade desde gratuitas

#### Para Principiantes Absolutos
**Primera opción**: Warp 2.0
- Aprendizaje de terminal asistido por IA
- Traducción de lenguaje natural a comandos
- Notebooks para documentar aprendizaje

**Segunda opción**: Cursor
- Interfaz familiar
- Documentación abundante
- Community support

## Setup Técnico Completo

### Configuración del Entorno de Desarrollo

#### Estructura de Proyecto Recomendada
```
proyecto/
├── docs/
│   ├── architecture.md      # Output de Vibe Planning
│   ├── features.md         # Features detalladas
│   └── plan.md            # Plan de acción paso a paso
├── design/
│   ├── landing-page.png   # Referencias visuales
│   ├── dashboard.png
│   └── mobile-mockups.png
├── .cursorrules           # Para Cursor
├── gemini.md             # Para Gemini CLI
├── cloud.md              # Para Claude Code (auto-generado)
├── docker-compose.yml    # Servicios de desarrollo
├── .env.example         # Variables de entorno template
└── README.md           # Documentación del proyecto
```

#### Docker Compose para Desarrollo
```yaml
version: '3.8'
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/app
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/dbname
    depends_on:
      - db

  db:
    image: postgres:15
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=pass
      - POSTGRES_DB=dbname
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

  adminer:
    image: adminer
    ports:
      - "8080:8080"
    depends_on:
      - db

volumes:
  postgres_data:
```

### Variables de Entorno Template

#### `.env.example`
```bash
# Database
DATABASE_URL=postgresql://user:pass@localhost:5432/dbname
POSTGRES_USER=user
POSTGRES_PASSWORD=pass
POSTGRES_DB=dbname

# API Keys
OPENAI_API_KEY=your-openai-key
ANTHROPIC_API_KEY=your-anthropic-key
CONTEXT7_API_KEY=your-context7-key

# App Configuration  
NEXTAUTH_SECRET=your-secret
NEXTAUTH_URL=http://localhost:3000
NODE_ENV=development

# External Services
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
```

## Integración de Herramientas

### Flujo de Trabajo Híbrido

#### Fase 1: Planning
**Herramienta**: ChatGPT Deep Research o Manus
**Output**: `docs/architecture.md`, `docs/features.md`, `docs/plan.md`

#### Fase 2: Design  
**Herramienta**: Google Stitch + Inspiración (Dribbble, Movin.com)
**Output**: Carpeta `design/` con mockups y referencias

#### Fase 3: Development
**Herramienta principal**: Claude Code o Cursor
**Herramienta secundaria**: Warp 2.0 para comandos
**Flujo**: Tarea por tarea del plan de acción

#### Fase 4: Deployment
**Herramientas**: Docker + VPS (fuera del scope de Vibe Coding)

### Sincronización de Contexto

#### Entre Claude Code y Cursor
```bash
# En Claude Code
/init > cloud.md

# Copiar a Cursor como .cursorrules o contexto
# Mantener sincronizados manualmente
```

#### Entre herramientas y Git
```bash
# Commits frecuentes para mantener contexto
git add .
git commit -m "feat: implement task X.Y from action plan"
git push origin feature-branch

# Tags para versiones estables
git tag -a v0.1.0 -m "MVP version"
```

## Troubleshooting Común

### Problemas de Contexto

**Síntoma**: La IA "olvida" decisiones anteriores
**Solución**: 
- Verificar que documentación esté en lugar correcto
- Usar comandos de memoria específicos de cada herramienta
- Refrescar contexto con `/memory refresh` o `/clear` + reload

**Síntoma**: Respuestas inconsistentes entre sesiones
**Solución**:
- Mantener archivos de contexto actualizados
- Usar `/init` en Claude Code al iniciar sesión
- Verificar que `.cursorrules` esté actualizado

### Problemas de Rendimiento

**Síntoma**: Respuestas lentas o timeouts
**Solución**:
- Usar `/compress` para reducir contexto
- Dividir tareas grandes en subtareas más pequeñas
- Verificar si plan gratuito tiene limitaciones activas

**Síntoma**: Errores de API o límites alcanzados
**Solución**:
- Rotar entre herramientas (Gemini CLI como backup gratuito)
- Dividir trabajo en sesiones más cortas
- Considerar upgrade a plan pagado

### Problemas de Integración

**Síntoma**: Docker no levanta correctamente
**Solución**:
- Verificar que todos los puertos estén disponibles
- Revisar logs: `docker-compose logs [service]`
- Limpiar volúmenes: `docker-compose down -v`

**Síntoma**: MCPs no funcionan
**Solución**:
- Verificar configuración en settings de la herramienta
- Confirmar API keys válidas
- Probar MCP individual con comandos de test

## Optimización de Costos

### Estrategia de Herramientas por Presupuesto

#### Presupuesto $0/mes
- **Principal**: Gemini CLI
- **Secundaria**: Warp 2.0 (plan gratuito)  
- **Design**: Google Stitch gratuito
- **Limitaciones**: 150 requests/mes en Warp

#### Presupuesto $20/mes
- **Principal**: Cursor
- **Secundaria**: Gemini CLI (backup)
- **Terminal**: Warp 2.0 o terminal normal
- **Ideal para**: Mayoría de desarrolladores

#### Presupuesto $100+/mes
- **Principal**: Claude Code
- **Secundaria**: Cursor (diferentes casos de uso)
- **Terminal**: Warp 2.0 pagado
- **Ideal para**: Profesionales, proyectos complejos

### Maximización de Planes Gratuitos

1. **Rotar herramientas**: Usar Gemini CLI cuando se agotan requests de Warp
2. **Sesiones eficientes**: Preparar bien el contexto para minimizar iteraciones
3. **Batch operations**: Agrupar tareas relacionadas en una sesión
4. **Community**: Aprovechar recursos gratuitos de discord/comunidades

## Siguientes Pasos

Después de elegir y configurar herramientas:
1. **Practicar con proyecto simple**: Aplicar metodología completa
2. **Desarrollar templates**: Crear prompts personalizados para tu stack
3. **Integrar en workflow**: Adaptar proceso de desarrollo existente
4. **Explorar MCPs**: Instalar y configurar servidores de contexto relevantes
5. **Community**: Unirse a discords y compartir experiencias