> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Primeros pasos

> De la primera instrucción a tu app full‑stack

<div id="overview-of-lovable">
  ## Descripción general de Lovable
</div>

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

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/lovable-dashboard.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=9740705cec0501ed75b6bddb02ad9dd1" alt="Panel de Lovable Pn" width="2376" height="1748" data-path="images/lovable-dashboard.png" />

<div id="the-lovable-platform-overview">
  ### Descripción general de la plataforma Lovable
</div>

<AccordionGroup>
  <Accordion title="Crea tu primer proyecto">
    <Steps>
      <Step title="Paso 1">
        Para comenzar, ve a [lovable.dev](https://lovable.dev) y crea una cuenta. Una vez registrado, podrás crear tu primer proyecto.
      </Step>

      <Step title="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.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Panel de Lovable">
    En Lovable, la simplicidad es clave:

    * [**Aquí**](https://lovable.dev/) **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**](https://lovable.dev/settings) para revisar tus créditos mensuales y ajustar la configuración.
    * **Experimenta con** [**Labs**](https://lovable.dev/settings/account) **y funciones como Chat mode**; actívalas o desactívalas.
    * [**Amplía o reduce**](https://lovable.dev/settings/plans) **tu plan** sin complicaciones.
  </Accordion>

  <Accordion title="Descripción general del proyecto">
    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.
  </Accordion>

  <Accordion title="Configuración del proyecto">
    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).
  </Accordion>

  <Accordion title="Acceso rápido al proyecto">
    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.
  </Accordion>
</AccordionGroup>

<div id="start-your-project">
  ### Inicia tu proyecto
</div>

Hay varias formas de empezar con Lovable, según tus preferencias y recursos:

<AccordionGroup>
  <Accordion title="Instrucción">
    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.

    <Info>
      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."*
    </Info>
  </Accordion>

  <Accordion title="Remezclar un proyecto existente">
    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.

    <Note>
      Solo puedes remezclar proyectos públicos de otros usuarios si el proyecto no está conectado a Supabase.
    </Note>
  </Accordion>

  <Accordion title="Usar Figma">
    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.
  </Accordion>

  <Accordion title="Usar un boceto">
    <Steps>
      <Step title="Paso 1">
        Usa [**Excalidraw**](https://excalidraw.com/) o cualquier herramienta similar para esbozar tu interfaz de usuario (UI).
      </Step>

      <Step title="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.
      </Step>
    </Steps>

    [Más información aquí.](https://www.youtube.com/watch?v=c0zhLzcVJRI)
  </Accordion>

  <Accordion title="Clonar un sitio web o una aplicación">
    Si quieres replicar una página web existente:

    <Steps>
      <Step title="Paso 1">
        Haz una captura de pantalla usando atajos como *Cmd+Shift+4* en Mac o herramientas como la [extensión de Chrome GoFullPage](https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl).
      </Step>

      <Step title="Paso 2">
        Pega o arrastra la captura de pantalla a Lovable. Lovable recreará la estructura de la página web en tu proyecto.
      </Step>
    </Steps>

    [Más información aquí.](https://www.youtube.com/watch?v=tYDqBMilHkM)
  </Accordion>
</AccordionGroup>

<div id="edit-your-project">
  ### Edita tu proyecto
</div>

<AccordionGroup>
  <Accordion title="Añadir conocimiento personalizado a tu proyecto">
    El [conocimiento personalizado](/es/features/knowledge) en Lovable actúa como el **plano** de tu proyecto, organizando funcionalidad, diseño y objetivos en un solo lugar.
  </Accordion>

  <Accordion title="Usar Visual Edits">
    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](https://docs.lovable.dev/features/visual-edit) para obtener más información.
  </Accordion>

  <Accordion title="Revertir un cambio o editar un mensaje y revertir para usar un enfoque diferente">
    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.

    <Steps>
      <Step title="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.
      </Step>

      <Step title="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.
      </Step>

      <Step title="Historial de versiones intuitivo">
        El panel de historial ahora funciona como Google Docs, lo que facilita el seguimiento de los cambios.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/history.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=b0b6b8829cd6db5c9b48c09e7c70aba4" alt="" width="391" height="37" data-path="images/history.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/redesign-history.jpeg?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=ff8031e1fe0ac2cf85b22ad5eb26065a" alt="" width="1512" height="982" data-path="images/redesign-history.jpeg" />
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Añadir componente de animación con 21st dev">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MJ9pB741sXw?si=7vPZVpe0TyHIgTLp" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="Añadir imágenes a la instrucción">
    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.

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/uaGnrK5Dkkc" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
  </Accordion>

  <Accordion title="Añadir una nueva página a tu proyecto">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/h6vnvFKzd0Y?si=cw_zapDQW3hQfVOc" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="Refactorizar código">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/epVlkdNSVrs?si=ufy8WTXkPcpbhkW6" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="Conectar con GitHub">
    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.

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/zgNkhU4SYgQ" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    Consulta [integración con GitHub](https://docs.lovable.dev/integrations/git-integration) para obtener más información.
  </Accordion>
</AccordionGroup>

<div id="add-fullstack-capabilities-to-your-project">
  ### Agrega capacidades full‑stack a tu proyecto
</div>

<AccordionGroup>
  <Accordion title="Conecta un backend">
    Si necesitas agregar capacidades de backend a tu aplicación, puedes:

    * Conectarte al backend integrado de Lovable:  [Lovable Cloud](https://docs.lovable.dev/features/cloud)
    * Usar la [integración nativa de Lovable con Supabase](https://docs.lovable.dev/integrations/supabase)
  </Accordion>

  <Accordion title="Agrega capacidades de pago a tu aplicación con Stripe">
    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](https://docs.lovable.dev/integrations/stripe) para obtener más información.
  </Accordion>

  <Accordion title="Agrega capacidades de correo electrónico con Resend">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/w5Xq-Kvt3J0?si=wdSxtbhg3-uH3NZt" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

    Consulta la [integración con Resend](https://docs.lovable.dev/integrations/resend) para obtener más información.
  </Accordion>
</AccordionGroup>

<div id="deploy-and-publish-your-project">
  ### Despliega y publica tu proyecto
</div>

<AccordionGroup>
  <Accordion title="Configura el SEO">
    Garantiza los mejores resultados siguiendo nuestra guía [Implementar las mejores prácticas de SEO y GEO](https://docs.lovable.dev/tips-tricks/seo-geo).
  </Accordion>

  <Accordion title="Agrega un dominio personalizado">
    Puedes agregar un dominio personalizado con:

    * Entri (nativo de Lovable)
    * Netlify
    * Vercel
    * Namecheap

    Consulta [Dominio personalizado](https://docs.lovable.dev/features/custom-domain) para obtener más información.
  </Accordion>

  <Accordion title="Publicar mi proyecto">
    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.

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/GFtWVXkZDTw" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    Consulta [Publicar](https://docs.lovable.dev/features/publish) para obtener más información.
  </Accordion>
</AccordionGroup>