Guía paso a paso: creación de un CRM con Vibe Coding

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

El concepto “Vibe Coding” fue acuñado en febrero de 2025 por Andrej Karpathy, cofundador de OpenAI y ex-director de IA en Tesla. En una publicación en X (antes Twitter), Karpathy describió una nueva forma de desarrollar software donde el programador abandona el control línea a línea del código y, en cambio, “se deja llevar por el flujo” (el vibe), delegando la escritura real del código a modelos de inteligencia artificial generativa a través del lenguaje natural.

En términos simples: el usuario describe lo que quiere construir usando lenguaje natural como si le explicara a un colega qué necesita y el modelo de IA genera, corrige y refina el código automáticamente. El desarrollador o el usuario de negocio acepta, rechaza o redirige los resultados sin necesidad de entender cada línea que se produce.

Vibe Coding es el paradigma de desarrollo de software impulsado por inteligencia artificial donde el código es generado principalmente por modelos de lenguaje grande (LLMs), mientras que el humano actúa como director creativo, arquitecto de ideas y validador de resultados. No importa si el resultado “tiene sentido” técnicamente; lo que importa es si funciona y cumple la intención.

La importancia estratégica del Vibe Coding

• Democratización radical del desarrollo: Por primera vez en la historia, cualquier persona con una idea clara puede construir un software funcional. Médicos, abogados, maestros, emprendedores y gestores de procesos pueden crear sus propias herramientas sin depender de presupuestos de IT.
• Compresión del tiempo al mercado: Lo que antes requería de 3 a 6 meses de desarrollo puede lograrse en días o incluso horas. Un prototipo funcional que antes costaba $50,000 USD en desarrollo puede generarse por $50 USD en créditos de IA.
• Nuevos roles profesionales: Emerge la figura del ‘Product Engineer’ o ‘AI Builder’, alguien que combina visión de negocio, diseño de experiencia de usuario y habilidad para guiar modelos de IA hacia soluciones funcionales.
• Transformación de la educación en tecnología: Los cursos de programación tradicional enfrentan una redefinición. El foco ahora está en el pensamiento computacional, el diseño de sistemas y el Prompt Engineering, no en la sintaxis de lenguajes específicos.
• Ecosistema de herramientas en explosión: Plataformas como Lovable, Bolt.new, Cursor, Replit Agent y v0 compiten en un mercado que crece exponencialmente.

Ventajas y Desventajas del Vibe Coding

Velocidad de prototipado sin precedentes

Un prototipo funcional puede construirse en minutos u horas, no en semanas. Esto permite:

  • Validar hipótesis de negocio antes de invertir recursos significativos

  • Presentar demos funcionales a clientes o inversores el mismo día de la reunión

  • Debemos Iterar sobre el diseño de una aplicación en tiempo real con el equipo   • Lanzar un MVP al mercado en días, no en meses

Accesibilidad total — Sin código requerido

La barrera de entrada es la más baja en la historia del desarrollo de software:

  • No se requiere conocimiento de ningún lenguaje de programación

  • Instalar herramientas o configurar entornos de desarrollo

  • Funciona desde el navegador web en cualquier dispositivo   • El único requisito es poder describir con claridad qué se quiere construir

Reducción drástica de costos

Comparado con el desarrollo tradicional, los ahorros son sustanciales:

  • Plan gratuito de Google AI Studio: 5 créditos diarios — suficiente para prototipos simples

  • Un proyecto que antes costaba $50,000 USD puede costar entre $100 y $500 USD en créditos   • Equipos pequeños pueden competir con grandes departamentos de I

Foco total en el problema, no en la tecnología

El Vibe Coder puede concentrarse en lo que realmente importa:

  • Entender profundamente el problema de negocio que se quiere resolver

  • Diseñar la experiencia de usuario antes que la arquitectura técnica

  • Iterar sobre la lógica de negocio sin perderse en detalles de implementación   • Colaborar con expertos del dominio (clientes, usuarios finales) en tiempo real

Desventajas

Deuda técnica acumulada

El código generado por IA es funcional pero no siempre óptimo. Con el tiempo:

  • Agregar nuevas funcionalidades puede volverse progresivamente más difícil

  • La estructura del código puede ser inconsistente o redundante

  • La refactorización (reorganización del código) requiere intervención de un desarrollador   Mitigación: Revisar la arquitectura con un desarrollador cada 2-3 semanas en proyectos activos

Limitaciones en complejidad y escala

El Vibe Coding tiene fronteras claras de aplicabilidad:

  • Sistemas de alta concurrencia (miles de usuarios simultáneos)

  • Lógica de negocio muy compleja con muchas interdependencias

  • Integraciones con sistemas legacy empresariales complejos

  • Aplicaciones que requieren cumplimiento normativo (HIPAA, PCI-DSS, SOX)   Mitigación: Identificar el alcance máximo del proyecto antes de iniciar

Dependencia del proveedor de IA

Construcciones basadas en Lovable u otras herramientas similares implican:

  • Dependencia de la disponibilidad del servicio (posibles interrupciones)

  • Cambios en precios o planes que pueden afectar la economía del proyecto

  • El modelo de IA puede cambiar, afectando la forma en que responde a prompts   Mitigación: Exportar el código a GitHub regularmente para mantener independencia

¿Para qué proyectos es ideal el Vibe Coding?

1. MVPs y prototipos
2. Herramientas internas del equipo
3. Dashboards y reportes
4. Portales de clientes simples
5. Apps de gestión (CRM, inventario)
6. E-commerce de alta escala
7. Apps financieras o de salud
8. Sistemas empresariales (ERP, SAP)

Competencias para el Vibe Coding

El Vibe Coding no elimina la necesidad de competencias: las transforma profundamente. Las habilidades que se vuelven críticas son diferentes según el rol que cada persona ocupa en el proceso de desarrollo asistido por IA. A continuación, describimos en detalle las competencias necesarias para cada perfil.

• Pensamiento analítico
• Comunicación y redacción de prompts
• Diseño básico de UX/flujos
• Revisión de seguridad del código
• Testing automatizado
• Arquitectura de sistemas
• Gestión del contexto en conversaciones IA
• Integración con APIs externas

Herramientas y Técnicas de Vibe Coding

El ecosistema de herramientas de Vibe Coding se divide en tres categorías principales: plataformas de generación de aplicaciones completas, entornos de desarrollo con IA integrada, y asistentes de código conversacionales. Cada herramienta tiene un perfil de uso diferente.

Para construir la aplicación CRM de esta guía, utilizamos un stack de cuatro herramientas complementarias que, combinadas, cubren todo el ciclo de desarrollo: desde la definición de los prompts hasta la publicación de la app en un servidor accesible públicamente. Estas cuatro herramientas son: ChatGPT, Google AI Studio, GitHub y Render.

El stack de herramientas de esta guía

ChatGPT (OpenAI): Diseño y refinamiento de prompts de alta calidad antes de usarlos en Google AI Studio. El asistente de inteligencia artificial de OpenAI, cumple en este flujo de trabajo un rol específico y crucial: es la herramienta donde se diseñan, prueban y refinan los prompts ANTES de usarlos en Google AI Studio. Esta separación de responsabilidades tiene una razón práctica importante: Google AI Studio consume recursos y tiempo en cada generación, por lo que llegar con un prompt bien construido reduce el número de iteraciones necesarias y mejora significativamente la calidad del resultado.

Google AI Studio: Generación de la aplicación completa (frontend + backend) mediante prompts en lenguaje natural. Google AI Studio (aistudio.google.com) es la plataforma central de esta guía. Es el entorno donde se construye la aplicación CRM usando el modelo Gemini de Google.

GitHub: Control de versiones y repositorio del código generado. Es la plataforma de control de versiones más utilizada en el mundo del desarrollo de software. En el contexto del Vibe Coding con Google AI Studio, GitHub cumple tres roles fundamentales que no pueden ser ignorados por ningún proyecto que busque ir a producción

Render: Despliegue y hosting gratuito de la aplicación en producción. Es una plataforma de hosting en la nube que permite publicar aplicaciones web de manera sencilla y gratuita para proyectos pequeños. Es la solución de despliegue más accesible para aplicaciones generadas con Vibe Coding cuando no se quiere usar Google Cloud Run.

Técnicas fundamentales del Vibe Coding con Google AI Studio

Técnica 1: Preparación del prompt en ChatGPT antes de ir a Google AI Studio

Nunca ir a Google AI Studio con una idea vaga. Usar ChatGPT primero para estructurar el prompt, completar los detalles que se pasan por alto y verificar que el diseño es coherente. Un prompt bien preparado puede reducir de 20 a 5 el número de iteraciones necesarias en Google AI Studio.

Técnica 2: Modo de anotación para cambios visuales

Cuando algo en el diseño visual de la app no es correcto y es difícil describirlo con palabras, usar el Annotation Mode de Google AI Studio. Este modo permite dibujar directamente sobre la vista previa de la aplicación marcar elementos con flechas, círculos o recuadros y adjuntar comentarios visuales que Gemini interpreta para hacer los cambios solicitados.

Técnica 3: Construcción incremental

No intentar construir toda la aplicación CRM en un solo prompt. Construir módulo por módulo: primero el registro de clientes, luego el pipeline de ventas, luego los reportes, luego la autenticación. Cada módulo se prueba antes de agregar el siguiente. Esto minimiza los errores y hace que el debugging sea infinitamente más manejable.

Técnica 4: Exportación a GitHub como hábito de seguridad

Cada vez que la aplicación llegue a un estado funcional satisfactorio, exportar el código a GitHub inmediatamente. Esto crea un punto de restauración seguro. Si una iteración posterior rompe algo importante, se puede volver al estado guardado en GitHub sin perder el trabajo previo.

Técnica 5: Despliegue temprano en Render para pruebas reales

No esperar a que la aplicación esté perfecta para desplegarla en Render. Publicarla en etapas tempranas permite que usuarios reales (el equipo comercial, por ejemplo) la prueben en condiciones reales y den retroalimentación basada en experiencia genuina, no en demos estáticas

Cómo Crear una App CRM desde Cero con Google AI Studio

1. Acceder a Google AI Studio
   Busca Google AI Studio en tu navegador e ingresa al sitio oficial. Luego haz clic en “Get started” e inicia sesión con tu cuenta de Google o crea una nueva si es necesario.

2. Aceptar términos y condiciones
Una vez dentro de la plataforma, acepta los términos y condiciones para poder continuar. 

3. Ingresar al entorno de desarrollo
En el panel izquierdo de la pantalla, selecciona la opción “Build” (Construir) para comenzar a crear tu aplicación. 

4. Preparar el prompt de la aplicación
Antes de escribir el prompt en Google AI Studio, es recomendable construirlo previamente en herramientas como ChatGPT, definiendo claramente la idea de la aplicación.

En este caso, se diseñó un CRM para un sistema POS, especificando sus funcionalidades.

Prompt inicial

Actúa como un arquitecto de software senior, diseñador UX/UI experto y desarrollador full-stack especializado en aplicaciones SaaS tipo CRM.

Tu tarea es diseñar y construir una aplicación CRM moderna, inteligente, escalable y visualmente atractiva, enfocada en la gestión de clientes y automatización de procesos comerciales.

OBJETIVO DE LA APP

Crear una aplicación que permita:

1. Registrar clientes potenciales

2. Clasificarlos según su tipo de negocio

3. Generar automáticamente recomendaciones de productos y servicios

4. Gestionar seguimiento comercial

5. Facilitar el cierre de ventas

La aplicación debe comportarse como un asistente comercial inteligente que ayude a vender.

ARQUITECTURA DE LA APLICACIÓN

Divide la app en módulos claros:

1. GESTIÓN DE CLIENTES

Modelo de datos interno:

Cliente {

  id: string

  nombre: string

  telefono: string

  email: string

  empresa: string

  tipo_negocio: enum

  ciudad: string

  estado: enum

  fecha_registro: date

  proximo_contacto: date

  observaciones: string

}

Valores tipo_negocio:

- Restaurante

- Bar

- Minimarket

- Ferretería

- Cigarrería

- Tienda de ropa

- Parqueadero

- Otro

Valores estado:

- Nuevo

- Contactado

- En negociación

- Cerrado ganado

- Cerrado perdido

2. MOTOR DE RECOMENDACIONES AUTOMÁTICO

Implementa lógica inteligente basada en tipo de negocio:

SI tipo_negocio == "Restaurante":

  recomendar = "Sistema POS completo + impresora térmica + control de inventario"

  plan = "Planes desde $69.000"

  equipos = "Equipos desde $1.820.000"

SI tipo_negocio == "Minimarket":

  recomendar = "POS básico + lector de código de barras"

  plan = "Planes desde $69.000"

  equipos = "Equipos desde $1.820.000"

SI tipo_negocio == "Bar":

  recomendar = "Sistema POS + control de mesas + inventario"

  plan = "Planes desde $69.000"

  equipos = "Equipos desde $1.820.000"

SI tipo_negocio == "Ferretería":

  recomendar = "POS + inventario avanzado"

  plan = "Planes desde $69.000"

  equipos = "Equipos desde $1.820.000"

SI tipo_negocio == "Cigarrería":

  recomendar = "POS básico + control de ventas rápidas"

SI tipo_negocio == "Tienda de ropa":

  recomendar = "POS + gestión de inventario por referencias"

SI tipo_negocio == "Parqueadero":

  recomendar = "Sistema POS + control de entradas/salidas"

La app debe mostrar estas recomendaciones automáticamente al seleccionar el tipo de negocio.

3. PIPELINE CRM (TABLERO TIPO KANBAN)

Crear vista visual con columnas:

- Nuevo

- Contactado

- En negociación

- Cerrado

Funcionalidades:

- Arrastrar y soltar clientes entre estados

- Tarjetas visuales con:

  - Nombre

  - Negocio

  - Estado

  - Próximo contacto

- Actualización dinámica

4. SISTEMA DE RECORDATORIOS

- Detectar clientes con próximo_contacto cercano

- Generar alertas visuales

- Crear sección "Tareas del día"

- Priorizar clientes urgentes

5. DASHBOARD PRINCIPAL

Mostrar:

- Total de clientes

- Clientes por estado

- Tipos de negocio más frecuentes

- Valor potencial de ventas estimadas

6. FUNCIONALIDADES CLAVE

- Búsqueda por nombre

- Filtros por tipo de negocio

- Filtros por estado

- Formularios rápidos

- Edición de clientes

7. DISEÑO UX/UI (MUY IMPORTANTE)

Diseñar como app moderna tipo SaaS:

Estilo:

- Minimalista

- Profesional

- Limpio

Colores:

- Azul oscuro #1E3A8A (principal)

- Blanco (fondo)

- Verde #22C55E (acciones positivas)

- Gris claro (tarjetas)

Componentes:

- Tarjetas con sombra suave

- Bordes redondeados (12px)

- Botones grandes

- Iconos modernos

Layout:

- Sidebar izquierda (navegación)

- Dashboard central

- Vista tipo tarjetas

8. EXPERIENCIA DE USUARIO

- Flujo simple (máximo 3 pasos)

- Rápida

- Intuitiva

- Responsive (móvil y desktop)

9. COMPORTAMIENTO INTELIGENTE

La app debe:

- Sugerir qué vender automáticamente

- Priorizar clientes con seguimiento pendiente

- Mostrar insights útiles

- Facilitar el cierre de ventas

10. TECNOLOGÍA

Generar como:

- Aplicación web interactiva

- Código limpio y estructurado

- Separación de lógica y UI

- Escalable

RESULTADO ESPERADO

Entregar:

1. Estructura completa de la app

2. Componentes UI definidos

3. Lógica funcional implementada

4. Flujo de usuario claro

5. Simulación de funcionamiento

IMPORTANTE

Haz que la aplicación sea:

- Visualmente atractiva

- Profesional

- Comercial

- Fácil de usar

- Tipo producto SaaS listo para vender

👉 “Ahora conviértelo en una interfaz funcional paso a paso”
👉 “Ahora genera el frontend interactivo”
👉 “Ahora mejora el diseño UI tipo app real”

5. Generación automática de la aplicación
Ingresa el prompt en la plataforma. Automáticamente, Google AI Studio comenzará a generar la aplicación según las instrucciones proporcionadas. Este proceso puede tardar unos minutos, dependiendo del nivel de detalle del prompt. 

6. Ajustes y mejoras
Una vez generada la primera versión de la aplicación, se deben realizar ajustes y mejoras utilizando nuevos prompts para optimizar funcionalidades, diseño y estructura. 

7. Integración con GitHub
Cuando la aplicación esté lista, se debe conectar el proyecto con un repositorio en GitHub para poder gestionarlo y compartirlo. 

8. Despliegue en Niixer
Finalmente, se integra el repositorio en Niixer, lo que permite visualizar y utilizar la aplicación sin inconvenientes.

Crear herramientas que optimicen procesos

Las herramientas internas son el caso de uso más valioso y accesible del Vibe Coding. Son aplicaciones diseñadas exclusivamente para el equipo de trabajo, no para clientes externos, lo que reduce drásticamente los requisitos de seguridad y escala.

¿Qué optimiza concretamente una aplicación CRM?

Sin CRM	Optimización que genera el CRM	Impacto
Los datos de clientes están dispersos en Excel, email y WhatsApp	Centraliza toda la información en un solo lugar accesible desde cualquier dispositivo	Reducción del 70% del tiempo buscando información de clientes
No se sabe en qué etapa está cada cliente del proceso de venta	Pipeline visual que muestra el estado exacto de cada oportunidad en tiempo real	Aumento del 30–40% en la tasa de cierre de ventas
El seguimiento depende de la memoria de cada asesor	Recordatorios automáticos y registro de próximas acciones para cada cliente	Reducción del 80% de clientes que ‘caen’ por falta de seguimiento
La gerencia no puede ver el desempeño del equipo sin pedir reportes	Dashboard con métricas de ventas actualizadas en tiempo real	Decisiones más rápidas y basadas en datos reales
Si un asesor se va, se pierde toda su información de clientes	Toda la información queda en el sistema, accesible para todo el equipo	Cero pérdida de información ante rotación de personal
No hay histórico de interacciones con cada cliente	Registro cronológico de todas las llamadas, reuniones y correos por cliente	Mejor personalización del servicio y fidelización
Es difícil identificar qué clientes tienen mayor potencial	Filtros y etiquetas para segmentar y priorizar el portafolio de clientes	Mejor asignación del tiempo del equipo comercial

La herramienta interna más valiosa es aquella que reemplaza la tarea que tu equipo actualmente hace en Excel, Google Sheets, WhatsApp o correo electrónico. Identifica esa tarea primero — ahí está el mayor retorno de inversión del Vibe Coding. Para un equipo comercial, casi siempre es el seguimiento de clientes y oportunidades de venta.

Prompt Engineering y Refinamiento de Prompts para Google AI Studio

Ajuste de los diferentes prompts
Segundo prompt
Quiero que mejores la aplicación actual, no la reconstruyas desde cero.
Necesito que:
1. Hagas completamente funcional la navegación entre:
- Dashboard
- Clientes
- Pipeline
2. Implementes la vista de CLIENTES:
- Lista de clientes en tarjetas
- Botón para agregar cliente
- Formulario funcional con los campos:
  nombre, teléfono, email, empresa, tipo de negocio, estado, próximo contacto,observaciones
3. Implementes el PIPELINE tipo CRM:
- Columnas: Nuevo, Contactado, En negociación, Cerrado
- Tarjetas de clientes dentro de cada columna
- Poder mover clientes entre estados
4. Conecta la lógica:
- Cuando creo un cliente → aparece en Dashboard y Pipeline
- Cuando cambio estado → se actualiza automáticamente
5. Mejora el diseño:
- Más limpio
- Más profesional
- Mejor espaciado
- Tarjetas más atractivas
No expliques, solo aplica los cambios directamente sobre el código existente.
Tercer prompt
Corrige el problema de diseño en la aplicación actual donde el contenido está recortado y no permite hacer scroll vertical.
NO reconstruyas la aplicación desde cero. Trabaja sobre el código existente.
Problema:
La interfaz tiene altura fija (height: 100vh o h-screen) y/o overflow: hidden, lo que impide desplazarse hacia abajo.
Solución que debes aplicar:
Permitir scroll vertical en toda la aplicación:
Reemplazar cualquier uso de "height: 100vh" por "min-height: 100vh"
Eliminar "overflow: hidden"
Usar "overflow-y: auto" donde sea necesario
Si se usa Tailwind:
Reemplazar "h-screen" por "min-h-screen"
Eliminar "overflow-hidden"
Agregar "overflow-y-auto"
Asegurar que el contenedor principal (App o layout):
Permita crecer según el contenido
No bloquee el scroll
Mantener intacto:
El diseño visual
Los componentes
La lógica del CRM
Entregar el código actualizado listo para usar
No expliques, solo aplica los cambios necesarios en el código existente.
Mejora el layout para que el contenido sea completamente responsive y fluido, asegurando que todas las vistas permitan scroll cuando el contenido exceda la pantalla.
Cuarto prompt
Actúa como un diseñador UX/UI senior, product manager y desarrollador frontend experto en aplicaciones SaaS tipo CRM.
IMPORTANTE: NO reconstruyas la aplicación desde cero. Trabaja sobre el código actual y mejóralo.
OBJETIVO
Mejorar la aplicación CRM existente haciéndola:
Más visual y atractiva
Más funcional
Más profesional (nivel startup SaaS)
Más útil para ventas
MEJORAS VISUALES (DISEÑO UI)
La app actualmente se ve muy blanca y plana. Mejora el diseño:
Agregar un sistema de colores moderno:
Color principal: azul profesional
Color secundario: violeta o azul degradado
Color de éxito: verde
Color de alerta: naranja
Fondo: gris muy claro (#f8fafc)
Aplicar:
Gradientes sutiles
Tarjetas con sombra suave
Bordes redondeados (12px o más)
Mejor espaciado entre elementos
Sidebar:
Fondo oscuro o degradado
Íconos más visibles
Estado activo resaltado
MEJORAR ESTADOS DEL CRM
Actualizar estados actuales a algo más profesional:
Estados nuevos:
Lead
Contactado
Calificado
En negociación
Propuesta enviada
Cerrado ganado
Cerrado perdido
Cada estado debe tener:
Color diferente
Etiqueta visual (badge)
USUARIO
Reemplazar el nombre actual "Tina Guti" por:
"Usuario 1"
CONFIGURACIÓN FUNCIONAL
Hacer que el botón de configuración funcione:
Crear una vista de configuración con:
Edición de perfil (nombre, correo)
Preferencias
Gestión de tipos de negocio (IMPORTANTE)
TIPOS DE NEGOCIO DINÁMICOS
Agregar funcionalidad para:
Crear nuevos tipos de negocio
Editarlos
Guardarlos en estado de la app
Esto debe reflejarse automáticamente en el formulario de clientes
BOTÓN DE NOTIFICACIONES
Actualmente el asistente IA menciona notificaciones pero no navega.
Solución:
Crear una vista llamada "Notificaciones"
Mostrar:
Recordatorios de seguimiento
Próximos contactos
Hacer que el botón lleve a esa vista
PIPELINE (MUY IMPORTANTE)
Actualmente se mueve horizontalmente.
Cambiar a:
Vista vertical (scroll vertical)
Columnas adaptadas en bloque
Diseño tipo lista organizada
Debe ser consistente con el resto de la app.
MÉTRICAS Y DASHBOARD AVANZADO
Agregar indicadores visibles:
Total de leads
Leads contactados
Leads en negociación
Leads cerrados
Calcular:
Tasa de conversión (%)
fórmula:
(cerrados ganados / total leads) * 100
Mostrar esto en:
Tarjetas visuales
Gráficos simples si es posible
ÍNDICE DE RECOMENDACIONES (INTELIGENTE)
Crear una sección tipo "Insights" o "Recomendaciones":
Ejemplos:
"Tienes muchos leads sin contactar"
"Alta conversión en restaurantes"
"Clientes en negociación sin seguimiento reciente"
Esto debe basarse en los datos existentes.
EXPERIENCIA DE USUARIO
Mejorar
Navegación fluida
Transiciones suaves
Feedback visual en acciones
Botones más claros
RESPONSIVE
Asegurar que:
Se vea bien en laptop
Se adapte a pantallas pequeñas
IMPORTANTE
No romper funcionalidad actual
Mantener lógica existente
Mejorar sin eliminar lo que ya funciona
RESULTADO ESPERADO
Entrega el código actualizado con:
Mejor UI
Nuevas funcionalidades
Mejor experiencia de usuario
CRM más completo y profesional
No expliques, solo aplica los cambios directamente sobre el proyecto actual.
Aplica todos los cambios anteriores directamente en el código actual y muéstrame los componentes actualizados.
Quinto prompt
Actúa como un product manager senior, diseñador UX/UI experto y desarrollador full-stack especializado en aplicaciones SaaS tipo CRM.
IMPORTANTE:
NO reconstruyas la aplicación desde cero.
Trabaja sobre el código actual y mejora todo el sistema para convertirlo en un producto SaaS completo y profesional
OBJETIVO
Transformar la aplicación CRM en un producto comercial completo con:
Sistema de autenticación
Planes de pago (USD y COP)
Funciones premium simuladas
Datos realistas
Módulos avanzados tipo CRM profesional
SISTEMA DE AUTENTICACIÓN
Agregar:
Registro
Login
Recuperación de contraseña (simulada)
Campos:
Nombre
Email
Contraseña
Comportamiento:
El usuario debe registrarse antes de acceder
Mantener sesión activa (estado local)
PLANES DE SUSCRIPCIÓN (USD + COP)
Crear vista moderna de precios con tarjetas:
PLAN BÁSICO – GRATIS
Hasta 50 clientes
Pipeline básico
Dashboard simple
PLAN PROFESIONAL – $19 USD / mes (~$69.000 COP)
Clientes ilimitados
Pipeline avanzado
Dashboard con métricas
Recordatorios
Soporte básico
PLAN PREMIUM – $39 USD / mes (~$129.000 COP)
Todo lo anterior +
Integración con WhatsApp (simulada)
Integración con Meta Ads (simulada)
Automatizaciones
Insights inteligentes
Soporte prioritario
Mostrar ambos precios (USD y COP) en cada plan.
Agregar botón:
"Actualizar plan"
"Activar plan" (simulado)
Bloquear funciones premium en plan básico con etiquetas:
"Disponible en plan PRO"
DATOS DE PRUEBA (MUY IMPORTANTE)
Generar automáticamente múltiples clientes ficticios:
Diferentes tipos de negocio
Diferentes estados
Fechas variadas
Nombres realistas
Ejemplo:
Restaurante, Bar, Minimarket, etc.
Esto debe hacer que:
El dashboard tenga datos reales
El pipeline esté lleno
Las métricas funcionen
DASHBOARD AVANZADO
Agregar:
Total de leads
Leads contactados
Leads en negociación
Leads cerrados
Calcular:
Tasa de conversión (%)
Fórmula:
(cerrados ganados / total leads) * 100
Mostrar en tarjetas visuales.
MÓDULO DE ANALYTICS
Agregar sección con:
Gráficas simples
Rendimiento por tipo de negocio
Actividad reciente
ROLES DE USUARIO
Agregar:
Admin
Vendedor
Diferencias:
Admin ve todo
Vendedor solo sus clientes
RANKING DE VENDEDORES
Crear vista:
Lista de usuarios
Ventas realizadas
Clientes cerrados
Ordenar de mayor a menor.
PREDICCIÓN DE VENTAS
Agregar indicador tipo:
"Probabilidad de cierre"
Basado en:
Estado del cliente
Tiempo en pipeline
Mostrar como porcentaje.
CHAT INTERNO (SIMULADO)
Agregar:
Sección de chat por cliente
Historial simple
Interfaz tipo mensajería
(No requiere backend real)
NOTIFICACIONES
Crear vista funcional:
Próximos contactos
Recordatorios
Actividad reciente
Con navegación real desde el botón.
CONFIGURACIÓN AVANZADA
Permitir:
Editar perfil
Gestionar tipos de negocio dinámicos
Preferencias
UI / UX PREMIUM
Mejorar:
Colores modernos (gradientes, menos blanco)
Tarjetas con sombra
Botones más atractivos
Transiciones suaves
EXPERIENCIA TIPO SAAS
La app debe sentirse como:
Profesional
Moderna
Lista para venderse
RESULTADO ESPERADO
Entregar:
Código actualizado completo
UI mejorada
Sistema de planes
Datos realistas
Funciones avanzadas activas
No expliques nada, solo aplica todos los cambios sobre el proyecto actual.
Ahora mejora aún más el diseño para que parezca una aplicación tipo Stripe, Notion o HubSpot.
Sexto prompt
Actúa como un product manager senior, diseñador UX/UI experto y desarrollador full-stack especializado en SaaS tipo CRM.

IMPORTANTE:
NO reconstruyas la aplicación desde cero.
Trabaja sobre el código actual y mejora cada módulo manteniendo la lógica existente.
OBJETIVO
Convertir la aplicación en un CRM SaaS completamente funcional, interactivo y realista, mejorando:
Funcionalidad real de botones
Experiencia de usuario
Flujo comercial
Simulación avanzada del sistema
AUTENTICACIÓN + PRUEBA GRATIS
Al registrarse, el usuario obtiene automáticamente:
→ 1 mes de prueba del PLAN PREMIUM
IMPORTANTE:
No mostrar toda la app “premium” de inmediato saturada
Mostrar progresivamente funcionalidades
Datos especiales:
SOLO cuando el usuario ingrese con:
Email: valentinagutierre@gmail.com
Contraseña: vale1234
→ Mostrar TODOS los datos ficticios del sistema
Para otros usuarios:
→ Mostrar app limpia o con pocos datos
DATOS Y VALIDACIONES
Evitar duplicados:
Si se crea un cliente con mismo número → mostrar alerta
“Este cliente ya existe”
Mejorar formulario “Nuevo cliente”:
Fondo sólido (NO transparente)
Diseño más claro y profesional
GESTIÓN DE CLIENTES
Mejorar buscador:
Permitir buscar por:
Nombre
Número celular
Email
Filtros:
Mejorar visibilidad (no transparentes)
Agregar labels claros (NO usar “All”)
Ejemplo:
“Todos los estados”
“Todos los negocios”
Al seleccionar cliente:
Mostrar vista detallada
Información completa
Opción de abrir chat
PIPELINE
Cambiar icono de avanzar etapa (hacerlo más intuitivo)
Al seleccionar cliente:
Mostrar detalle completo
Mostrar SOLO clientes del usuario activo
NOTIFICACIONES (MUY IMPORTANTE)
Agregar
Filtros funcionales:
Tipo de negocio
Estado
Cliente
Fecha
Buscador:
Nombre
Celular
Botones funcionales:
“Contactar ahora”:
→ Abrir detalle del cliente
“Posponer”:
→ Cambiar fecha de recordatorio
“Ver reporte completo”:
→ Llevar a módulo Analytics filtrado
Menú de 3 puntos:
→ Opciones:
Marcar como leída
Eliminar
Ver cliente
Icono de campana:
→ Debe abrir la vista de notificaciones
CHAT INTERNO (MEJORADO)
Agregar
Agentes comerciales ficticios
Conversaciones ficticias
Funcionalidad:
Chat individual por usuario
Chat grupal
Al seleccionar agente:
Mostrar:
Información
Botón “Abrir chat”
ESTADO ONLINE
Botón “Online”:
Permitir cambiar a:
Activo
Inactivo
Mostrar estado visual.
RANKING DE VENDEDORES
Mejorar:
Al hacer clic en vendedor:
→ Mostrar:
Clientes ganados
Historial de ventas
Detalle
ANALYTICS (MEJORADO)
Agregar filtros por fecha:
Desde – Hasta
Mes actual
Mes anterior
Actualizar métricas dinámicamente:
Leads
Conversiones
Rendimiento
CONFIGURACIÓN
Arreglar:
Botón modo oscuro (debe funcionar realmente)
Agregar:
Gestión de tipos de negocio dinámicos
CONTACTO / VENTAS
Agregar sección:
“Hablar con ventas”
Mostrar:
Número ficticio:
+57 300 123 4567
UI / DISEÑO
Arreglar:
Elementos transparentes (NO usar transparencias innecesarias)
Mejor contraste en filtros
Inputs claros
Botones más visibles
EXPERIENCIA GENERAL
Todos los botones deben hacer algo
Evitar elementos sin acción
Navegación fluida
Feedback visual en acciones
RESULTADO ESPERADO
Aplicación completamente funcional
Interacciones reales (aunque simuladas)
UX profesional
CRM listo para demo comercial
No expliques nada.
Aplica todos los cambios directamente sobre el código existente.
Agrega animaciones tipo microinteracciones como hover, loading states y transiciones suaves tipo apps modernas como Stripe o Notion.
Septimo prompt
Actúa como desarrollador frontend senior experto en React y UX/UI.
IMPORTANTE:
NO reconstruyas la aplicación desde cero.
NO elimines funcionalidades ya implementadas.
NO borres mejoras anteriores.
PROBLEMA ACTUAL
Las pestañas principales de la aplicación han dejado de mostrarse correctamente o desaparecieron, especialmente:
Pipeline
Chat interno
Notificaciones
Ranking
Analytics
Clientes
La navegación está rota o incompleta
OBJETIVO
Restaurar completamente la navegación de la aplicación manteniendo TODAS las mejoras realizadas anteriormente.
RESTAURAR SIDEBAR / MENÚ PRINCIPAL
Asegurar que el sidebar incluya y muestre correctamente:
Dashboard
Clientes
Pipeline
Chat interno
Notificaciones
Analytics
Ranking
Configuración
Planes
El menú debe:
Ser visible siempre
Tener iconos claros
Resaltar la sección activa
No desaparecer al navegar
REPARAR RUTEO (MUY IMPORTANTE)
Verificar y corregir:
Todas las rutas (React Router o sistema usado)
Cada pestaña debe tener su ruta funcional
No debe haber rutas rotas o vacías
Ejemplo esperado:
/dashboard
/clientes
/pipeline
/chat
/notificaciones
/analytics
/ranking
/configuracion
/planes
RESTAURAR COMPONENTES
Asegurar que los siguientes módulos:
Pipeline
Chat interno
Notificaciones
Ranking
Analytics
Se rendericen correctamente al hacer clic en el menú.
MANTENER TODAS LAS MEJORAS ANTERIORES
NO eliminar:
Sistema de login
Planes de suscripción
Datos ficticios condicionados por usuario
Filtros avanzados
Chat interno
Analytics con fechas
Notificaciones funcionales
Validaciones de clientes
Modo oscuro
Configuración
CORREGIR ERRORES VISUALES
Evitar que vistas queden en blanco
Evitar superposición de componentes
Asegurar scroll correcto
Mantener diseño limpio
EXPERIENCIA DE USUARIO
Navegación fluida entre pestañas
Sin recargas innecesarias
Feedback visual al cambiar de sección
RESULTADO ESPERADO
Sidebar completamente funcional
Todas las pestañas visibles
Navegación restaurada
Todos los módulos accesibles
Sin perder ninguna funcionalidad previa
No expliques nada.
Aplica los cambios directamente sobre el código actual.
Revisa el layout principal (App.tsx o layout general) y asegúrate de que el sistema de navegación no esté sobrescrito o roto. Corrige cualquier error que impida mostrar las vistas correctamente.

Video sobre la app “SmartCRM”

Soporte y Dificultades de las Apps Creadas con Google AI Studio

Una de las diferencias fundamentales entre una aplicación generada con IA y una construida de forma tradicional es la naturaleza del soporte post-lanzamiento. En el desarrollo tradicional, hay un equipo técnico que entiende cada línea del código y puede depurarlo sistemáticamente. En una app de Vibe Coding, esa responsabilidad recae principalmente en el ser humano que la construyó el Vibe Coder apoyado por la IA como herramienta de diagnóstico, pero con la comprensión funcional del negocio como guía principal.

El soporte de una app de Vibe Coding funciona en tres capas, cada una con responsabilidades y herramientas específicas:

Capa de soporte	Quién lo da	Herramientas que usa	Qué resuelve
Capa 1: Soporte funcional (primer nivel)	El Vibe Coder / propietario de la app	Google AI Studio, ChatGPT	Errores visuales, funcionalidades que no funcionan, cambios de diseño, campos que faltan
Capa 2: Soporte técnico (segundo nivel)	Desarrollador de confianza (freelance o interno)	Editor de código, GitHub, herramientas de debugging	Errores de lógica profunda, problemas de seguridad, optimización de rendimiento
Capa 3: Infraestructura (tercer nivel)	Render.com / Google Cloud (soporte de plataforma)	Panel de control de Render, logs del servidor	Caídas del servidor, problemas de despliegue, configuración de dominios

Protocolo : soporte para el Vibe Coder

PASO 1: Reproducir el problema de forma exacta

Antes de cualquier acción, reproduzca el problema usted mismo:

• Pídele al usuario que le describa paso a paso qué hizo cuando ocurrió el error

• Intente reproducir ese mismo flujo en la aplicación

• Si puede reproducirlo, tiene suficiente información para diagnosticarlo

• Si no puede reproducirlo, podría ser un problema intermitente o de datos específicos del usuario

Información útil a recopilar del usuario:

• ¿Qué dispositivo usaba? (celular/computadora, sistema operativo)

• ¿Qué navegador usaba? (Chrome, Safari, Firefox)

• ¿Qué estaba intentando hacer exactamente? • ¿Apareció algún mensaje de error en pantalla? (pedirle captura de pantalla)

PASO 2: Diagnosticar con Google AI Studio o ChatGPT

Una vez que tienes la descripción exacta del problema, usa la IA para diagnosticar:

En Google AI Studio (si el proyecto está abierto):

  Describe el problema en el chat: ‘Cuando el asesor intenta registrar una interacción

  con tipo Videollamada, la aplicación muestra pantalla en blanco y no guarda el registro.

  ¿Cuál puede ser la causa y cómo se corrige?’

En ChatGPT (si necesitas perspectiva externa):

  Describe el contexto de la app y el síntoma del error.

  ChatGPT puede sugerir posibles causas y prompts de corrección para Google AI Studio.

Tipos de respuesta que puede dar la IA:

  • Identificación de la causa probable y prompt de corrección directa

  • Solicitud de más información para diagnosticar mejor   • Confirmación de que es un error conocido con una solución estándar

PASO 3: Aplicar la corrección en Google AI Studio

Con el diagnóstico en mano, aplica la corrección:

1. Abre el proyecto del CRM en Google AI Studio (Build Mode)

2. Usa el prompt de corrección identificado en el paso anterior

3. Prueba la corrección inmediatamente en la vista previa

4. Si la corrección funciona: empuja los cambios a GitHub (para preservar la solución)

5. Si la corrección no funciona o genera nuevos problemas:

   – Usa el historial de versiones de Google AI Studio para revertir

   – Reformula el problema con más detalle y vuelve al paso 2 Tiempo estimado de resolución para problemas comunes: 15–45 minutos

Dificultades más frecuentes en Google AI Studio y sus soluciones

Dificultad 1: La app se cae o muestra pantalla en blanco después de una actualización

CAUSA MÁS PROBABLE: Un cambio reciente introdujo un error de sintaxis en el código que impide que la aplicación inicie.

PASO 1: En Google AI Studio, haz clic en el ícono de historial de versiones (reloj). Verás la lista de todos los cambios.

PASO 2: Identifica el último cambio que se hizo antes de que apareciera el problema.

PASO 3: Haz clic en ‘Revert’ para volver al estado anterior a ese cambio.

PASO 4: Verifica que la aplicación funciona de nuevo.

PASO 5: Vuelve a intentar el cambio que causó el problema con un prompt más específico o diferente.

PROMPT DE DIAGNÓSTICO para Google AI Studio: ‘La aplicación muestra pantalla en blanco después del último cambio. Revisa el código generado, identifica el error de sintaxis o lógica que impide que inicie, y corrígelo sin modificar ninguna otra funcionalidad.’

Dificultad 2: Los datos desaparecen cuando el usuario recarga la página

CAUSA: La app está usando almacenamiento local del navegador (localStorage) en lugar de una base de datos real. Esto es común en versiones iniciales generadas por Google AI Studio.

SOLUCIÓN: Conectar Firebase/Firestore para persistencia real de datos.

PROMPT para Google AI Studio:

‘Actualmente los datos del CRM se guardan en localStorage y se pierden al recargar.

Migra la aplicación para usar Firebase Firestore como base de datos:

– Configura Firebase en el proyecto

– Crea las colecciones necesarias: clientes, interacciones, usuarios

– Reemplaza todas las operaciones de localStorage por lecturas/escrituras en Firestore – Los datos deben persistir entre sesiones y ser compartidos entre todos los usuarios’

Dificultad 3: La app funciona en Google AI Studio pero no en Render

CAUSA MÁS COMÚN: Variables de entorno (claves de API) que están configuradas en Google AI Studio pero no en Render.

• PASO 1: En el Dashboard de Render, abre tu servicio del CRM.

• PASO 2: Ve a la sección ‘Environment’ en el menú del servicio.

• PASO 3: Verifica que todas las variables de entorno que usa la app están configuradas aquí.

Dificultad 4: Render muestra el error ‘Service unavailable’ o tarda en cargar

CAUSA: El servicio gratuito de Render hiberna después de 15 minutos de inactividad. Al recibir una visita, tarda 30–60 segundos en ‘despertar’.

SOLUCIÓN INMEDIATA: Esperar 60 segundos y recargar la página. El servicio se activará.

SOLUCIÓN A LARGO PLAZO (si el tiempo de carga es inaceptable para el equipo):

• Opción 1: Actualizar a un plan de pago en Render ($7 USD/mes) que mantiene el servicio siempre activo

• Opción 2: Configurar un ‘ping’ automático cada 10 minutos para evitar la hibernación (servicios externos como UptimeRobot ofrecen esto gratis) • Opción 3: Migrar el despliegue a Google Cloud Run que no hiberna

Conclusiones

1. El Vibe Coding no es el futuro, es el presente. El CRM construido en esta guía no es un ejercicio teórico: es una aplicación funcional, desplegada en producción, que resuelve un problema real de gestión comercial con un costo cercano a cero. La pregunta ya no es ‘¿llegará el Vibe Coding?’ sino ‘¿cuándo comenzará tu organización a usarlo?’
2. Google AI Studio democratiza el desarrollo con calidad de producción: Una de las ventajas específicas de Google AI Studio frente a otras herramientas de Vibe Coding es que el código que genera usa estándares de la industria: React, TypeScript, Node.js, Firebase. Esto no es trivial. Significa que el código generado puede ser revisado, auditado, mejorado y llevado a producción por un desarrollador profesional sin necesidad de reescribirlo desde cero.
3. La sinergia entre estas cuatro herramientas crea un flujo de trabajo que va de la idea al producto en producción en pocas horas. Ninguna de ellas sola logra el resultado; las cuatro juntas crean algo que hace pocos años requería un equipo completo de ingeniería.
4. Un CRM a medida supera a los CRMs genéricos en contextos específicos. Uno de los hallazgos más significativos de construir el CRM con Vibe Coding es comprender hasta qué punto los CRMs comerciales (Salesforce, HubSpot, Zoho) están diseñados para el promedio de todas las empresas, no para el contexto específico de cada organización.
5. El CRM construido en esta guía tiene exactamente las 7 etapas del pipeline que usa la consultoría de RRHH, los sectores empresariales específicos de su mercado objetivo, los nombres reales de sus 8 asesores y los reportes que necesita exactamente ese gerente. Ningún CRM comercial en el mercado ofrece esta personalización sin cientos de horas de configuración y consultoría especializada. El Vibe Coding hace posible la personalización total a costo marginal.

Créditos

Autor:  Laura Valentina Rodriguez Lopez – Stephany Valentina Saray Gutierrez

Editor: Magister Ingeniero Carlos Iván Pinzón Romero

Código: UCIAG-9

Universidad: Universidad Central

Fuentes

[Karpathy, A. (2025, febrero). Publicación original sobre Vibe Coding. X (antes Twitter). Acuñación del término por su creador, ex-director de IA en Tesla y cofundador de OpenAI.

Lovable. (2025). Documentación oficial de Lovable. https://docs.lovable.dev — Guía de inicio rápido, integración con Supabase, buenas prácticas de prompting y changelog de funcionalidades.

Lovable. (2025). Blog oficial de Lovable. https://lovable.dev/blog — Artículos sobre desarrollo de apps con IA, casos de uso y estrategias de prompting.

Supabase. (2025). Supabase Documentation. https://supabase.com/docs — Documentación de la plataforma de backend de código abierto usada como base de datos en los casos prácticos.

DataCamp. (2025, febrero). Lovable AI: A Guide With Demo Project. https://www.datacamp.com/tutorial/lovable-ai — Tutorial práctico de construcción de apps con Lovable, incluyendo análisis de limitaciones.

GitHub. (2025). GitHub Copilot Documentation. https://docs.github.com/copilot — Referencia sobre IA asistida en desarrollo, contexto comparativo con Lovable.

StackOverflow. (2024). Developer Survey 2024: AI Tools in Software Development. https://survey.stackoverflow.co/2024 — Estado del arte de las herramientas de IA en el ecosistema de desarrollo.

Anthropic. (2025). Claude Documentation. https://docs.anthropic.com — Referencia sobre modelos de lenguaje grande y sus aplicaciones en generación de código.

OpenAI. (2025). GPT-4o Technical Report. https://openai.com/research/gpt-4o — Fundamentos técnicos de los modelos de lenguaje en los que se basan herramientas de Vibe Coding.

Brown, T. et al. (2020). Language Models are Few-Shot Learners. NeurIPS 2020. — Artículo científico fundacional sobre las capacidades de los modelos de lenguaje grande.

Superblocks. (2025). Lovable.dev Pricing in 2026: Is It Worth It? https://www.superblocks.com/blog/lovable-dev-pricing — Análisis detallado del sistema de créditos y planes de Lovable.