Cómo usar Lovable: crea tu primera app paso a paso
Un recorrido completo por Lovable, reconstruido a partir de una creación real de principiante — prompts estructurados, modo Plan, Google Calendar, corrección de errores, análisis de seguridad y publicación como PWA. Cada paso con captura de pantalla.
Lovable en corto
- Estructura tu primer prompt en torno a dos cosas: qué hace la app (el objetivo) y cómo se mueve el usuario dentro de ella (el flujo). Con una o dos funciones basta para empezar.
- Antes de enviar, cambia de Build a Plan. Lovable primero hace preguntas de aclaración y escribe un plan que puedes corregir antes de que se genere código.
- Cuando algo falle, corrígelo con prompts precisos: «las tareas deben empezar en el cuarto de hora más cercano, nunca en el pasado» funciona mejor que «arregla las horas».
- Antes de publicar, ejecuta el análisis de seguridad: «Try to fix all» es gratis. Una frase en lenguaje natural convierte la app en una PWA instalable en tu móvil.
Lovable AI Tutorial for Beginners - Build Your First App
Vídeo original de:Kevin Stratvert11:40
Las capturas proceden del vídeo original y llevan crédito con enlaces por minuto exacto. El texto es redacción propia basada en la transcripción completa; los hechos coinciden con el vídeo.
Este tutorial es un resumen ilustrado e independiente para quien prefiere leer. Para apoyar al creador, mira el vídeo original del canal, enlazado arriba.
Crea una app en Lovable, paso a paso
- 1
Recorre el espacio de trabajo
Tras registrarte llegas al espacio de trabajo de Lovable. La barra lateral reúne Inicio, Búsqueda, Recursos y Conectores, con tus chats recientes debajo. El cuadro de prompt del centro es donde empieza toda app; justo debajo tienes colecciones de plantillas por si necesitas inspiración.
El espacio de Lovable: cuadro de prompt en el centro, chats y conectores a la izquierda.Ver en 0:40 - 2
Escribe un primer prompt estructurado
Antes de escribir nada, deja claras dos cosas: el objetivo (qué hace la app) y el flujo (cómo la recorre el usuario). Esta creación es una app de voz a calendario: balbuceas tareas y ella las programa en Google Calendar. Declara las restricciones — cada tarea dura 30 minutos salvo indicación contraria, el usuario confirma antes de guardar — y describe el estilo con palabras como limpio, elegante, minimalista. Termina con: «Hazme cualquier pregunta que necesites para entender exactamente lo que quiero».
El primer prompt completo: objetivo, flujo, restricciones, estilo y una invitación a preguntar.Ver en 3:20 - 3
Cambia a modo Plan antes de enviar
Abre el desplegable Build bajo el cuadro de prompt y elige Plan — «discutir antes de construir» (se alterna con Alt+P). En modo Plan, Lovable hace preguntas y escribe un plan primero, lo que evita que construya la app equivocada. Para un primer proyecto, es el hábito que más valor aporta.
El desplegable Build/Plan: elige Plan para discutir antes de construir.Ver en 2:40 - 4
Responde las preguntas de aclaración
Lovable vuelve con preguntas — elecciones visuales como el color de acento y luego funcionales: usar la transcripción de voz gratuita integrada o un servicio externo, conectar Google Calendar mediante el conector de Lovable, etc. Responde con sinceridad; las respuestas vagas de ahora serán funciones vagas mañana.
Preguntas de aclaración: elige un color de acento y responde las opciones funcionales.Ver en 4:12 - 5
Lee el plan y apruébalo
El plan se divide en secciones comprensibles — apariencia, pantallas y flujo, cómo funciona — más los detalles técnicos. Aunque no sepas de código, revisa pantallas y flujo: es tu app sobre el papel. Si algo no encaja, escribe qué cambiar en el cuadro de prompt en lugar de aprobar; cuando coincida con tu idea, pulsa Approve.
El plan generado: revísalo, pide cambios y luego apruébalo.Ver en 5:00 - 6
Conecta Google Calendar cuando te lo pida
A mitad de la construcción, Lovable se detiene y te pide conectar tu Google Calendar. Pulsa el botón de conexión, inicia sesión con tu cuenta de Google y vincúlala al proyecto. En esta demo el calendario queda fijado al tuyo; más adelante puedes pasar a inicio de sesión por usuario para compartir la app.
A mitad de camino, Lovable pide vincular tu Google Calendar.Ver en 5:35 - 7
Pruébalo dictando tus tareas
Cuando aparezca la vista previa, pulsa el micrófono y suelta de verdad tu lista: «Tengo que enviar el informe TPS con una portada nueva a Bill, y el resumen de la cartera de clientes a Charles». Detén la grabación y la app convierte tus palabras en tarjetas de tareas a la espera de aprobación.
Primera prueba de voz: la app transcribe tu divague en tareas.Ver en 5:50 - 8
Corrige el comportamiento con prompts precisos
Primer error: las tareas quedaron a la hora exacta en que las dijiste. La corrección es una instrucción precisa: «Las tareas deben empezar en el incremento de 15 minutos más cercano (y no en el pasado), no a la hora actual». Lovable anota el cambio en una tarjetita — por eso mereció la pena acertar con el plan al principio.
Un prompt preciso ajusta las tareas a franjas de 15 minutos.Ver en 8:00 - 9
Enséñale tu forma de hablar de fechas
Di «llama a Kevin mañana a las 10» y programa las 3 de la madrugada — la app aún no interpreta fechas relativas. Dale las reglas por prompt: reconocer mañana, ayer, viernes a las 15 h; «por la mañana» es antes de las 11, la tarde va de 13 a 16 h; «el próximo lunes» es el de la semana siguiente, no el que viene. Cuanto más concretos los ejemplos, menos correcciones después.
Reglas de fechas por voz: ejemplos de momentos y de duraciones, uno a uno.Ver en 7:40 - 10
Depura con capturas en modo Plan
Las horas siguen desfasadas unas siete horas — un fallo de zona horaria. Pega la captura de las horas equivocadas directamente en el cuadro de prompt y di lo que observas: «Parece un problema de zona horaria, las horas van desfasadas unas 7». Vuelve al modo Plan para la corrección; si el plan es demasiado técnico, añade: «No soy técnico, ¿me lo explicas con palabras que entienda?».
Captura el bug, descríbelo y el modo Plan produce la solución.Ver en 8:55 - 11
Publica y reclama tu URL
Antes de publicar, un último prompt cambia la app de tu calendario a inicio de sesión por usuario, para que nadie toque tus eventos. Luego pulsa Publish arriba a la derecha: obtienes una URL gratuita en lovable.app (los dominios propios son de Pro), eliges visibilidad pública y rellenas título, descripción e imagen social.
Flujo de publicación: tu URL gratuita en lovable.app y los metadatos de la app.Ver en 9:45 - 12
Ejecuta el análisis de seguridad y añade la PWA
Antes de salir a producción, Lovable recomienda un análisis de seguridad en profundidad — de especial valor en código generado por IA. Las correcciones con «Try to fix all» no cuestan créditos. Luego añade el toque móvil con una frase: «Haz que pueda instalarla como icono de app en mi móvil. Usa un micrófono turquesa como icono.» Lovable genera el manifiesto PWA y los iconos táctiles.
El análisis de seguridad se corrige gratis — y el prompt PWA la hace instalable.Ver en 10:40 - 13
Instálala en tu móvil
Publica la actualización, abre la URL en el navegador del móvil y toca el icono de compartir. Elige «Añadir a pantalla de inicio» y confirma — y el icono de la app aterriza en tu pantalla de inicio. Lo tocas y funciona a pantalla completa como una app nativa, sin pasar por la tienda de aplicaciones.
«Añadir a pantalla de inicio» convierte la app publicada en icono de móvil.Ver en 11:00