Guía completa de Lovable

Primeros pasos

Entra en lovable.dev y crea una cuenta. Empieza un proyecto nuevo describiendo en una frase la aplicación que quieres construir (por ejemplo, "una web de reservas para una peluquería"). Lovable trabaja en tres modos: Chat/Plan (piensas y planificas sin gastar créditos, nada se modifica todavía), Agent (construye el código de verdad) y Visual Edits (ajustas el diseño haciendo clic directamente sobre los elementos). Para empezar bien, deja que primero te muestre un plan de lo que va a construir, revísalo, y solo después pide que lo ejecute.

Casos de uso

Construir una aplicación completa desde una descripción
Genera frontend en React, backend con base de datos (Supabase) y autenticación de usuarios a partir de una conversación en lenguaje natural.
Prototipos rápidos para validar una idea
Lanza una primera versión funcional de un producto en minutos, sin necesidad de un equipo de desarrollo, para probarla con usuarios reales.
Ajustes visuales sin escribir prompts
Con Visual Edits, haces clic directamente sobre botones, secciones o componentes y pides cambios de estilo o de diseño, combinando edición sin código con IA.
Conectar pagos y base de datos
Configura Stripe para cobros y Supabase para almacenar datos de usuarios, todo describiéndolo en lenguaje natural sin escribir SQL.

Configuración avanzada

  1. Modo Chat/Plan
    Úsalo para pensar, planificar y depurar antes de construir. No gasta créditos porque nada se modifica en tu proyecto hasta que apruebes el plan.
  2. Modo Agent
    Construye el código de forma autónoma: explora tu proyecto, depura proactivamente y busca en la web si necesita información actualizada para resolver un problema.
  3. Visual Edits
    Cambia a la vista del editor visual para ajustar con precisión espaciado, colores y posición de componentes, en lugar de describirlo por texto.
  4. Integración con Supabase y GitHub
    Lovable genera el esquema completo de base de datos (tablas, relaciones, seguridad) a partir de tu descripción, y sincroniza automáticamente cada cambio con un repositorio de GitHub que tú controlas.

Trucos

  • Divide peticiones grandes en pasos más pequeños ("añade la página de login", luego "conecta el login a Supabase") en lugar de pedirlo todo en un único mensaje: mejora mucho la precisión.
  • Usa el modo Chat/Plan para revisar lo que Lovable va a construir antes de aprobarlo: te ahorra créditos gastados en cambios que no querías.
  • Para ajustes finos de diseño (espaciado, alineación, colores), usa Visual Edits en lugar de intentar describirlo con palabras: es mucho más preciso.
  • Aprovecha que el código se sincroniza con GitHub: si algo sale mal, siempre puedes revisar el historial de cambios fuera de Lovable.
  • Cuando falten créditos a mitad de un cambio grande, agrupa las siguientes peticiones en un solo mensaje bien detallado en lugar de mandar varios mensajes sueltos.

Preguntas frecuentes

¿Es gratis usar Lovable?
Tiene un plan gratuito con créditos limitados al mes. Los planes de pago (desde $25/mes) añaden más créditos y funciones como dominios personalizados.
¿Necesito saber programar?
No, Lovable está pensado para describir lo que quieres en lenguaje natural. Saber programar ayuda a entender el código generado, pero no es necesario para usarlo.
¿Puedo conectar mi propio dominio?
Sí, pero requiere un plan de pago (Pro o superior); en el plan gratuito solo se puede usar el subdominio gratuito de Lovable.
¿Qué pasa con el código que genera?
Se sincroniza automáticamente con un repositorio de GitHub de tu propiedad: el código es tuyo y puedes exportarlo o modificarlo fuera de Lovable en cualquier momento.
Basado en lovable.dev/guides y documentación oficial de Lovable