> ## 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.

# Início Rápido

> De palavras simples a um site full-stack.

Bem-vindo a este guia de início rápido sobre como criar um site full-stack com o Lumi.

## Página Inicial

<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" />

A página inicial contém principalmente:

<Columns cols={2}>
  <Card title="Comece com um Prompt" 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">
    Inicie seu projeto com um único prompt descritivo.
  </Card>

  <Card title="Use um Modelo" 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">
    Acelere o desenvolvimento começando pela nossa coleção de modelos selecionados.
  </Card>

  <Card title="Explore a Comunidade" 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">
    Navegue por todos os projetos públicos, incluindo as criações mais recentes e seleções em destaque.
  </Card>

  <Card title="Encontre seus projetos" 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">
    Navegue por todos os projetos que você criou.
  </Card>

  <Card title="Gerencie sua Conta" 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">
    Verifique seu saldo de crédito mensal e ajuste as configurações da conta.
  </Card>

  <Card title="Ajuste seu Plano" 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">
    Faça upgrade ou downgrade da sua assinatura a qualquer momento, sem complicações.
  </Card>
</Columns>

## Página do Projeto

<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" />

A página do projeto é dividida em 3 seções principais:

<Columns cols={2}>
  <Card title="O 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 é o seu centro de comando para interagir com o Lumi. Use-o para fornecer instruções, solicitar alterações, ter ideias e guiar o desenvolvimento da sua aplicação.
  </Card>

  <Card title="Pré-visualização" 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 é uma visualização ao vivo, interativa e totalmente personalizável da sua web. Clique em qualquer elemento para testar sua funcionalidade ou fazer ajustes diretos com o editor visual.
  </Card>

  <Card title="Área de Trabalho" 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">
    Isso inclui informações sobre seu site, funções de backend, uso de ferramentas, nome de domínio, segurança, etc.
  </Card>
</Columns>

## O Chat de IA

A principal ação do chat de IA é usar prompts de linguagem natural para construir e refinar seu aplicativo. No entanto, existem elementos na parte inferior da caixa de entrada para explorar um pouco mais.

<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>Observação</u>: Para cada prompt que você inserir, você pode voltar ao chat e clicar em “Reverter Isso” a qualquer momento para desfazer seu prompt. Será solicitado que você confirme sua solicitação e, em seguida, o aplicativo reverterá para o estado em que estava antes desse ponto.

<Note>
  **<u>Observação:</u>** Para cada prompt que você inserir, você pode voltar ao chat e clicar em “Reverter” a qualquer momento para desfazer seu prompt. Será solicitado que você confirme sua solicitação e, em seguida, o aplicativo reverterá para o estado em que estava antes desse ponto.

  <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>

## Construindo seu primeiro aplicativo: passo a passo

<Steps>
  <Step title="Comece com um Prompt Claro">
    Descreva a função principal do seu aplicativo em linguagem simples.

    Por exemplo:

    ```mdx theme={null}
    Crie um gerenciador de tarefas para equipes atribuírem, acompanharem e concluírem tarefas com relatórios de progresso.
    ```
  </Step>

  <Step title="Gere seu Aplicativo Instantaneamente">
    O Lumi construirá automaticamente a interface e o backend do seu aplicativo. Você pode assistir ao processo se desenrolar ao vivo no painel de Pré-visualização.

    <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="Refine e Personalize">
    Use o Chat de IA para ajustes amplos ou as [Edições Visuais](/pt-BR/features/visual-edits) para ajustar detalhes como cores e layout. Ative o [Modo de Discussão](/pt-BR/features/modes#discuss-mode) para colaborar com a IA em lógicas complexas antes da implementação.
  </Step>

  <Step title="Teste Completamente">
    Interaja com seu site no painel de Pré-visualização como um usuário faria, clicando em cada recurso para garantir que funcione perfeitamente.
  </Step>

  <Step title="Compartilhe e Publique">
    Quando estiver pronto para lançar, clique no botão "Publicar" para implantar seu site e mostrá-lo ao 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>
