Vibe Coding: Desarrollo de aplicaciones con IA sin escribir código

El desarrollo de software está experimentando una transformación significativa gracias a la inteligencia artificial. En este contexto surge el concepto de Vibe Coding, una metodología que permite crear aplicaciones completas mediante instrucciones en lenguaje natural, eliminando la necesidad de programar manualmente. En este artículo se presenta el desarrollo de una aplicación web utilizando Lovable, junto con el proceso completo, prompts utilizados y resultados obtenidos.

---

1. ¿Qué es el Vibe Coding y por qué es importante?

El Vibe Coding es un enfoque de desarrollo donde el programador (o el creador) describe lo que desea construir mediante prompts o instrucciones en lenguaje natural, y la inteligencia artificial genera automáticamente la estructura, lógica y diseño de la aplicación. Esto permite reducir la complejidad técnica y acelerar exponencialmente el proceso de desarrollo.

Su importancia radica en que democratiza el desarrollo de software. Ya no es estrictamente necesario saber lenguajes como JavaScript o Python para materializar una idea digital. Esto abre las puertas a emprendedores, diseñadores y profesionales de otras áreas para crear soluciones digitales funcionales, prototipos validables y herramientas internas sin depender de un equipo de ingeniería.

2. Ventajas y desventajas del Vibe Coding

2.1 Ventajas

• Velocidad: Desarrollo de prototipos y MVP en horas o minutos.
• Baja barrera de entrada: No requiere conocimientos avanzados de sintaxis de programación.
• Iteración inmediata: Cambios en el diseño o lógica con solo modificar el texto del prompt.
• Ideal para prototipos y herramientas internas: Perfecto para validar conceptos o crear paneles administrativos simples.

2.2 Desventajas

• Código no siempre optimizado: La IA puede generar código redundante o “spaghetti” difícil de mantener manualmente.
  • Dependencia del prompt engineering: La calidad del resultado es directamente proporcional a la claridad de las instrucciones.
  • Limitaciones en lógica de negocio compleja: A medida que la app requiere flujos de autenticación complejos o bases de datos reales, el Vibe Coding puro se queda corto.
  • Dificultad para escalar: Pasar de un prototipo en Lovable a un producto empresarial robusto suele requerir reescribir gran parte del código.

3. Competencias para Vibe Coding

Dependiendo del perfil del usuario, las competencias necesarias varían:

Usuario no técnico (Emprendedor, Diseñador, Analista):

• Pensamiento lógico y estructurado: Capacidad para desglosar un problema en pasos secuenciales.
• Redacción de prompts clara y específica: Saber describir componentes visuales (cards, botones, inputs) con precisión.
• Capacidad de análisis visual: Detectar cuándo un diseño no es responsive o los márgenes no son consistentes.

Usuario técnico (Desarrollador de Software):

• Arquitectura de software: Saber estructurar los componentes para que el prompt no genere una sola página de 2000 líneas de código.
• Debugging: Interpretar los errores de consola que la IA no detecta a simple vista.
• Optimización y refactorización: Limpiar el código generado por IA para producción.
• Conocimientos de Seguridad: Identificar vulnerabilidades que la IA podría introducir inadvertidamente.

4. Herramientas y técnicas

Para este proyecto se utilizó la herramienta Lovable, una plataforma que permite generar aplicaciones web React completas mediante inteligencia artificial. Otras técnicas incluidas son:

• Lovable.dev: Plataforma principal para generación de frontend y lógica simulada.
• IA Generativa (GPT-4): Motor subyacente para la interpretación de prompts.
• Prompt Engineering: Técnica de refinamiento iterativo de instrucciones.
• Iteración Incremental: No pedir todo de una vez; empezar por la estructura base y luego refinar UI/UX.

5. Creación de una app sin saber código: Caso Práctico “IdeaForge”

Paso a paso en Lovable

Paso 1: Registro en Lovable

Accedemos a Lovable.dev y nos registramos usando una cuenta de Google o GitHub. El proceso es gratuito para empezar con un número limitado de generaciones diarias.

Paso 2: Creación del primer proyecto

Una vez dentro del dashboard, hacemos clic en “New Project” o simplemente escribimos nuestra idea en la barra de chat principal. El entorno de Lovable es tipo chat, similar a ChatGPT pero con un editor de código y preview en vivo.

Paso 3: Prompt Inicial (La Base)

En el chat de Lovable, pegamos nuestro primer prompt. Este prompt se enfoca en la funcionalidad base: un formulario que recolecta datos y una simulación de respuesta de IA.

Crea una aplicación web moderna que genere ideas de negocio usando inteligencia artificial.

Requisitos:
- Formulario con campos:
  - Intereses
  - Habilidades
  - Presupuesto aproximado
- Botón para generar ideas

Resultados:
- Mostrar entre 3 y 5 ideas de negocio
- Cada idea debe incluir:
  - Nombre
  - Descripción
  - Nivel de dificultad (bajo, medio, alto)
  - Forma de monetización

Diseño:
- Interfaz moderna y limpia
- Uso de tarjetas (cards)
- Responsive

No usar backend real, simular generación con lógica interna o IA mock.

En este punto, la aplicación funciona: recoge datos y muestra tarjetas. Sin embargo, el diseño es muy genérico, tipo plantilla de Bootstrap sin personalidad.

Paso 4: Refinamiento de UI/UX (El Prompt de Reajuste)

Aquí es donde aplicamos realmente el “Vibe”. En lugar de editar CSS línea por línea, le pedimos a Lovable que transforme la experiencia visual. Este es el prompt de mejora completo que utilizamos:

Mejora completamente el diseño y experiencia de usuario de la aplicación de generación de ideas de negocio.

Objetivo: que la app se vea moderna, atractiva y dinámica, con sensación de producto real tipo startup.

Mejoras de UI:
- Usar un diseño tipo landing moderna con hero section
- Agregar iconos y emojis relevantes en títulos y resultados
- Implementar tarjetas (cards) con sombra suave y bordes redondeados
- Usar colores agradables (gradientes suaves)
- Tipografía moderna y jerarquía clara

Formulario:
- Inputs con diseño limpio y placeholders claros
- Animación sutil al hacer focus
- Botón principal llamativo con hover effect

Resultados:
- Mostrar ideas en cards animadas
- Cada idea debe tener:
  - Emoji representativo
  - Nombre destacado
  - Descripción clara
  - Badge de dificultad (color: verde, amarillo, rojo)
  - Sección de monetización

Interacciones:
- Animación al generar ideas (loading con spinner o skeleton)
- Transición suave al mostrar resultados
- Botón “Generar nuevas ideas”
- Scroll automático hacia resultados

Extras:
- Responsive (mobile y desktop)
- Microinteracciones (hover, scale, fade-in)
- Espaciado consistente (padding/margin)

No agregar backend real.
Mantener lógica simple pero mejorar toda la experiencia visual.

Tras este prompt, Lovable reestructuró el layout, añadió una sección Hero con un gradiente de fondo, mejoró las tarjetas con sombras y bordes redondeados, e implementó un estado de “Cargando…” con animación.

5.1 Herramienta interna para innovación

La aplicación desarrollada, que llamaremos “IdeaForge”, puede ser utilizada como herramienta interna en procesos de innovación dentro de empresas o equipos de trabajo. Facilita sesiones de brainstorming al proporcionar puntos de partida estructurados basados en las capacidades del equipo (habilidades) y recursos (presupuesto).

5.2 Caso Práctico: Solución al bloqueo emprendedor

Problema: Muchas personas desean emprender pero se enfrentan al “síndrome de la hoja en blanco”. No saben qué negocio iniciar o dudan si sus habilidades actuales son suficientes.

Solución con IdeaForge: La aplicación recibe inputs realistas del usuario. Por ejemplo:

• Intereses: “Tecnología, Educación”
• Habilidades: “Programación, Comunicación, Gestión de proyectos”
• Presupuesto: “Medio (1.000 – 5.000 USD)”

La app genera ideas coherentes como “Consultoría en Transformación Digital Educativa” o “Agencia de Project Management Freelance”, mostrando un camino viable y monetizable.

5.3 Nueva Funcionalidad: Roadmap de Ejecución

En una segunda fase de desarrollo (aplicando Vibe Coding iterativo), se solicitó a Lovable que no solo generara la idea, sino que entregara un plan ejecutable. Esta es la característica diferencial de la aplicación.

Visualización de Hoja de Ruta

Ahora, junto a la tarjeta de la idea, se despliega una vista tipo roadmap por fases. Esta vista desglosa la idea en meses accionables:

• Mes 1: Validación de idea (Investigación de mercado, encuestas).
• Mes 2: Desarrollo MVP (Prototipo funcional mínimo).
• Mes 3: Lanzamiento (Estrategia de marketing inicial).
• Mes 4: Primeros ingresos (Monetización temprana).
• Mes 6: Escalamiento (Optimización de procesos).

Progresión de Presupuesto

Se incluyó una barra de progreso visual que muestra cómo crece la inversión a lo largo del proyecto. Por ejemplo, un proyecto podría empezar con $50 USD en validación y escalar hasta $800 USD en la fase final. Esto ayuda al emprendedor a planificar su flujo de caja de manera realista.

Exportación a Excel

La funcionalidad más práctica para el usuario final es el botón “Seleccionar idea y descargar cronograma Excel”. Con un solo clic, la aplicación genera un archivo .xlsx estructurado con:

• Encabezado: Nombre del negocio, Descripción, Dificultad, Monetización.
• Tabla de fases: Mes, Presupuesto acumulado, Descripción de fase, Actividades concretas.

Este archivo está listo para ser utilizado en presentaciones a socios o como plan de trabajo personal. Esto convierte a la aplicación en una herramienta de gestión, no solo de inspiración.

6. Prompts y refinamiento: El Prompt Final Completo

El proceso de Vibe Coding es iterativo. Empezamos con un esqueleto funcional y luego inyectamos “vibra” (diseño y UX). A continuación se presenta el prompt final que combina la lógica inicial con todas las mejoras estéticas y de interacción, incluyendo la nueva funcionalidad de Roadmap y Exportación. Este es el prompt que realmente define el producto final deseado:

Crea una aplicación web moderna que genere ideas de negocio usando inteligencia artificial simulada.

Requisitos funcionales:
- Formulario con campos: Intereses, Habilidades, Presupuesto aproximado.
- Botón para generar ideas.
- Resultados: Mostrar entre 3 y 5 ideas de negocio. Cada idea debe incluir: Nombre, Descripción, Nivel de dificultad (bajo, medio, alto), Forma de monetización, Duración estimada (ej: 6 meses) y Presupuesto total.

Nueva lógica de Roadmap (OBLIGATORIO):
- Al hacer clic en "Ver Plan de Ejecución" en una tarjeta de idea, se debe mostrar una sección detallada con:
  1. Roadmap visual por fases: Mes 1 (Validación), Mes 2 (MVP), Mes 3 (Lanzamiento), Mes 4 (Ingresos), Mes 6 (Escalamiento).
  2. Cada fase debe listar 3 actividades accionables.
  3. Barra de progresión de presupuesto acumulado (Ej: $50 -> $200 -> $400 -> $550 -> $800).
  4. Botón para descargar este cronograma en formato Excel (.xlsx) con las columnas: Fase, Mes, Presupuesto, Descripción, Actividades.

Mejoras de UI/UX (APLICAR OBLIGATORIAMENTE):
- Diseño tipo landing moderna con hero section y gradientes suaves (ej. fondo #f8f9fa a #e9ecef).
- Iconos y emojis relevantes en títulos y resultados.
- Tarjetas (cards) con sombra suave (box-shadow), bordes redondeados (border-radius: 1rem) y animación de entrada (fade-in).
- Formulario con inputs limpios, animación sutil en focus (ring) y botón principal con gradiente y hover effect (scale).
- Badge de dificultad con colores: Bajo (Verde), Medio (Amarillo/Naranja), Alto (Rojo).
- Interacciones: Animación de loading (spinner o skeleton) mientras se "generan" las ideas. Scroll automático hacia los resultados.
- Botón "Generar nuevas ideas" visible tras resultados.

Lógica Interna (Mock):
- Simular generación de ideas y roadmap basado en palabras clave.
- Mantener el estado sin backend real (todo en el frontend con JavaScript/TypeScript).

Responsive: Mobile first. En escritorio, las tarjetas deben mostrarse en grid flexible.
No usar backend real. Enfócate en la experiencia visual y la fluidez.

6.1 Aplicación

Para poder probar la aplicación funcional desarrollada con Lovable, pueden ingresar al siguiente link: https://business-muse-gen.lovable.app
Además pueden probar la aplicación directamente en este artículo

7. Soporte y dificultades de las apps creadas con Vibe Coding

Durante la creación de “IdeaForge” y su evolución hacia una herramienta de planificación, surgieron dificultades inherentes a esta metodología:

• Complejidad del Estado Visual: Añadir la vista de Roadmap sin backend real requirió mapear manualmente los datos simulados a un nuevo componente React. La IA necesitó instrucciones muy precisas para no romper el diseño existente.
• Generación de Excel: Lovable tuvo que simular la descarga usando librerías de frontend como SheetJS. Fue necesario especificar exactamente la estructura de la tabla deseada en el prompt.
• Manejo de Presupuesto: La barra de progresión visual tuvo que ser recalibrada para que los montos numéricos coincidieran con la simulación de IA mock.
• Necesidad de iteración manual mínima: Aunque no programamos, sí tuvimos que indicarle a Lovable: “Elimina el footer”, “Cambia el placeholder del campo habilidades”, tareas de gestión de proyecto digital.

8. Conclusiones

El Vibe Coding, materializado a través de herramientas como Lovable, está redefiniendo la fase de prototipado y validación. Permite a cualquier persona con una visión clara y habilidades de comunicación (prompting) construir aplicaciones web interactivas en tiempo récord.

Con la incorporación del Roadmap y la Exportación a Excel, demostramos que el Vibe Coding no solo sirve para “jugar” con la IA, sino para crear herramientas de productividad reales. La capacidad de pasar de una idea abstracta a un plan de ejecución descargable en minutos es el verdadero valor diferencial de esta metodología. El futuro del desarrollo es híbrido: la IA escribe el código, y el humano dirige la orquesta con el “Vibe”.

Videos del Proceso

Video 1: Paso a paso del desarrollo en Lovable

En el siguiente video se muestra un resumen del proceso de registro, ingreso de prompts y transformación de la interfaz en tiempo real usando Lovable.

Video 2: Explicación de la App “IdeaForge” (Problema, Solución y Roadmap)

Este segundo video explica el propósito de la aplicación y su valor diferencial: cómo ayuda a emprendedores no solo a tener una idea, sino a ejecutarla con un plan claro.

Guion del video 2: “Esta aplicación utiliza inteligencia artificial para generar ideas de negocio personalizadas a partir de los intereses, habilidades y presupuesto del usuario. A diferencia de otras herramientas, no solo entrega la idea, sino también una hoja de ruta completa con un plan de ejecución dividido por meses, incluyendo actividades específicas y un presupuesto progresivo. Además, el sistema permite visualizar este roadmap de forma clara y exportarlo automáticamente a un archivo Excel, listo para ser usado como plan de trabajo real. Esto convierte la generación de ideas en un proceso práctico, estructurado y accionable.”

---

Segunda Fase: De Prototipo a Plataforma SaaS Profesional

Tras el desarrollo inicial de “IdeaForge” como prototipo funcional, el proyecto evolucionó hacia una plataforma SaaS completa con autenticación real, base de datos, inteligencia artificial integrada, panel de administración y experiencia de usuario profesional. A continuación se documentan todas las mejoras implementadas, los prompts utilizados y la arquitectura resultante.

1. Planificación Visual con GitMind

Antes de implementar las mejoras, se utilizó GitMind —herramienta gratuita de mapas mentales basada en la nube— para planificar visualmente la arquitectura completa del nuevo sistema. GitMind permite organizar conceptos complejos, facilitando la planificación de proyectos, la toma de notas y la colaboración en tiempo real.

Contextos donde se utilizó GitMind en este proyecto:

• Mapeo de arquitectura de software: Visualizar todos los módulos (Autenticación, Generador, IA, Dashboard, Admin, Email) y sus interconexiones antes de escribir código.
• Documentación visual del sistema: Crear un entregable claro de la arquitectura para el trabajo escrito y presentaciones.
• Brainstorming estructurado: Organizar las funcionalidades deseadas y detectar dependencias entre módulos.

Proceso de creación del mapa:

1. Nodo central: “IdeaForge – Plataforma SaaS de Generación de Ideas con IA”
2. Ramificación de módulos: Landing Page, Autenticación (Supabase Auth), Generador, IA (Gemini), Dashboard Usuario, Panel Admin, Sistema de Correo
3. Desglose detallado: Cada módulo se expandió con funcionalidades específicas —validaciones de contraseña, análisis de mercado, métricas admin, envío PDF/Excel
4. Conexión tecnológica: Se vincularon tecnologías (Supabase, Gemini API, Nodemailer, jsPDF, XLSX) con los módulos correspondientes

Mapa mental de la arquitectura:

El mapa muestra: nodo central “IdeaForge SaaS”, ramas para Autenticación (registro, login, Google OAuth, recuperación de contraseña), Generador (slider de presupuesto, chips rápidos), IA (análisis de mercado, financiero, chat mentor), Dashboard (ideas guardadas, progreso, estadísticas), Admin (métricas globales, usuarios, crecimiento) y Email (envío real con PDF + Excel).

2. Rediseño UX/UI Profesional

La primera mejora fue un rediseño completo de la interfaz para alcanzar estándares profesionales tipo SaaS (estilo Linear / Stripe Dashboard):

• Landing Page: Hero section con CTA, secciones de beneficios y cómo funciona, animaciones al scroll
• Formulario de autenticación: Validaciones en tiempo real, icono “ojo” para contraseñas, estados visuales de error/success/focus
• Generador: Slider de presupuesto con chips rápidos (Bajo/Medio/Alto), display dinámico “$2,500 USD”
• Resultados: Accordion animado con fases expandibles, cards en grid de 2 columnas con iconos + métricas
• UX Global: Iconografía Material Symbols, tipografía consistente, animaciones suaves, feedback visual en todas las acciones

3. Autenticación Completa con Supabase

Se implementó un sistema de autenticación profesional usando Supabase Auth:

• Registro con email y contraseña (validación: 8+ caracteres, mayúscula, minúscula, número, carácter especial)
• Login con Google OAuth
• Sesión persistente con JWT y refreshing automático
• Recuperación de contraseña vía email con token firmado (SHA256, TTL 15 minutos)
• Protección de rutas: usuarios no autenticados redirigidos al login
• Indicador de usuario logueado en navbar con botón de logout

4. Base de Datos y Persistencia

Se creó la estructura de datos en PostgreSQL (Supabase) con Row Level Security:

• Tabla “ideas”: id (uuid), user_id (FK), título, descripción, presupuesto, roadmap (jsonb), análisis_mercado (jsonb), análisis_financiero (jsonb), categoría, dificultad, created_at
• Tabla “profiles”: id (FK), email, display_name, avatar_url, role (user/admin)
• Tabla “progreso”: user_id, idea_id, tarea_key, completado — permite seguimiento de checklist
• Persistencia local: Estado del formulario guardado en localStorage (namespace ideagen.generator.v1) para no perder datos entre navegaciones

5. Integración de Inteligencia Artificial (Gemini)

Se integró Gemini API mediante Edge Functions en Deno para generar análisis inteligentes:

• Análisis de mercado: Nivel de demanda, competencia, público objetivo, tendencia del mercado
• Análisis financiero: Inversión inicial estimada, ingresos mensuales potenciales, tiempo de retorno (ROI)
• Recomendaciones estratégicas: Primeros pasos, riesgos identificados, consejos prácticos
• Chat Mentor IA: Resuelve dudas del emprendedor en tiempo real con contexto de la idea seleccionada
• Fallback local: Si Gemini falla (error 5xx/4xx), el sistema usa un pool de 20+ plantillas locales para garantizar respuesta

6. Dashboard de Usuario (“Mis Ideas”)

Se creó una vista personalizada para usuarios autenticados:

• Visualización de ideas guardadas en formato card
• Estadísticas personales: número de ideas, presupuesto promedio, categoría más frecuente
• Sistema de favoritos (marcar/desmarcar ideas)
• Opción de eliminar ideas con confirmación
• Seguimiento de progreso: checklist de tareas con barra de avance
• Mensaje “No tienes ideas guardadas aún” + loader mientras cargan datos

7. Panel de Administración

Se implementó un panel exclusivo para administradores (rol “admin” en tabla profiles):

• Total de usuarios registrados y crecimiento en el tiempo
• Total de ideas generadas en la plataforma
• Promedio de presupuesto de todas las ideas
• Ideas más comunes por categoría
• Últimos usuarios registrados
• Gráficas de actividad y distribución

(email verificado con role = admin).

8. Sistema de Correo Electrónico

Se corrigió el sistema de envío de emails que presentaba artefactos “=20” por problemas de encoding quoted-printable:

• Problema detectado: Headers MIME con quoted-printable mal formateado generaban “=20 =20 =20” en el cuerpo del email
• Solución: Encoding forzado a base64 con headers UTF-8 limpios, Content-Type text/html; charset=utf-8
• Adjuntos: PDF generado con jsPDF (plan completo) + Excel con XLSX (datos estructurados y fórmulas de ROI)
• Resultado: Correos limpios, profesionales, con información real del usuario

9. Exportación de Documentos

Se implementaron dos formatos de exportación profesional:

• PDF: Documento estructurado con resumen ejecutivo, análisis de mercado, proyecciones financieras, roadmap completo y marca de agua de la plataforma
• Excel: Archivo multi-hoja con cronograma de fases, presupuesto progresivo, cálculo de ROI, actividades por mes y KPIs dinámicos

10. Casos de Uso Principales

El sistema implementa 20 casos de uso documentados. Los más relevantes son:

ID	Caso de Uso	Descripción
CU-001	Registro de Usuario	Crear cuenta con email/password validado o Google OAuth
CU-004	Recuperación de Contraseña	Token firmado SHA256 con TTL de 15 minutos y latencia uniforme anti-timing attack
CU-006	Generar Ideas con IA	Invocar Edge Function Gemini → 3-5 ideas personalizadas con fallback local si hay error
CU-007	Analizar Viabilidad	Evaluación de mercado, competencia, proyección financiera y recomendaciones por idea
CU-008	Guardar Idea	Persistir en PostgreSQL con RLS (cada usuario solo ve sus propias ideas)
CU-009	Gestionar Roadmap	Checklist de tareas por fase con barra de progreso y unique constraint
CU-010/011	Exportar PDF/Excel	Documentos profesionales con jsPDF y XLSX, fórmulas de ROI incluidas
CU-012	Enviar Plan por Email	SMTP con sanitización RFC 5322, adjuntos PDF + Excel, sin artefactos “=20”
CU-013	Chat Mentor IA	Consultas contextuales sobre la idea, máximo 6 frases por respuesta
CU-014	Dashboard de Métricas	Estadísticas personales: ideas por categoría, presupuesto promedio, favoritos
CU-016	Panel Administrativo	Métricas globales, listado de usuarios, crecimiento, ideas por categoría
CU-018	Fallback de IA	Pool de 20+ plantillas locales si Gemini no responde, usuario siempre recibe resultado

11. Tecnologías del Stack Final

Categoría	Tecnología	Uso
Frontend	React 18 + Vite + TypeScript 5.x	SPA de alta velocidad con tipado estático
Estilos	TailwindCSS + shadcn/ui	Diseño atómico y componentes consistentes
Backend/BaaS	Supabase	Autenticación, base de datos PostgreSQL, RLS
IA	Gemini API	Generación de ideas, análisis de mercado y finanzas
Edge Functions	Deno Deploy	Procesamiento seguro de APIs sin exponer credenciales
Reportes	jsPDF + XLSX	Generación de PDF y Excel en cliente
Email	Nodemailer + SMTP	Envío de planes con adjuntos

12. Prompt Maestro de la Segunda Fase

Este fue el prompt integral que unificó todas las mejoras implementadas:

Quiero mejorar mi aplicación de generación de ideas de negocio para convertirla en una plataforma tipo SaaS con inteligencia artificial, análisis de mercado y panel de administración.

IMPORTANTE: La app ya tiene generación de ideas, roadmap y exportación a Excel. NO romper lo existente.

INTEGRACIÓN DE IA (Gemini):
- Análisis de mercado: demanda, competencia, público objetivo, tendencia
- Análisis financiero: inversión inicial, ingresos mensuales, ROI
- Recomendaciones: primeros pasos, riesgos, consejos estratégicos
- Chat mentor contextual por idea seleccionada
- Fallback local con 20+ plantillas si la API falla

AUTENTICACIÓN (Supabase):
- Registro con email/password + validaciones en tiempo real
- Login con Google OAuth
- Recuperación de contraseña con token SHA256 (TTL 15min)
- Protección de rutas, sesión persistente con JWT

BASE DE DATOS (Supabase PostgreSQL):
- Tabla "ideas" con análisis_mercado y análisis_financiero (jsonb)
- Tabla "profiles" con role (user/admin)
- Tabla "progreso" para checklist con unique constraint
- Row Level Security en todas las tablas

SISTEMA DE ROLES:
- Admin asignado: Erick Trujillo
- Panel admin: métricas globales, usuarios, crecimiento, gráficas

DASHBOARD DE USUARIO:
- Ideas guardadas, favoritos, estadísticas personales
- Seguimiento de progreso con barra de avance
- Eliminar ideas con confirmación

EMAIL:
- Corregir encoding "=20" → base64 + UTF-8 limpio
- Adjuntar PDF (jsPDF) + Excel (XLSX con fórmulas ROI)
- Sanitización RFC 5322

UX/UI:
- Diseño tipo Linear/Stripe Dashboard
- Iconografía Material Symbols, animaciones suaves
- Persistencia local (localStorage namespace ideagen.generator.v1)
- Loading states, toasts de confirmación, mensajes amigables

RESULTADO: Plataforma SaaS completa lista para producción.

13. Conclusiones de la Segunda Fase

La segunda fase transformó “IdeaForge” de un prototipo funcional a una plataforma SaaS profesional y escalable. La planificación con GitMind permitió visualizar la arquitectura completa antes de implementar, facilitando un desarrollo ordenado. La aplicación de prompts de refinamiento progresivo demostró que el Vibe Coding puede producir software complejo con autenticación, base de datos relacional con RLS, roles de usuario, IA integrada con fallback, panel de administración y exportación de documentos profesionales.

El stack tecnológico final —React 18 + TypeScript + Supabase + Gemini API + Deno Edge Functions— ofrece una experiencia completa: registro seguro con múltiples métodos, generación de ideas con análisis de mercado real, roadmap ejecutable descargable en PDF y Excel, dashboard personalizado con seguimiento de progreso, y panel de administración con métricas globales. La plataforma está lista para producción, con arquitectura escalable que permite futuras integraciones y expansión a nuevos mercados.

---

Creditos

Autor: Carlos Santiago Urrego Jiménez, Erick Trujillo Vera
Editor: Carlos Iván Pinzón Romero
Codigo: UCIAG-9
Universidad: Universidad Central

9. Referencias

Lovable. (s. f.). AI App Builder | Vibe Code Apps & Websites with AI, Fast. https://lovable.dev/
Sign in - Google Accounts. (s. f.). https://aistudio.google.com/api-keys
Guía de ingeniería de Prompt – Nextra. (s. f.). https://www.promptingguide.ai/es
Lovable. (s. f.-b). Lovable app. https://forgei-idea.lovable.app/
erick trujillo vera. (2026b, abril 13). Lovable IA [Vídeo]. YouTube. https://www.youtube.com/watch?v=NURtUAiDG9c
https://niixer.com/wp-content/uploads/2026/04/Portada-4.webp