Prompt de Arquitecto Vibecoder para Micro-SaaS

**El Bucle Central:** Desglose paso a paso del viaje del usuario más importante (El Momento 'Ajá'). 1) El usuario llega a la página de inicio y ve un único campo de entrada con un botón que dice "Resolver mi problema". 2) El usuario escribe su problema en lenguaje natural (máx. 500 caracteres) y hace clic en el botón. 3) El sistema muestra un estado de carga con una barra de progreso animada y el texto "Analizando contexto" (2 segundos). 4) El sistema presenta una solución de 3 pasos con viñetas, cada paso con un título accionable y una estimación de tiempo de implementación. 5) El usuario hace clic en "Aplicar paso 1" y el sistema genera un bloque de código copiable con instrucciones de integración específicas para su stack. 6) El usuario copia el código, lo pega en su proyecto y ve el resultado inmediato. El momento 'Ajá' ocurre cuando el código funciona sin modificaciones manuales. **Estrategia de Integración de IA:** Utilizar un encadenamiento de prompts de 2 etapas con una llamada directa a la API de LLM (GPT-4o-mini o Claude Haiku). - Etapa 1 (Prompt de análisis): El LLM recibe el problema del usuario y devuelve un JSON estructurado con `{categoria, complejidad, stack_sugerido, pasos}`. Esto usa un prompt de sistema fijo con ejemplos few-shot. - Etapa 2 (Prompt de generación de código): El LLM recibe el JSON de la etapa 1 y genera el código específico para el paso seleccionado. Aquí se usa un prompt dinámico que incluye el lenguaje de programación detectado y las restricciones de formato. - No usar RAG en el MVP. La base de conocimiento es estática (un archivo JSON con 50 patrones de solución comunes). El costo por solicitud se mantiene por debajo de $0.01. **El Stack Tecnológico 'Vibecoder':** - Frontend: Next.js 14 (App Router) con Tailwind CSS y shadcn/ui. Generado con v0 para los componentes iniciales. - Backend: API Routes de Next.js (sin servidor separado). Usar Server Actions para mutaciones simples. - Base de datos: SQLite con Prisma ORM (archivo local, sin configuración de hosting). Almacenar solo sesiones de usuario y historial de prompts. - Hosting: Vercel (deploy automático desde GitHub). Sin configuración de dominio personalizado en el MVP. - Autenticación: Omitida en el MVP. Usar un ID de sesión anónimo en localStorage. **Reducción del Alcance del MVP:** Excluir estas 3 características que los fundadores suelen construir primero: 1) **Autenticación de usuarios y perfiles** - No hay login, registro ni tablero de proyectos. El usuario es anónimo y su historial se guarda localmente. 2) **Sistema de facturación y planes de pago** - No hay Stripe, ni límites de uso, ni página de precios. El MVP es gratuito sin restricciones. 3) **Editor de código integrado o vista previa en vivo** - No hay sandbox, ni terminal, ni previsualización del código ejecutado. Solo se muestra el código en un bloque con botón de copiar. **El Prompt de Inicio:** Escribe este prompt exacto en tu herramienta de IA (Cursor, v0, Lovable, etc.): "Genera una aplicación Next.js 14 con App Router y TypeScript. La app se llama 'ProblemaSolucionador'. La página principal tiene un diseño minimalista centrado: un título grande '¿Cuál es tu problema?', un textarea de 500 caracteres máximo, y un botón azul 'Resolver'. Al enviar, llama a una API Route en `/api/solve` que recibe `{problema: string}`. La API usa el SDK de OpenAI con modelo `gpt-4o-mini` y un prompt de sistema que dice: 'Eres un arquitecto de soluciones. Devuelve JSON con formato: {categoria: string, pasos: [{titulo: string, descripcion: string, codigo: string}]}. El código debe ser autónomo y ejecutable. Usa 3 pasos máximo.' La respuesta se muestra en una tarjeta debajo del formulario con cada paso en un acordeón expandible. Incluye un botón 'Copiar código' que usa `navigator.clipboard`. Usa Tailwind CSS con clases utilitarias. No uses autenticación, no uses base de datos, no uses componentes externos más allá de `lucide-react` para iconos. El archivo principal es `app/page.tsx` y la ruta API es `app/api/solve/route.ts`. Asegúrate de que el manejo de errores muestre un mensaje rojo si la API falla. El diseño debe ser responsive y usar la fuente Inter."