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

# Inicio rápido

> De simples palabras a un sitio web full-stack.

Bienvenido a esta guía de inicio rápido para crear un sitio web full-stack con Lumi.

## Página de inicio

<img src="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250821-202133.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=97442ddf98e65bf43b19ba56f6c17969" alt="20250821 202133 Jpe" width="3824" height="1682" data-path="images/20250821-202133.jpeg" />

La página de inicio contiene principalmente:

<Columns cols={2}>
  <Card title="Comienza con una instrucción" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-154846.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=e8fafb96d5faa0c0ec43a0a0dfdb5f05" width="1618" height="358" data-path="images/screenshot-20250825-154846.png">
    Inicia tu proyecto con una única y descriptiva instrucción.
  </Card>

  <Card title="Usa una plantilla" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-154857.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=3a4d7d4389fbc89e96b9014357cb3e40" width="1336" height="98" data-path="images/screenshot-20250825-154857.png">
    Acelera el desarrollo comenzando desde nuestra colección seleccionada de plantillas.
  </Card>

  <Card title="Explora la comunidad" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-155003.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=2ea3bc083fb9a17998db34d75529494f" width="2970" height="1608" data-path="images/screenshot-20250825-155003.png">
    Navega por todos los proyectos públicos, incluidas las últimas creaciones y las selecciones destacadas.
  </Card>

  <Card title="Encuentra tus proyectos" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-155110.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=f069a5eb78bea9ca0f234038acd526eb" width="3824" height="1916" data-path="images/screenshot-20250825-155110.png">
    Navega por todos los proyectos que has creado.
  </Card>

  <Card title="Gestiona tu cuenta" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155323.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=611896281375aa724b885f4f28c03ea8" width="3822" height="1916" data-path="images/20250825-155323.jpeg">
    Consulta tu saldo de crédito mensual y ajusta la configuración de la cuenta.
  </Card>

  <Card title="Ajusta tu plan" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155328.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=20009fa87973936ecda6032924e5754e" width="3822" height="1916" data-path="images/20250825-155328.jpeg">
    Actualiza o degrada tu suscripción sin problemas en cualquier momento.
  </Card>
</Columns>

## Página del proyecto

<img src="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/screenshot-20250825-160241.png?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=a3ad5075591b6b38cc9c65aeb1b99c90" alt="Screenshot 20250825 160241 Pn" width="3814" height="1916" data-path="images/screenshot-20250825-160241.png" />

La página del proyecto se divide en 3 secciones principales:

<Columns cols={2}>
  <Card title="El chat de IA" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155522.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=d3231c7a4837f6899fe90820a7ad4f0e" width="3840" height="1916" data-path="images/20250825-155522.jpeg">
    Este es tu centro de mando para interactuar con Lumi. Úsalo para dar instrucciones, solicitar cambios, generar ideas y guiar el desarrollo de tu aplicación.
  </Card>

  <Card title="Vista previa" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155526.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=5eb8c40ef71ecde175fb7e9b367e2abd" width="3840" height="1916" data-path="images/20250825-155526.jpeg">
    Esta es una vista en vivo, interactiva y totalmente personalizable de tu web. Haz clic en cualquier elemento para probar su funcionalidad o realizar ajustes directos con el editor visual.
  </Card>

  <Card title="Espacio de trabajo" img="https://mintcdn.com/blockdance/ynWgEA-zeP9dMZPg/images/20250825-155529.jpeg?fit=max&auto=format&n=ynWgEA-zeP9dMZPg&q=85&s=8efc9e5f82cc14c5604ff02d1d8751a5" width="3840" height="1916" data-path="images/20250825-155529.jpeg">
    Esto incluye información sobre tu sitio web, funciones de backend, uso de herramientas, nombre de dominio, seguridad, etc.
  </Card>
</Columns>

## El chat de IA

La acción principal del chat de IA es usar instrucciones en lenguaje natural para construir y refinar tu aplicación. Sin embargo, hay elementos en la parte inferior del cuadro de entrada para explorar un poco más.

<img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/Result_2.png?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=fbc0b4aeff6eb6c9b60e894f13bc99de" alt="Result 2 Pn" width="1604" height="338" data-path="images/Result_2.png" />

<u>Nota</u>: Por cada instrucción que ingreses, puedes volver al chat y hacer clic en “Revertir esto” en cualquier momento para deshacer tu instrucción. Se te pedirá que confirmes tu solicitud y luego la aplicación volverá al estado en el que se encontraba justo antes de ese punto.

<Note>
  **<u>Nota:</u>** Por cada instrucción que ingreses, puedes volver al chat y hacer clic en “Revertir” en cualquier momento para deshacer tu instrucción. Se te pedirá que confirmes tu solicitud y luego la aplicación volverá al estado en el que se encontraba justo antes de ese punto.

  <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-154652.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=5ba3ab426454dfb5f020b99d199d6f32" alt="20250911 154652 Jpe" width="960" height="450" data-path="images/20250911-154652.jpeg" />
</Note>

## Construyendo tu primera aplicación: paso a paso

<Steps>
  <Step title="Comienza con una instrucción clara">
    Describe la función principal de tu aplicación en un lenguaje sencillo.

    Por ejemplo:

    ```mdx theme={null}
    Crea un gestor de tareas para que los equipos asignen, sigan y completen tareas con informes de progreso.
    ```
  </Step>

  <Step title="Genera tu aplicación al instante">
    Lumi construirá automáticamente la interfaz y el backend de tu aplicación. Puedes ver el proceso desarrollarse en vivo en el panel de Vista previa.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-155051.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=e12430ce9ede5193248a77c6c56a4cfb" alt="20250911 155051 Jpe" width="3840" height="1916" data-path="images/20250911-155051.jpeg" />
  </Step>

  <Step title="Refina y personaliza">
    Usa el chat de IA para ajustes generales o las [Ediciones visuales](/es/features/visual-edits) para afinar detalles como colores y diseño. Activa el [Modo de discusión](/es/features/modes#discuss-mode) para colaborar con la IA en lógicas complejas antes de la implementación.
  </Step>

  <Step title="Prueba a fondo">
    Interactúa con tu sitio web en el panel de Vista previa como lo haría un usuario, haciendo clic en cada función para asegurarte de que funcione perfectamente.
  </Step>

  <Step title="Comparte y publica">
    Una vez que estés listo para lanzarlo, haz clic en el botón "Publicar" para desplegar tu sitio y mostrarlo al mundo.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-160827.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=7fd2a73b38e219cc8fcfbb818cac7fe7" alt="20250911 160827 Jpe" width="2896" height="1702" data-path="images/20250911-160827.jpeg" />
  </Step>
</Steps>
