Crea una aplicación con Claude y Lovable sin programar | Vibe Coding paso a paso

Picture of Margot Duek

Margot Duek

En este video creamos una aplicación funcional utilizando inteligencia artificial y la metodología conocida como vibe coding. La idea es crear una aplicación para intercambiar estampas del Mundial 2026 entre amigos. Primero utilizamos Claude para desarrollar la idea, mejorar la lógica de funcionamiento y crear un prompt detallado. Después utilizamos Lovable para transformar esa idea en una aplicación funcional con frontend y backend. Durante el proceso vemos cómo crear perfiles, agregar amigos, registrar estampas disponibles, identificar duplicados, encontrar personas con estampas faltantes y proponer intercambios automáticamente. También explicamos las ventajas y limitaciones de herramientas como Lovable, por qué funcionan muy bien para pruebas de concepto y cuándo no deberían utilizarse para aplicaciones comerciales con datos sensibles o muchos usuarios.
  • Qué es el vibe coding y cómo permite crear aplicaciones utilizando inteligencia artificial.
  • Cómo usar Claude para convertir una idea de negocio en un prompt detallado para desarrollo.
  • Cómo diseñar una aplicación para intercambiar estampas del Mundial 2026.
  • Cómo definir funcionalidades antes de crear una aplicación con inteligencia artificial.
  • Cómo crear perfiles de usuarios y sistemas de amistad similares a redes sociales.
  • Cómo registrar estampas disponibles, duplicadas y faltantes dentro de una aplicación.
  • Cómo utilizar inteligencia artificial para encontrar coincidencias de intercambio entre usuarios.
  • Cómo conectar Claude con Lovable para crear un prototipo funcional.
  • Qué diferencia existe entre frontend y backend al crear aplicaciones.
  • Cómo Lovable permite crear aplicaciones con lógica funcional sin programar desde cero.
  • Por qué Lovable es ideal para pruebas de concepto y validación de ideas.
  • Las limitaciones de utilizar herramientas no-code con inteligencia artificial para aplicaciones comerciales.
  • Por qué la seguridad, escalabilidad y control del código son importantes antes de lanzar un producto real.
  • Cómo la inteligencia artificial permite crear prototipos que antes requerían semanas de desarrollo.

Crear una aplicación tradicionalmente requiere conocimientos de programación, equipos de desarrollo y meses de trabajo.

Sin embargo, con la llegada de herramientas de inteligencia artificial como Claude y Lovable, ahora es posible transformar una idea en un prototipo funcional utilizando lenguaje natural.

Esta metodología se conoce como vibe coding, una forma de desarrollar aplicaciones donde la persona describe lo que quiere crear y la inteligencia artificial ayuda a construir la solución.

En este video creamos una aplicación completa para intercambiar estampas del Mundial 2026 entre amigos.

¿Qué es el Vibe Coding?

El vibe coding consiste en utilizar inteligencia artificial para crear software sin escribir directamente todo el código.

En lugar de comenzar programando desde cero, el proceso inicia con una idea.

La persona explica:

  • qué problema quiere resolver;
  • cómo debería funcionar;
  • qué usuarios tendrá;
  • qué características necesita.

Después la inteligencia artificial ayuda a convertir esa idea en instrucciones que una herramienta de desarrollo puede utilizar.

Usar Claude para estructurar una idea de aplicación

Antes de construir una aplicación es importante definir correctamente la idea.

Claude funciona como un socio para analizar la propuesta, hacer preguntas y mejorar la estructura del producto.

En este ejemplo, la idea inicial era crear una aplicación para intercambiar estampas del Mundial.

Claude ayuda a definir:

  • usuarios;
  • funcionalidades;
  • reglas de intercambio;
  • experiencia dentro de la aplicación.

Crear una aplicación para intercambiar estampas

La aplicación propuesta permite que los usuarios registren:

  • estampas que tienen;
  • cantidad de duplicados;
  • estampas que les faltan.

Después pueden agregar amigos y encontrar personas con quienes puedan realizar intercambios.

El objetivo es que la aplicación detecte coincidencias.

Por ejemplo:

“Margot necesita una estampa que Raquel tiene repetida tres veces.”

Así los usuarios pueden intercambiar físicamente y completar sus álbumes más rápido.

Crear aplicaciones con Lovable

Una vez definida la idea, Claude genera un prompt que puede utilizarse dentro de Lovable.

Lovable es una herramienta que permite crear aplicaciones mediante inteligencia artificial.

Puede generar:

  • frontend;
  • backend;
  • interfaces;
  • lógica básica.

Esto permite pasar de una idea a un prototipo funcional en poco tiempo.

Frontend y backend en una aplicación

Durante el proceso es importante entender la diferencia entre frontend y backend.

El frontend es la parte visual con la que interactúa el usuario:

  • botones;
  • pantallas;
  • formularios;
  • diseño.

El backend es la parte que maneja la lógica:

  • usuarios;
  • datos;
  • procesos;
  • conexiones.

Una herramienta como Lovable puede generar ambas partes para crear una aplicación funcional.

Ventajas de Lovable para validar ideas

Una de las grandes ventajas de estas herramientas es la velocidad.

Crear un prototipo que antes podía tomar semanas o meses ahora puede hacerse en horas.

Esto permite validar ideas rápidamente antes de invertir grandes cantidades de dinero en desarrollo.

Por ejemplo:

  • probar una idea de negocio;
  • mostrar un concepto a inversionistas;
  • validar una experiencia de usuario.

Limitaciones de crear aplicaciones con inteligencia artificial

Aunque estas herramientas son muy poderosas, tienen limitaciones.

Lovable funciona muy bien para pruebas de concepto, pero no necesariamente es la mejor opción para aplicaciones comerciales grandes.

Cuando una aplicación tiene:

  • muchos usuarios;
  • información sensible;
  • necesidades avanzadas de seguridad;
  • alta escalabilidad;

es recomendable trabajar con desarrollo profesional y control completo del código.

El futuro del desarrollo con inteligencia artificial

La inteligencia artificial está cambiando la forma en la que construimos productos digitales.

Cada vez más personas podrán transformar ideas en prototipos sin necesidad de dominar programación.

El valor estará en saber definir problemas, diseñar soluciones y utilizar correctamente las herramientas disponibles.

El futuro no es solamente programar más rápido.

Es poder crear y validar ideas mucho más rápido.

Vamos a hacer una aplicación para intercambiar estampas del Mundial con tus conocidos.

En tiempo récord tengo esta taza y la aplicación tiene que estar lista antes de que se acabe.

Entonces vamos a usar Claude y vamos a usar Lovable, que es otra herramienta para poder hacer vibe coding.

Esto es programar sin programar.

Vamos a crear una aplicación en Lovable para intercambiar stickers del Mundial.

Te voy a decir cuál es mi idea y necesito que me ayudes a mejorarla para poderlo pasar a Lovable en un prompt.

Mi idea es la siguiente:

Tú vas cargando las stickers que tienes y cuántos duplicados tienes.

Si tienes tres veces al mismo jugador, puedes poner que lo tienes tres veces.

También vas a poner las stickers que te faltan.

La idea aquí es que tú puedas agregar amigos, como lo haces en Facebook, a personas con las que tienes contacto generalmente.

Puede ser a tus amigos, vecinos, conocidos o cualquier persona con la que puedas intercambiar físicamente.

Porque si no, no tendría sentido esto.

La idea es que la aplicación te diga:

“Margot, ¿qué crees? Raquel tiene tres veces la estampa que a ti te falta. Pídesela.”

Y luego te diga:

“Acércate con Juan y pídele esta otra.”

Así puedes ir intercambiando y llenando tu álbum del Mundial rápido y fácil.

También pensé que esta aplicación podría funcionar para cualquier cosa que tengas de colección.

Un conocido me decía que él colecciona muñecos.

Cuando le platiqué la idea del Mundial me dijo:

“Me encanta la idea, también lo quiero, pero para mis muñecas. Lo voy a desarrollar yo después de ver tu video.”

Y está súper bien porque la idea puede aplicarse a muchas colecciones.

Entonces esto es para que aprendas a usar la herramienta y, si te interesa, podría darte acceso a esta aplicación.

Le voy a explicar la idea a Claude.

Quiero que también la parte de agregar amigos sea como Facebook.

Tienes que agregar a una persona y esa persona te tiene que aceptar.

También es muy importante que tenga la identidad del Mundial 2026, especialmente de México.

Claude me hizo dos preguntas.

Me pregunta cuántas stickers tiene y cómo quiero que sea la parte de aceptar amigos.

Le digo que quiero que funcione como una solicitud de amistad.

Te explico algo importante.

El frontend es lo que nosotros vemos de la página.

Es la parte con la que interactuamos.

El backend es todo el cerebro detrás.

Y algo maravilloso que podemos hacer en Lovable es meterle un backend funcional.

Ahora, esto está bien porque esta aplicación va a servir por un tiempo limitado mientras dura el Mundial.

Pero aquí va un pequeño disclaimer:

Lovable es muy bueno, especialmente para pruebas de concepto.

Puedes hacer una aplicación que funciona perfectamente.

Pero si ya le metes mucha gente, si tienes datos sensibles o si es un negocio completo, la verdad es que no conoces el código y corregir errores puede ser muy complicado.

También está el tema de seguridad.

Yo recomiendo usarlo para pruebas de concepto, validar ideas y hacer prototipos.

Pero no necesariamente para aplicaciones que vas a vender, lanzar al mercado o que van a manejar información importante.

Para eso recomendaría trabajar con expertos que puedan controlar todo el desarrollo.

Ahora Claude nos está haciendo el prompt perfecto para pasarlo a Lovable.

¿Por qué recomiendo hacerlo primero en Claude?

Porque si tú crees que los tokens de Claude son caros, espérate a ver los de Lovable.

También pasa que cuando publicas una aplicación, empieza a consumir recursos.

Entonces dependiendo del proyecto puede ser más barato crear la estructura con Claude primero.

Hasta ahora Lovable es maravilloso porque puedes hacer cosas que antes no se podían.

Vamos a probarlo.

Ya copié el prompt y voy a irme a Lovable.

Vamos a pegarlo y esperar a que cree esta aplicación desde cero.

Se tarda un poquito porque está creando algo que hace unos años le hubiera tomado a una persona por lo menos unas 50 horas.

Listo, al parecer ya quedó.

Vamos a revisar.

Le voy a poner polish para poder verlo en grande.

Voy a pedirle que por ahora quiero ver el demo sin crear cuenta.

Me salen algunos errores que después voy a resolver, pero quiero enseñarles cómo se ve la aplicación de entrada.

Aquí ya me aparece más o menos cómo se ve.

Me dice:

“Aquí están todas las estampas que existen.”

Puedo seleccionar cuáles son las que me faltan.

Puedo ver todas las que tengo.

Puedo ver las que tengo duplicadas, que son las que puedo intercambiar.

También puedo filtrar por tipo, normales o extras.

Aquí están todas las que puedo intercambiar.

Puedo irme a mis amigos y ver cuáles son las estampas que les faltan.

También puedo revisar intercambios.

Por ejemplo, me dice:

“Te pueden dar estas 12 estampas y tú le puedes dar estas 12.”

Entonces puedo proponerle un intercambio a otra persona.

Aquí hay algunas cosas que tengo que seguir resolviendo porque todavía no está creada toda la parte.

También tengo mi perfil.

Puedo cambiar mi nombre.

Puedo ver el porcentaje que tengo completado de mi álbum.

Puedo ver mis duplicados.

Puedo reiniciar mi inventario.

La idea final es que puedas entrar con tu perfil, con tu usuario y probar la aplicación.

Cuéntame si esto te funcionó, si te gustó y si ya conocías Lovable.

También te dejo el link de Lovable para que puedas probarlo.

Creo que te regalan algunos créditos con ese link.

Me encantará saber qué te pareció.

Mi nombre es Margot Duek y nos vemos en el siguiente video.