Saltar al contenido principal

​
Descripción general de Lovable

Te damos la bienvenida a esta guía paso a paso para crear una aplicación full-stack con Lovable: Panel de Lovable Pn

​
Descripción general de la plataforma Lovable

1

Paso 1

Para comenzar, ve a lovable.dev y crea una cuenta. Una vez registrado, podrás crear tu primer proyecto.
2

Paso 2

Simplemente introduce una instrucción inicial para poner todo en marcha, ¡y Lovable hará el resto! Este es el bloque de inicio para cualquier proyecto en Lovable, donde puedes dar vida a tus ideas al instante.
En Lovable, la simplicidad es clave:
  • Aquí pones en marcha tu proyecto con una sola instrucción.
  • Explora todos los proyectos, incluidos los más recientes y destacados.
  • Comienza con una plantilla de nuestra selección curada.
  • Personaliza tu experiencia viendo y editando tu perfil.
  • Administra tu cuenta para revisar tus créditos mensuales y ajustar la configuración.
  • Experimenta con Labs y funciones como Chat mode; actívalas o desactívalas.
  • Amplía o reduce tu plan sin complicaciones.
En Lovable, cada proyecto sigue un flujo de trabajo estructurado:
  • Edita fácilmente usando una interfaz basada en chat.
  • Adjunta imágenes para ediciones precisas e inspiración.
  • Selecciona y edita visualmente componentes para una experiencia de diseño fluida.
  • Cambia sin esfuerzo entre el modo de edición y Chat mode.
  • Realiza un seguimiento de los cambios con el historial de versiones y vuelve a cualquier versión anterior.
  • Navega por las páginas de tu proyecto con facilidad.
  • Habilita la creación de un remix o cambia el nombre de tu proyecto según sea necesario.
  • Usa Lovable Cloud (o intégralo con Supabase) para funcionalidades de backend.
  • Colabora a través de GitHub para editar y gestionar tu código.
  • Publica, despliega y comparte tu proyecto con un enlace de vista previa (recuerda volver a publicarlo después de los cambios).
  • Alterna entre la vista web y la móvil para un diseño responsive.
  • Actualiza la ventana de vista previa para ver las actualizaciones al instante.
  • Abre tu proyecto directamente usando el enlace de vista previa.
La configuración de cada proyecto te permite:
  • Ver los detalles clave del proyecto, como el total de ediciones y la fecha de creación.
  • Configurar conocimiento personalizado para adaptar el contexto de tu proyecto.
  • Conectarte a un repositorio de GitHub para una colaboración fluida.
  • Ajustar la visibilidad del proyecto según sea necesario.
  • Gestionar la visualización de la insignia (disponible solo para planes de pago).
  • Cambiar el nombre de tu proyecto en cualquier momento.
  • Eliminar tu proyecto (⚠️ Zona de peligro).
Siempre puedes acceder rápidamente a:
  • Panel para una vista general de tus proyectos.
  • Configuración de la cuenta para gestionar tu perfil y preferencias.
  • Documentación y Soporte para orientación y ayuda.
  • Cerrar sesión de forma segura en tu cuenta de Lovable.

​
Inicia tu proyecto

Hay varias formas de empezar con Lovable, según tus preferencias y recursos:
El sistema basado en instrucciones de Lovable hace que crear aplicaciones sea sencillo.
  • Solo describe lo que quieres construir en el cuadro de instrucción.
  • Cuanto más específico seas, mejores serán los resultados.
  • Empieza con instrucciones claras y detalladas.
  • Puedes perfeccionar y ajustar tu proyecto sobre la marcha.
Ejemplo:“Crea un panel con inicio de sesión de usuario, ventas mensuales en un gráfico de líneas y datos demográficos de clientes en un gráfico circular.”
Puedes remezclar un proyecto público existente o uno tuyo. La creación de un remix te permite reutilizar el estado actual de un proyecto como punto de partida y construir sobre él. Es una excelente forma de explorar nuevas ideas, hacer ajustes o iterar con cambios distintos mientras conservas la versión original.
Solo puedes remezclar proyectos públicos de otros usuarios si el proyecto no está conectado a Supabase.
Si tienes un diseño en Figma, haz una captura de pantalla de cualquier parte de él. Puedes pegar la captura directamente en Lovable o arrastrar y soltar el archivo de imagen. Una vez que pulses Enter, Lovable convertirá tu diseño en código funcional.
1

Paso 1

Usa Excalidraw o cualquier herramienta similar para esbozar tu interfaz de usuario (UI).
2

Paso 2

Haz una captura de pantalla de tu dibujo y luego pégala o arrástrala y suéltala en Lovable. La plataforma transformará tu boceto en código funcional.
Más información aquí.
Si quieres replicar una página web existente:
1

Paso 1

Haz una captura de pantalla usando atajos como Cmd+Shift+4 en Mac o herramientas como la extensión de Chrome GoFullPage.
2

Paso 2

Pega o arrastra la captura de pantalla a Lovable. Lovable recreará la estructura de la página web en tu proyecto.
Más información aquí.

​
Edita tu proyecto

El conocimiento personalizado en Lovable actúa como el plano de tu proyecto, organizando funcionalidad, diseño y objetivos en un solo lugar.
Visual Edits te permite seleccionar elementos en la página y editarlos al instante, como actualizar texto o colores, o usar indicaciones para ajustar la funcionalidad y el diseño.Consulta Visual Edits para obtener más información.
La velocidad importa cuando creas aplicaciones con IA, pero la estabilidad y el control también. Por eso hemos mejorado el versionado para que el seguimiento de cambios sea sencillo.
1

Revertir a versiones anteriores al instante o usar un enfoque diferente

Puedes obtener una vista previa de una versión anterior que funcione y luego revertir a esa versión si es necesario, o editar un mensaje anterior y revertir para explorar un enfoque diferente. No se pierde nada: todos los cambios realizados después de ese punto permanecen en el chat y pueden aplicarse de nuevo en cualquier momento.
2

Marcar ediciones clave como favoritas

Mantén tu trabajo organizado marcando como favoritas las ediciones importantes, lo que facilita encontrarlas y volver a ellas más tarde.
3

Historial de versiones intuitivo

El panel de historial ahora funciona como Google Docs, lo que facilita el seguimiento de los cambios.
Adjunta imágenes directamente al chat para añadir contexto a tus indicaciones. Esto facilita ilustrar ideas o conceptos que es mejor mostrar que describir.
Integra tu proyecto con GitHub para iterar en tu aplicación sin problemas. Puedes hacer cambios de código en GitHub o en tu IDE preferido mientras mantienes todo sincronizado con Lovable.
Consulta integración con GitHub para obtener más información.

​
Agrega capacidades full‑stack a tu proyecto

Si necesitas agregar capacidades de backend a tu aplicación, puedes:
Hay muchas maneras de conectar Stripe con Lovable, pero la forma más sencilla es usar los enlaces de pago integrados de Stripe. Consulta la integración con Stripe para obtener más información.
Consulta la integración con Resend para obtener más información.

​
Despliega y publica tu proyecto

Garantiza los mejores resultados siguiendo nuestra guía Implementar las mejores prácticas de SEO y GEO.
Puedes agregar un dominio personalizado con:
  • Entri (nativo de Lovable)
  • Netlify
  • Vercel
  • Namecheap
Consulta Dominio personalizado para obtener más información.
Cuando tu proyecto esté listo, publícalo para generar una URL para compartir. Esto facilita mostrar tu aplicación o compartirla con colaboradores y partes interesadas.
Consulta Publicar para obtener más información.