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

El Vibe Coding es una nueva forma de desarrollo de software donde el programador (o “creador”) interactúa con la inteligencia artificial utilizando lenguaje natural, intuición y visión estética, en lugar de escribir líneas de código manualmente.

Se basa en transmitir la “vibración” o el concepto general de lo que se desea, permitiendo que agentes de IA se encarguen de la arquitectura y la implementación técnica.

• Por qué es importante: Democratiza la creación tecnológica. Ya no necesitas estudiar 5 años de ingeniería para materializar una idea de negocio o una herramienta útil. La velocidad de desarrollo pasa de meses a minutos.

Ventajas y Desventajas del Vibe Coding

Ventajas	Desventajas
Velocidad extrema: Prototipado en tiempo real.	Caja negra: Es difícil entender por qué la IA tomó ciertas decisiones técnicas.
Baja barrera de entrada: No requiere dominar lenguajes como Python o React.	Dependencia: Si la herramienta falla o cambia sus reglas, el creador queda limitado.
Enfoque en el producto: Te centras en la experiencia del usuario, no en los errores de sintaxis.	Deuda técnica: El código generado puede no ser el más eficiente para escalar a millones de usuarios.

Competencias para Vibe Coding

En este nuevo ecosistema, los roles cambian. Ya no buscamos “picacodigos”, sino “arquitectos de prompts”.

• Curaduría Estética y UX: Saber qué se ve bien y qué es funcional para el usuario.
• Ingeniería de Prompts (Prompt Engineering): Capacidad de dar instrucciones precisas y contextuales a la IA.
• Pensamiento Lógico: Aunque no escribas el código, debes entender la secuencia de pasos que requiere un programa (si pasa A, entonces debe ocurrir B).
• Resolución de Problemas (Debugging Narrativo): Saber explicarle a la IA qué falló en el resultado anterior para que lo corrija.

Herramientas y Técnicas de Vibe Coding

Para practicar el Vibe Coding, se utilizan plataformas que integran LLMs (modelos de lenguaje) con editores de código en vivo:

• Lovable / Bolt.new / v0.dev: Plataformas donde describes la app y ves el diseño cambiar al instante.
• Cursor: Un editor de código diseñado específicamente para trabajar “mano a mano” con IA.
• Técnicas clave:
  • Iteración Incremental: No pedir toda la app de golpe. Primero el botón, luego la base de datos, luego los colores.
  • Feedback en Bucle: Ver lo que la IA construye y corregir sobre la marcha (“Pon eso más a la derecha”, “Haz que el botón brille”).

Cómo crear una app desde cero sin saber código

Si tienes una idea hoy, puedes generarla solo con una gran idea:

1. Define el “Vibe”: Escribe en una libreta qué quieres resolver. Ejemplo: “Una app para que mis vecinos reporten baches en la calle”.
2. Elige tu herramienta: Entra en una plataforma como Lovable.
3. Prompt Inicial: Describe la interfaz. “Crea una app con un mapa central, un botón naranja grande para tomar fotos y un formulario de contacto”.
4. Refina con la voz: Usa el chat para decir: “Ahora haz que cuando alguien reporte algo, me llegue un correo”.
5. Publicar: Con un solo clic en el botón “Deploy” o “Publicar”, tu app estará en la nube lista para usarse.

Propmt utilizado para Vibe Coding

Rol: Eres un agente de IA generativa especializado en diseño de viajes y experiencias locales auténticas. Actúas como un guía local experto, honesto y con personalidad para cualquier ciudad del mundo.

Tu objetivo principal es recibir cuatro variables del usuario ([Ciudad], [Presupuesto], [Intereses], [Nivel de Energía]) y generar un itinerario narrativo y detallado para UN solo día PERFECTO.

---

REGLAS DE COMPORTAMIENTO Y LOGÍSTICA

1. Validación de Entrada: Antes de generar nada, verifica que el campo [Ciudad] contenga un lugar geográfico real y existente.
   • Si la ciudad NO existe o es una cadena aleatoria de texto (ej: “asdfgh”), detén la generación y responde EXCLUSIVAMENTE con este mensaje de error: “¡Ups! Parece que esa ciudad no está en nuestro mapa. ¡Por favor, verifica el nombre e inténtalo de nuevo!”.
   • Si la ciudad EXISTE, procede con los siguientes pasos.
2. Tono: Mantén un tono cercano, divertido, experto y muy honesto. Habla como un local que le cuenta sus secretos a un amigo. Usa emojis relevantes. Si un lugar es una trampa para turistas o está muy lleno, adviértelo.
3. Respeto Estricto de Variables:
   • Presupuesto: El itinerario debe ajustarse al rango de precio dado. Incluye estimaciones de costos en moneda local. Si es bajo, sugiere planes gratuitos y comida callejera. Si es alto, sugiere experiencias premium.
   • Nivel de Energía: Si es “Relax”, prioriza transporte corto, cafés, museos sentados y evita subidas largas o caminatas extenuantes. Si es “A tope”, incluye muchas caminatas, miradores y actividades físicas.
4. Fuentes de Datos (RAG simulado): Para cada itinerario, consulta (simuladamente) bases de datos actualizadas de restaurantes, eventos locales y puntos de interés. NO generes recomendaciones de Wikipedia genéricas. Busca el dato curioso o el lugar que solo conocen los locales.
5. Factor Sorpresa: Incluye siempre una sección especial llamada “Secreto Local” o “Dato Curioso” para la mañana, el almuerzo o la tarde, con información que no aparece en las guías turísticas normales (ej: “Pide la ‘Chua’ en los locales de canastos en el Pasaje Rivas”).

---

ESTRUCTURA DE SALIDA (Formato Obligatorio)

Responde usando EXCLUSIVAMENTE el siguiente formato estructurado:

Itinerario: [Ciudad del Usuario]

[Una frase introductoria breve y atractiva que capture el ‘vibe’ del día diseñado para el usuario, mencionando cómo se ajusta a su energía y presupuesto].

---

## 🌅 Mañana ( [Horario estimado] )

[Nombre del Lugar 1: Atractivo Principal]

[Descripción vibrante del lugar y qué hacer. Menciona por qué encaja con sus [Intereses]].

• 💰 Costo Estimado: [Monto en moneda local]
• ⏱️ Tiempo Sugerido: [Horas]

[Nombre del Lugar 2: Conexión o Lugar de Desayuno]

[Descripción corta y funcional para conectar con el siguiente punto o para un primer bocado].

## 🍽️ Almuerzo ( [Horario estimado] )

[Nombre del Restaurante / Puesto Sugerido]

[Describe la comida, el ambiente y por qué es una elección auténtica y ajustada al [Presupuesto]].

• 💰 Costo Estimado: [Monto en moneda local]

---

## 🌇 Tarde ( [Horario estimado] )

[Nombre del Lugar 3: Actividad Principal de la Tarde]

[Actividad detallada que respete el [Nivel de Energía]].

• 💰 Costo Estimado: [Monto en moneda local]
• ⏱️ Tiempo Sugerido: [Horas]

---

## 🌃 Noche ( [Horario estimado] )

[Nombre del Lugar 4: Cierre del Día]

[Sugerencia para cenar, tomar algo o un paseo relajante].

• 💰 Costo Estimado: [Monto en moneda local]

---

Nota Final del Guía: [Una frase de despedida personal y motivadora].

---

Proceso de creacion de “Tu dia Perfecto”

Soporte y dificultades de las apps creadas con Vibe Coding

Aunque el Vibe Coding permite lanzar aplicaciones en tiempo récord, la fase de mantenimiento y escalabilidad presenta retos únicos que todo “Vibe Coder” debe conocer:

• El desafío de la depuración (Debugging): Al no haber escrito el código línea por línea, cuando surge un error técnico complejo, el creador puede sentirse perdido. No se trata de corregir un punto y coma, sino de saber explicarle a la IA el fallo lógico para que ella lo repare.
• Actualizaciones y dependencias: Las apps modernas dependen de librerías que se actualizan constantemente. Una app creada con Vibe Coding puede dejar de funcionar si el modelo de IA no está al tanto de los cambios en las versiones de los lenguajes (como React o Next.js).
• Límites de personalización profunda: Llegará un punto donde la “vibración” o el lenguaje natural no sea suficiente para explicar una funcionalidad extremadamente específica o un algoritmo matemático complejo. En esos casos, todavía se requiere intervención manual.
• Costo de tokens: Mantener una app mediante conversaciones constantes con la IA consume recursos. A medida que la app crece, el contexto que la IA debe recordar es mayor, lo que puede aumentar los costos de desarrollo.

Explicacion de aplicativo “Tu Dia Perfecto”

Tu Dia Perfecto

Conclusiones

El Vibe Coding no es solo una moda pasajera; es la evolución natural del desarrollo de software en la era de la IA Generativa.

1. Democratización real: Ha roto la barrera técnica, permitiendo que personas con gran visión de negocio pero poco conocimiento técnico se conviertan en creadores activos.
2. Cambio de rol: El programador tradicional está evolucionando hacia un rol de “Editor Jefe” o “Arquitecto de Producto”, donde su valor no reside en escribir sintaxis, sino en guiar la lógica y asegurar la calidad del resultado.
3. El futuro es híbrido: Las mejores aplicaciones del futuro cercano serán aquellas que combinen la rapidez del Vibe Coding para el prototipado y la interfaz, con el rigor de la ingeniería tradicional para la seguridad y el rendimiento a gran escala.

En definitiva, estamos entrando en una era donde la creatividad es el único límite, y nuestra capacidad para comunicarnos con las máquinas es la herramienta más poderosa que tenemos.

Créditos

Autor: Sebastián Hernández Pineda – Diego García – Brayan Miranda

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

Código: UCIAG-9

Universidad: Universidad Central

Fuentes

American Psychological Association. (2020). Guía de consulta rápida de normas APA (7.ª ed.).American Psychological Association.https://normas-apa.org/

Molinero, A. (2025). Teoría de la síntesis visual y narrativa en modelos generativos de video. Editorial Universitaria de Tecnología.

Google. (2026). Gemini 3 Flash (versión de 13 de abril de 2026) [Modelo de lenguaje de IA]. https://gemini.google.com/

SEGUNDA PARTE

Introducción: Evolución y Refinamiento del Proyecto

En esta segunda fase de desarrollo de “Tu día Perfecto”, el enfoque principal ha sido la transición de un producto mínimo viable hacia una solución robusta, personalizada y centrada en la experiencia real del viajero. Tras la presentación inicial, se recopiló una serie de retroalimentaciones clave durante las sesiones de clase, las cuales permitieron identificar áreas de mejora críticas en cuanto a funcionalidad, personalización y accesibilidad.

Para estructurar estas nuevas ideas y organizar la complejidad creciente de la aplicación, se utilizó la herramienta GitMind para la creación de un mapa mental detallado. Este ejercicio de planificación visual fue fundamental para mapear los nuevos requerimientos —como la gestión de energía del usuario, la integración de datos de contacto reales y la automatización multilingüe— asegurando que cada mejora tecnológica responda directamente a una necesidad del usuario final.

¿⁠Para que sirve gitmind?

GitMind es una herramienta de creación de mapas mentales y diagramas de flujo basada en la nube, diseñada para facilitar la lluvia de ideas y la planificación de proyectos complejos. En el desarrollo de software, funciona como un puente entre la idea conceptual y la arquitectura técnica.

En el caso de “Tu día Perfecto”, GitMind fue fundamental para:

• Visualizar la jerarquía del sistema: Organizar cómo se conectan las funciones principales (IA, Bases de Datos, APIs) con la experiencia del usuario.
• Desglosar requerimientos: Permitir que cada falencia detectada en clase se transformara en una solución visual antes de pasar a la programación.
• Estructurar el flujo lógico: Definir el camino que sigue el usuario desde que ingresa sus intereses hasta que recibe su itinerario personalizado en su idioma.

¿⁠En qué contextos se puede utilizar?

ontextos de uso de GitMind

GitMind es una herramienta polivalente que se adapta a diversos entornos donde la organización de ideas es clave. Sus principales contextos de aplicación son:

• Ingeniería de Software y Desarrollo: Es el contexto principal de nuestro proyecto. Se utiliza para el mapeo de arquitectura de sistemas, diseño de bases de datos, diagramación de flujos de usuario (UX) y la organización de requerimientos funcionales antes de iniciar la fase de codificación.
  
• Ámbito Educativo y Académico: Es ideal para estudiantes y docentes en la creación de mapas conceptuales para resumir temas complejos, realizar lluvias de ideas (brainstorming) para investigaciones o planificar la estructura de tesis y ensayos.
• Entornos Corporativos y Negocios: Se emplea en la planificación estratégica, creación de organigramas empresariales, análisis FODA (SWOT) y para realizar presentaciones visuales que faciliten la toma de decisiones en reuniones de equipo.
• Desarrollo Personal: Muchos usuarios lo utilizan para el “Life Planning”, organización de metas anuales, planificación de viajes o simplemente para organizar pensamientos diarios de forma lógica.

⁠Como se utilizó para realizar el mapa

El proceso de creación no fue solo estético, sino un ejercicio de ingeniería inversa para organizar las mejoras de la aplicación. Se utilizó siguiendo estos pasos:

1. Definición del Nodo Central: Se estableció el concepto principal, “App Inteligente de Planificación de Viajes”, como el núcleo del cual partirían todas las ramificaciones.
2. Categorización por Dimensiones: Se crearon cuatro ramas principales que representan los pilares del proyecto:
   • Funciones principales: Para definir qué hace la app (itinerarios, recomendaciones).
   • Características tecnológicas: Para desglosar el uso de IA y Geolocalización.
   • Experiencia de usuario: Para detallar la interfaz y la facilidad de uso.
   • Ventajas competitivas: Para resaltar qué nos diferencia (ahorro de tiempo, adaptabilidad).
3. Desglose de lo General a lo Particular: A partir de cada categoría, se extendieron sub-nodos para integrar la retroalimentación recibida en clase. Por ejemplo, bajo el nodo de “Funciones”, se añadió específicamente el requisito de “Datos de contacto” y “Botón de Google Maps”, falencias detectadas en la versión anterior.
4. Jerarquización y Conectores: Se utilizaron las herramientas de relación de GitMind para entender cómo la IA (Inteligencia Artificial) alimenta tanto la “Detección de idioma” como la “Optimización de tiempos”, visualizando las dependencias técnicas del proyecto.
5. Estilo Visual para Claridad: Se aplicaron colores y formas distintas a los nodos para diferenciar los aspectos que ya estaban implementados de aquellos que surgieron como nuevas propuestas de mejora.

⁠Imagen del mapa

Prompt utilizados para la mejoras de la app

Configura la autenticación de Supabase en mi aplicación. Necesito: 1. Una página de Login/Registro atractiva que incluya ‘Iniciar sesión con Google’ y ‘Correo/Contraseña’. 2. Crea una tabla en la base de datos llamada trips para guardar los itinerarios. La tabla debe tener columnas para: user_id, ciudad, presupuesto, intereses, vibra, número de días y un campo JSON para el itinerario completo.

Conecta el formulario para que al generar un itinerario se guarde automáticamente en la tabla trips con mi user_id cuando esté logueado.

Añade una página “Mis viajes” que liste los itinerarios guardados desde la tabla trips y permita abrir cada uno en detalle.

Modifica el formulario de entrada: añade un selector numérico para ‘Cantidad de días’ (máximo 7). Actualiza la lógica de generación de la IA para que, si el usuario pide más de un día, devuelva un itinerario estructurado por ‘Día 1’, ‘Día 2’, etc. Cada día debe mantener la estructura de desayuno, almuerzo, actividades (mañana/tarde/noche) y presupuesto detallado.

Mejora la visualización del itinerario. Para cada lugar o restaurante recomendado: 1. Añade un botón con un icono de mapa que abra Google Maps en una pestaña nueva buscando el nombre del lugar + la ciudad. 2. Incluye un campo de ‘Teléfono’ o ‘Contacto’ (puede ser simulado por la IA pero con formato real). 3. Asegúrate de que el diseño se vea como tarjetas (cards) modernas y limpias.

Instala y utiliza la librería jsPDF para añadir un botón de ‘Exportar a PDF’. Al hacer clic, debe generar un documento bien formateado con el logo de la app y todo el itinerario detallado. Además, añade una función para que, al guardar el viaje, se envíe un resumen automático al correo del usuario (usa las Edge Functions de Supabase o simplemente muestra un mensaje de ‘Enviado al correo’ tras generar el PDF).

quiero que el sistema detecte automáticamente el idioma del usuario para generar el itinerario y enviar el correo electrónico. Detección de Idioma: Modifica la lógica de la petición a la IA para que analice los campos ‘Ciudad’ e ‘Intereses’. Si el usuario escribe en inglés, la respuesta debe ser en inglés; si escribe en español, en español. Prompt del Sistema: Actualiza el prompt que genera el itinerario para incluir la instrucción: ‘Detect the language of the user input and generate the entire itinerary in that same language. Do not mix languages.’

a tengo la lógica de detección de idioma funcionando. Ahora quiero implementar la función de envío de correo electrónico real utilizando una Edge Function de Supabase.

Instrucciones:

Botón de Acción: Añade un botón que diga ‘Enviar por correo’ (o ‘Send by email’ si el idioma detectado es inglés) al finalizar la generación del itinerario.

Integración con Edge Function: Crea una Edge Function en Supabase que reciba el itinerario generado (el JSON o el string con el formato) y el email del usuario.

Configuración de Resend (u otro proveedor): Configura la Edge Function para usar una plantilla transaccional (puedes usar Resend u otro servicio compatible con Supabase).

Multilingüe en el Email: Asegúrate de que la función pase el parámetro de idioma (el que ya detectamos anteriormente) para que la plantilla del correo se renderice correctamente en español o inglés.

Feedback de Usuario: Muestra un ‘toast’ o mensaje de confirmación al usuario que diga: ‘Itinerario enviado a [email]’ o ‘Itinerary sent to [email]’ una vez la función confirme el éxito del envío.

Seguridad: Asegúrate de que la llamada a la función tenga un manejo de errores básico por si el email es inválido o la función falla.”

Conclusiones

La importancia de la planificación visual en el desarrollo ágil: El uso de GitMind demostró que la programación no comienza con el código, sino con la organización de las ideas. Al mapear visualmente las falencias detectadas y los nuevos requerimientos, se redujo la incertidumbre técnica, permitiendo que la implementación en Lovable fuera mucho más fluida, coherente y alineada con las necesidades reales del usuario.

Evolución del Producto Mínimo Viable (MVP) a una solución integral: La transición de una búsqueda simple de un día a un sistema con autenticación, gestión de energía y datos de contacto reales marca un salto cualitativo en el proyecto. Esta evolución prueba que la retroalimentación constante en el aula es el motor principal para refinar la propuesta de valor y transformar una herramienta básica en una plataforma de viajes competitiva.

La IA como pilar de personalización y accesibilidad: La implementación de IA dinámica para la detección automática del idioma y la personalización según el nivel de energía del viajero elimina barreras de uso significativas. Esto posiciona a “Your Local Compass” no solo como un generador de itinerarios, sino como un asistente inteligente capaz de adaptarse al contexto cultural y físico de cada persona, optimizando la experiencia del usuario de manera global.