Vibe Coding en Acción: Cómo Creé una App de Gestión para Barbería sin Escribir Código usando Lovable

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

En febrero de 2025, Andrej Karpathy, cofundador de OpenAI y exdirector de IA en Tesla, introdujo un concepto que sacudiría los cimientos del desarrollo de software: el Vibe Coding. Su descripción fue directa y provocadora: en lugar de escribir código línea por línea, el desarrollador conversa con una inteligencia artificial, describe lo que necesita en lenguaje natural y deja que la IA se encargue de traducir esa intención en código funcional. El término captura la esencia de “dejarse llevar por la vibra”, donde el valor ya no reside en dominar una sintaxis, sino en tener claridad sobre qué problema resolver y cómo comunicarlo.

La relevancia de este enfoque trasciende una simple tendencia tecnológica. El Vibe Coding está redefiniendo quién puede crear software. Por primera vez en la historia de la computación, personas sin formación técnica formal —diseñadores, docentes, emprendedores, analistas de negocio— pueden construir herramientas digitales adaptadas a sus necesidades reales sin depender de un equipo de desarrollo. Lo que antes requería semanas de trabajo con un programador, hoy puede materializarse en horas a través de una conversación con IA.

El impacto cultural fue tan significativo que en noviembre de 2025, el Diccionario Collins eligió “vibe coding” como su Palabra del Año, y el MIT Technology Review lo incluyó en su lista de Tecnologías Revolucionarias de 2026 bajo el nombre “Generative Coding”. Este no es un fenómeno pasajero: representa una evolución estructural en la forma en que los seres humanos interactúan con el software, comparable al salto del código ensamblador a los lenguajes de alto nivel, pero eliminando por completo el requisito de aprender una sintaxis formal como condición de acceso.

Para los profesionales técnicos, el rol también cambia profundamente. El foco se desplaza de escribir código a diseñar soluciones, hacer las preguntas correctas y evaluar resultados críticamente. El Vibe Coding no elimina la necesidad de pensar bien los problemas, sino que hace el proceso de construir soluciones accesible para todos.

Ventajas y desventajas del Vibe Coding

Ventajas:

El Vibe Coding ofrece beneficios concretos que explican su adopción masiva en 2026:

Accesibilidad radical: Cualquier persona con una idea clara puede crear software funcional. La barrera de entrada se reduce de años de formación técnica a la capacidad de comunicarse con precisión en lenguaje natural.

Velocidad sin precedentes: Prototipos y MVPs (Productos Mínimos Viables) que antes tomaban semanas ahora pueden estar listos en horas. Esto transforma la manera de validar ideas de negocio, permitiendo fallar rápido y pivotar antes de invertir grandes recursos.

Reducción de costos iniciales: Un emprendedor puede validar su concepto sin contratar un equipo de desarrollo completo. Herramientas como Lovable o Bolt.new permiten crear aplicaciones web funcionales con planes gratuitos o de bajo costo.

Foco en el problema, no en la implementación: La IA se encarga del “cómo” técnico mientras el usuario se concentra en el “qué” y el “para qué”. Esto libera energía mental para pensar en la experiencia del usuario y el modelo de negocio.

Aprendizaje bidireccional: El código generado por la IA puede servir como material de estudio. Muchos usuarios están aprendiendo programación de forma inversa: primero ven el resultado y luego entienden la lógica detrás.

Desventajas:

Sin embargo, el Vibe Coding tiene limitaciones importantes que todo practicante debe conocer:

Código no siempre optimizado: La IA puede generar código redundante, difícil de mantener o con patrones que un ingeniero experimentado evitaría. Esta “deuda técnica invisible” se acumula y puede convertirse en un problema serio a largo plazo.

Dependencia crítica del prompt: La calidad del resultado es directamente proporcional a la claridad de las instrucciones. Un prompt vago produce resultados confusos que requieren múltiples iteraciones.

Vulnerabilidades de seguridad ocultas: El código generado sin revisión humana puede contener brechas de seguridad que pasan desapercibidas hasta que es demasiado tarde. En septiembre de 2025, ingenieros senior reportaron dificultades significativas al mantener código generado por IA que no comprendían completamente.

Limitaciones en lógica de negocio compleja: A medida que la aplicación requiere flujos de autenticación avanzados, integraciones complejas con APIs externas o bases de datos relacionales sofisticadas, el enfoque puramente conversacional se queda corto.

Dificultad para escalar: Pasar de un prototipo funcional a un producto empresarial robusto suele requerir reescribir gran parte del código, lo cual anula parte de la ventaja inicial de velocidad.

Competencias necesarias para Vibe Coding

Las competencias requeridas para el Vibe Coding varían significativamente según el perfil del practicante. No se trata de una lista única, sino de un espectro que va desde habilidades blandas hasta conocimientos técnicos especializados.

Para el usuario no técnico (emprendedor, diseñador, analista)
Pensamiento lógico y estructurado es la competencia más fundamental. Antes de escribir cualquier prompt, se necesita la capacidad de descomponer un problema en pasos secuenciales claros. ¿Qué hace la app? ¿Quién la usa? ¿Cuál es el flujo principal?

Prompt Engineering básico se convierte en la habilidad diferenciadora. Saber redactar instrucciones precisas, definiendo contexto, especificando restricciones y detallando requisitos funcionales es la diferencia entre obtener código útil y código inservible.

Pensamiento de producto es esencial: entender las necesidades del usuario final, definir funcionalidades prioritarias y evaluar si la solución generada realmente resuelve el problema planteado.

Para el desarrollador o perfil técnico
Capacidad de revisión y auditoría de código permanece indispensable. Como señaló Pieter Levels, desarrollador que popularizó el Vibe Coding con proyectos en producción: saber leer y entender el código sigue siendo una habilidad clave incluso cuando la IA lo genera.

Arquitectura de software toma mayor relevancia. El Vibe Coder técnico actúa como un arquitecto que define la estructura general, las integraciones y los patrones de diseño, delegando la implementación a la IA.

Visión de Product Manager: El profesional técnico que practica Vibe Coding necesita pensar no solo en cómo funciona el código, sino en por qué existe, qué problema resuelve y cómo se monetiza. El rol se desplaza de lo puramente técnico hacia lo estratégico.

Para ambos perfiles
Iteración disciplinada: El Vibe Coding es un proceso iterativo por naturaleza. La habilidad de evaluar un resultado, identificar qué falta y comunicar ajustes precisos sin rehacer todo desde cero es transversal a cualquier nivel.

Criterio para evaluar calidad: Independientemente del perfil, se necesita la capacidad de distinguir entre un resultado “que funciona” y un resultado “que funciona bien”. Esto incluye aspectos como la experiencia de usuario, la seguridad y el rendimiento.

Herramientas y técnicas de Vibe Coding

El ecosistema de herramientas de Vibe Coding se ha consolidado en tres grandes categorías según el perfil del usuario y el tipo de proyecto:

Plataformas full-stack visuales (para no-programadores)
Lovable se ha posicionado como la herramienta estrella del Vibe Coding para personas sin experiencia en programación. La plataforma convierte descripciones en lenguaje natural en aplicaciones web completas con frontend, backend y base de datos integrada (Supabase). Alcanzó 100 millones de dólares en facturación anual en solo 8 meses, convirtiéndose posiblemente en la startup SaaS de más rápido crecimiento de la historia.

Bolt.new funciona completamente en el navegador, generando aplicaciones full-stack sin necesidad de configuración local. Es ideal para prototipos rápidos y pruebas de concepto.

Replit ofrece un entorno de desarrollo completo en la nube con un agente de IA que maneja desde el código del servidor hasta las bases de datos y el despliegue.

Editores de código con IA (para desarrolladores)
Cursor es un IDE potenciado por IA que permite describir funcionalidades en lenguaje natural y obtener código funcional al instante. Incluye modo agente para desarrollo autónomo.

GitHub Copilot sigue siendo el pionero en la generación de código asistida, con integración directa en VS Code y precios accesibles desde 10 USD/mes.

Windsurf se especializa en mantener coherencia y estilo a lo largo de proyectos más complejos.
Herramientas de línea de comandos.

Claude Code y Gemini CLI representan la frontera para desarrolladores que prefieren trabajar desde la terminal, ofreciendo integración con el Protocolo de Contexto del Modelo (MCP) para conectar la IA con herramientas y fuentes de datos externas.

Técnicas clave
Las técnicas fundamentales del Vibe Coding incluyen: la iteración conversacional (describir, revisar, ajustar), el prompt en capas (partir de lo general hacia lo específico), la verificación incremental (probar cada cambio antes de avanzar) y el enfoque híbrido recomendado por el consenso académico de 2026, que combina la velocidad del Vibe Coding con el rigor de la ingeniería tradicional para código de producción.

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

El caso práctico: BarberConnect

Para este artículo, creé BarberConnect, una aplicación web progresiva (PWA) de gestión completa para una barbería. La aplicación resuelve un problema real: la gestión desorganizada de citas, barberos e inventario que enfrentan los negocios de barbería tradicionales. Con BarberConnect, el administrador puede gestionar todo desde un panel centralizado, los barberos acceden a su agenda personal y los clientes pueden agendar citas en línea con validación de disponibilidad en tiempo real.
La herramienta utilizada fue Lovable, y el proceso completo se realizó sin escribir una sola línea de código manualmente.

Paso a paso: Desde el registro hasta la app funcional

Paso 1 — Registro en Lovable

Para comenzar, ingresé a lovable.dev y creé una cuenta gratuita. Lovable permite registrarse con correo electrónico o con cuenta de Google/GitHub. Una vez dentro, el dashboard muestra una interfaz limpia con un campo de chat donde se escriben los prompts.

Paso 2 — Prompt inicial

En el chat de Lovable, pegué el prompt principal (detallado en la sección 6 de este artículo). Lovable procesó la instrucción durante aproximadamente 18 segundos, durante los cuales mostró su plan de acción: establecer el sistema de diseño oscuro/dorado, construir la landing page con navegación, crear el esquema de base de datos y montar la estructura de páginas.

Paso 3 — Resultado inicial y revisión

Lovable generó automáticamente la siguiente estructura:

• Design System: Tema oscuro elegante con acentos dorados usando HSL, tipografía Playfair Display + Inter, animaciones con Framer Motion.
• Landing Page: Hero section con imagen, sección de servicios con precios, estadísticas y mapa embebido.
• Sistema de Reservas: Flujo paso a paso (Servicio → Barbero → Fecha/Hora → Confirmación).
• Login: Con Magic Link y opción de Google.
• Dashboard Admin: Panel con estadísticas y tabla de citas.
• Base de Datos (Lovable Cloud): Tablas para profiles, user_roles, barbers, services, appointments y products con RLS (Row Level Security) completo.

Paso 4 — Iteración y configuración del administrador

Después de revisar el resultado, solicité a Lovable que creara un usuario administrador funcional con credenciales específicas. El prompt de iteración fue:
“Agrega un usuario administrador con el correo crissv964@gmail.com y cualquier clave, dame la clave y adicional que funcione el logueo”
Lovable ejecutó dos acciones: asignó el rol de admin al usuario creado y habilitó el sistema de login funcional con email/contraseña y Google. Las credenciales generadas fueron:

• Email: crissv964@gmail.com
• Contraseña: ***********
• Rol: Admin

Paso 5 — Publicación

Lovable ofrece publicación directa con un dominio generado automáticamente. La app quedó accesible para pruebas inmediatas sin necesidad de configurar hosting, DNS o certificados SSL.

A continuación se puede explorar la aplicación directamente:

Aplicacion Web Creada

Prompt y refinamiento de prompts para Vibe Coding

El prompt es el corazón del Vibe Coding. Un prompt bien construido puede generar una aplicación casi perfecta desde el primer intento; uno vago puede producir resultados confusos que requieran docenas de correcciones. A continuación se presenta el prompt completo utilizado para crear BarberConnect, junto con las técnicas de refinamiento aplicadas.

Prompt final completo

Contexto: Crea una aplicación web progresiva (PWA) de gestión para una barbería
llamada “BarberConnect”. La aplicación debe ser moderna, minimalista y con un modo
oscuro elegante (acentos dorados y negros).

1. Arquitectura de Roles:

• Admin: Gestiona barberos, servicios, precios y ve estadísticas globales.
• Barbero: Puede ver su propia agenda, marcar servicios como completados y
  gestionar su perfil.
• Cliente: Puede ver servicios, elegir barbero, seleccionar fecha/hora y
  gestionar sus propias citas.

2. Funcionalidades Principales:

• Landing Page: Hero section impactante, galería de cortes, lista de servicios
  con precios y pie de página con ubicación (Google Maps embed).
• Sistema de Agendamiento:
• Calendario interactivo.
• Validación de disponibilidad en tiempo real (evitar “double booking”).
• Selección de barbero específico o “cualquier barbero”.
• Panel de Administración (Dashboard):
• Gestión de Inventario básico (productos como ceras o aceites).
• CRUD de barberos (nombre, foto, especialidad).
• Historial de citas y estados (Pendiente, Confirmada, Cancelada, Completada).
• Perfil de Usuario: Login con Magic Link o Google. Los clientes deben poder
  ver sus puntos de fidelidad (Sistema de: cada 5 cortes, el 6to es gratis).

3. Interfaz y UX (UI/UX):

• Usa shadcn/ui para los componentes (modals, buttons, cards).
• Navegación fluida con Framer Motion para transiciones.
• Diseño “Mobile First” (la mayoría de los clientes agendarán desde el móvil).
• Incluye un “Skeleton Loader” mientras se cargan las citas.

4. Stack Técnico:

• Frontend: React + Vite + Tailwind CSS.
• Backend/Base de Datos: Supabase (tablas: profiles, barbers, services,
  appointments, products).
• Iconografía: Lucide-react.

Instrucción final: Comienza construyendo la estructura de la base de datos y
la navegación principal (Navbar y Sidebar). Luego, genera la lógica del calendario
de reservas.

Análisis de las técnicas de prompting aplicadas

Este prompt demuestra varias buenas prácticas que todo Vibe Coder debería adoptar:

Contexto explícito al inicio: El prompt abre definiendo exactamente qué se va a construir, el nombre de la aplicación y la dirección estética. Esto establece el marco de referencia para toda la generación.

Arquitectura de roles clara: Definir quién usa la aplicación y qué puede hacer cada uno evita ambigüedades que llevarían a la IA a tomar decisiones incorrectas sobre permisos y flujos.

Funcionalidades organizadas jerárquicamente: Las funcionalidades están agrupadas por módulo (Landing, Agendamiento, Dashboard, Perfil), lo que facilita que la IA planifique la generación en bloques lógicos.

Especificaciones de UI/UX concretas: En lugar de decir “que se vea bonito”, el prompt nombra librerías específicas (shadcn/ui, Framer Motion), patrones de diseño (Mobile First, Skeleton Loader) y preferencias estéticas (modo oscuro, dorado/negro).

Stack técnico definido: Nombrar las tecnologías exactas evita que la IA elija frameworks genéricos o incompatibles entre sí.

Instrucción final con orden de ejecución: Decirle a la IA por dónde empezar (base de datos → navegación → lógica de reservas) reduce la probabilidad de que genere todo de forma desordenada.

Prompt de iteración
Después del resultado inicial, el prompt de refinamiento fue breve pero preciso:
Agrega un usuario administrador con el correo crissv964@gmail.com
y cualquier clave, dame la clave y adicional que funcione el logueo

Esta iteración demuestra una técnica clave: no pedir que se rehaga todo. En lugar de reformular el prompt completo, se solicita un ajuste específico sobre el resultado ya generado. Esto preserva el trabajo previo y reduce el riesgo de que la IA pierda contexto.

Consejos para refinar prompts
Al iterar sobre una app generada con Vibe Coding, se recomienda describir específicamente qué está mal en lugar de pedir rehacer todo desde cero. Dar ejemplos concretos del comportamiento esperado ayuda enormemente. Copiar y pegar el mensaje de error exacto permite que la IA diagnostique con mayor precisión. En conversaciones largas, es útil recordarle al modelo el objetivo general para mantener coherencia. Y finalmente, pedir alternativas —como “dame tres formas diferentes de implementar esto”— abre opciones que quizás no se habían considerado.

Soporte y dificultades de las apps creadas con Vibe Coding

Construir una app con Vibe Coding es solo el comienzo. El verdadero desafío aparece cuando la aplicación necesita mantenimiento, actualizaciones o resolución de errores en producción. Estas son las dificultades más comunes y cómo abordarlas:

Mantenimiento del código generado

Uno de los problemas más reportados por la comunidad de Vibe Coders es la dificultad para mantener código que no se escribió manualmente. Cuando la IA genera cientos de líneas de código en segundos, es tentador aceptar el resultado sin entenderlo completamente. Esto crea una dependencia peligrosa: si la herramienta de IA cambia su modelo o deja de funcionar, el usuario queda con un código que no comprende y no puede modificar.

La solución recomendada es adoptar una práctica de revisión incremental: después de cada iteración, pedir a la IA que explique qué hizo y por qué. Esto construye comprensión gradual del código base.

Escalabilidad y rendimiento

Las aplicaciones creadas con Vibe Coding funcionan bien como prototipos y MVPs, pero pueden enfrentar problemas de rendimiento cuando la base de usuarios crece. El código generado por IA no siempre implementa las mejores prácticas de optimización, como lazy loading, caché de consultas o indexación de base de datos.

Para BarberConnect, por ejemplo, la validación de disponibilidad en tiempo real funciona correctamente con pocos usuarios concurrentes, pero requerirá optimización si la barbería maneja cientos de reservas diarias.

Seguridad y privacidad

Este es quizás el aspecto más crítico. Las aplicaciones generadas con Vibe Coding manejan datos de usuarios (emails, preferencias, historial de citas) y deben cumplir con regulaciones de protección de datos. La configuración de RLS (Row Level Security) que Lovable implementó automáticamente es un buen punto de partida, pero debe ser auditada por alguien con conocimiento en seguridad.

Dependencia de la plataforma

Al construir sobre Lovable (o cualquier plataforma similar), existe una dependencia implícita del servicio. Si Lovable cambia sus precios, modifica su API de Supabase o discontinúa funcionalidades, la aplicación se ve afectada. La mitigación recomendada es exportar el código fuente a GitHub (funcionalidad que Lovable ofrece) y mantener documentación del proyecto.

Soporte comunitario

La comunidad de Vibe Coding está creciendo rápidamente. Plataformas como Lovable tienen foros activos, y creadores como Midudev y Víctor Robles producen contenido en español que facilita la resolución de problemas comunes. Sin embargo, para errores específicos de lógica de negocio, la mejor estrategia sigue siendo iterar con la propia IA describiendo el problema con la mayor precisión posible.

Videos del proyecto

Video 1: Resumen del paso a paso (cómo se construyó BarberConnect)

Este video muestra el proceso resumido de creación de BarberConnect en Lovable: desde el registro en la plataforma, pasando por el prompt inicial, la generación automática, la iteración para configurar el usuario administrador, hasta la publicación de la app. Se puede generar con herramientas de IA como Synthesia, HeyGen o Pictory a partir de las capturas de pantalla del proceso.

Video 2: Explicación de BarberConnect (problema que resuelve y funcionalidades)

Este video explica qué problema resuelve BarberConnect, para quién está diseñada y un recorrido por sus funcionalidades principales: la landing page, el sistema de reservas, el panel de administración y el perfil de cliente con el sistema de fidelidad. También generado con IA.

Conclusiones

El Vibe Coding representa un cambio paradigmático en la relación entre los seres humanos y el software. No se trata de una moda pasajera, sino de una evolución estructural impulsada por la madurez de los modelos de lenguaje grande (LLM). La experiencia de construir BarberConnect con Lovable demuestra que es perfectamente posible crear una aplicación web completa —con autenticación, base de datos relacional, sistema de reservas en tiempo real y diseño profesional— en cuestión de horas, sin escribir código manualmente.

Sin embargo, esta democratización viene con condiciones importantes. Quienes más provecho obtienen del Vibe Coding son quienes combinan tres cualidades: claridad comunicativa para escribir buenos prompts, comprensión arquitectónica básica para evaluar los resultados, y disposición a revisar críticamente lo que genera la IA. El Vibe Coding no reemplaza el pensamiento crítico; lo hace más urgente que nunca.

La pregunta relevante para los próximos años no es si la IA escribirá código —eso ya está ocurriendo—, sino qué tipo de software se vuelve posible cuando escribir código deja de ser el cuello de botella. Herramientas como Lovable, Cursor, Bolt.new y Replit están demostrando que la respuesta incluye desde MVPs de startups hasta herramientas internas empresariales, paneles de datos y aplicaciones de servicio al cliente.

Para quienes están comenzando, la recomendación es clara: elige una herramienta, define un problema real, escribe un prompt detallado y empieza a iterar. El mejor momento para experimentar con Vibe Coding es ahora, mientras el ecosistema madura y las herramientas siguen ofreciendo planes gratuitos generosos. La curva de aprendizaje es corta, pero la habilidad de comunicarse efectivamente con la IA será cada vez más valiosa en el mercado laboral de 2026 y más allá.

Créditos

Autor: Cristopher Soto Viloria

Editor: Magister Ingeniero Carlos Pinzón

Código: UCIAG-9

Universidad: Universidad Central

Fuentes

Karpathy, A. [@karpathy]. (2025, 6 de febrero). There's a new kind of coding 
    I call "vibe coding" [Publicación]. X. 
    https://x.com/karpathy/status/1886192184808149383

Google Cloud. (2026). Explicación del vibe coding: Herramientas y guías. 
    Google Cloud. 
    https://cloud.google.com/discover/what-is-vibe-coding?hl=es-419

Lovable. (2026). Best vibe coding tools in 2026: Build apps by chatting. 
    Lovable. 
    https://lovable.dev/guides/best-vibe-coding-tools-2026-build-apps-chatting

Collins Dictionary. (2025). Word of the Year 2025: Vibe coding. 
    Collins Dictionary. 
    https://www.collinsdictionary.com/woty

NxCode. (2026). ¿Qué es el Vibe Coding? Guía completa para 2026. NxCode. 
    https://www.nxcode.io/es/resources/news/vibe-coding-guide-2026

KeepCoding. (2026). ¿Qué es el vibe coding?: Guía 2026. KeepCoding Bootcamps. 
    https://keepcoding.io/blog/que-es-el-vibe-coding/

TATEEDA. (2026). Vibe coding vs. engineering: A 2026 guide. TATEEDA Global. 
    https://tateeda.com/blog/vibe-coding-vs-professional-engineering

Javadex. (2026). Vibe Coding: Cómo crear apps sin programar con IA [2026]. 
    Javadex. 
    https://www.javadex.es/blog/vibe-coding-crear-apps-sin-programar-ia-guia-2026