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

# Primeiros passos

> Do primeiro Prompt de IA ao app full stack

<div id="overview-of-lovable">
  ## Visão geral do Lovable
</div>

Bem-vindo a este guia passo a passo para criar um aplicativo full stack usando o Lovable:

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

<div id="the-lovable-platform-overview">
  ### Visão geral da plataforma Lovable
</div>

<AccordionGroup>
  <Accordion title="Crie seu primeiro projeto">
    <Steps>
      <Step title="Step 1">
        Para começar, acesse [lovable.dev](https://lovable.dev) e crie uma conta. Depois de se registrar, você poderá criar seu primeiro projeto.
      </Step>

      <Step title="Step 2">
        Basta inserir um Prompt de IA inicial para começar, e a Lovable fará o resto! Este é o **ponto de partida** para qualquer projeto na Lovable, onde você pode dar vida às suas ideias instantaneamente.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Dashboard da Lovable">
    Na Lovable, a simplicidade é fundamental:

    * [**Aqui**](https://lovable.dev/) **você inicia seu projeto** com um único Prompt de IA.
    * **Explore todos os projetos**, incluindo os mais recentes e em destaque.
    * **Comece com um modelo** da nossa seleção curada.
    * **Personalize sua experiência** visualizando e editando seu perfil.
    * [**Gerencie sua conta**](https://lovable.dev/settings) para conferir créditos mensais e ajustar configurações.
    * **Experimente recursos do** [**Labs**](https://lovable.dev/settings/account)**, como o Chat mode — ative ou desative.**
    * [**Atualize ou reduza**](https://lovable.dev/settings/plans) **seu plano** com facilidade.
  </Accordion>

  <Accordion title="Visão geral do projeto">
    Na Lovable, cada projeto segue um fluxo de trabalho estruturado:

    * **Edite com facilidade** usando uma interface baseada em chat.
    * **Anexe imagens** para edições precisas e inspiração.
    * **Selecione e edite componentes visualmente** para uma experiência de design fluida.
    * **Alterne sem esforço** entre o modo de edição e o Chat mode.
    * **Acompanhe alterações** com o histórico de versões e reverta para qualquer versão anterior.
    * **Navegue pelas páginas** do seu projeto com facilidade.
    * **Ative o Remixar** ou renomeie seu projeto conforme necessário.
    * **Use o Lovable Cloud** (ou integre com o Supabase) para recursos de backend.
    * **Colabore via GitHub** para editar e gerenciar seu código.
    * **Publique, faça o deploy e compartilhe** seu projeto com um link de pré-visualização (lembre-se de republicar após alterações).
    * **Alterne entre visualização web e mobile** para um design responsivo.
    * **Atualize o modal de pré-visualização** para ver as mudanças instantaneamente.
    * **Abra seu projeto diretamente** usando o link de pré-visualização.
  </Accordion>

  <Accordion title="Configurações do projeto">
    As configurações de cada projeto permitem que você:

    * **Veja detalhes importantes do projeto**, como total de edições e data de criação.
    * **Configure conhecimento personalizado** para adaptar o contexto do seu projeto.
    * **Conecte a um repositório GitHub** para colaboração contínua.
    * **Ajuste a visibilidade do projeto** conforme necessário.
    * **Gerencie a exibição do badge** (disponível apenas para planos pagos).
    * **Renomeie seu projeto** a qualquer momento.
    * **Exclua seu projeto** (⚠️ Zona de perigo).
  </Accordion>

  <Accordion title="Acesso rápido ao projeto">
    Você sempre pode acessar rapidamente:

    * **Dashboard** para uma visão geral dos seus projetos.
    * **Configurações da conta** para gerenciar seu perfil e preferências.
    * **Documentação e Suporte** para orientação e assistência.
    * **Saia** com segurança da sua conta Lovable.
  </Accordion>
</AccordionGroup>

<div id="start-your-project">
  ### Inicie seu projeto
</div>

Há várias maneiras de começar a usar o Lovable, dependendo das suas preferências e recursos:

<AccordionGroup>
  <Accordion title="Prompt de IA">
    O sistema de prompts de IA do Lovable torna a criação de apps simples.

    * Basta descrever o que você quer construir no campo de prompt.
    * Quanto mais específico você for, melhores serão os resultados.
    * Comece com prompts claros e detalhados.
    * Você pode refinar e ajustar seu projeto ao longo do caminho.

    <Info>
      Exemplo:

      *"Crie um dashboard com login de usuário, vendas mensais em um gráfico de linha e dados demográficos de clientes em um gráfico de pizza."*
    </Info>
  </Accordion>

  <Accordion title="Remixar um projeto existente">
    Você pode remixar um projeto público existente ou um dos seus. Remixar permite reutilizar o estado atual de um projeto como ponto de partida e desenvolver a partir dele. É uma ótima maneira de explorar novas ideias, fazer ajustes ou iterar com diferentes alterações, preservando a versão original.

    <Note>
      Você só pode remixar projetos públicos de outros usuários se o projeto não estiver conectado ao Supabase.
    </Note>
  </Accordion>

  <Accordion title="Usando Figma">
    Se você tiver um design no Figma, faça uma captura de tela de qualquer parte dele. Você pode colar a captura diretamente no Lovable ou arrastar e soltar o arquivo de imagem. Assim que você pressionar Enter, o Lovable converterá seu design em código funcional.
  </Accordion>

  <Accordion title="Usando um esboço">
    <Steps>
      <Step title="Etapa 1">
        Use o [**Excalidraw**](https://excalidraw.com/) ou qualquer ferramenta semelhante para esboçar sua UI.
      </Step>

      <Step title="Etapa 2">
        Faça uma captura de tela do seu desenho e depois cole ou arraste e solte a imagem no Lovable. A plataforma transformará seu esboço em código funcional.
      </Step>
    </Steps>

    [Mais informações aqui.](https://www.youtube.com/watch?v=c0zhLzcVJRI)
  </Accordion>

  <Accordion title="Clonando um site ou aplicativo">
    Se você quiser replicar uma página da web existente:

    <Steps>
      <Step title="Etapa 1">
        Faça uma captura de tela usando atalhos como *Cmd+Shift+4* no Mac ou ferramentas como a [Extensão GoFullPage para Chrome](https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl).
      </Step>

      <Step title="Etapa 2">
        Cole ou arraste a captura de tela no Lovable. O Lovable recriará a estrutura da página da web no seu projeto.
      </Step>
    </Steps>

    [Mais informações aqui.](https://www.youtube.com/watch?v=tYDqBMilHkM)
  </Accordion>
</AccordionGroup>

<div id="edit-your-project">
  ### Edite seu projeto
</div>

<AccordionGroup>
  <Accordion title="Adicionar conhecimento personalizado ao seu projeto">
    O [Custom knowledge](/pt-BR/features/knowledge) no Lovable funciona como o **plano mestre** do seu projeto, organizando funcionalidade, design e objetivos em um só lugar.
  </Accordion>

  <Accordion title="Use o Visual Edits">
    O Visual Edits permite que você selecione elementos na página e os edite na hora, como atualizar textos ou cores, ou usar Prompts de IA para ajustar funcionalidade e layout.

    Veja [Visual Edits](https://docs.lovable.dev/features/visual-edit) para mais informações.
  </Accordion>

  <Accordion title="Reverter uma alteração ou editar uma mensagem e reverter para usar uma abordagem diferente">
    Velocidade é importante ao criar apps com IA, mas estabilidade e controle também são. Por isso, aprimoramos o controle de versão para tornar o acompanhamento de alterações mais simples.

    <Steps>
      <Step title="Reverter para versões anteriores instantaneamente ou seguir com uma abordagem diferente">
        Você pode ver uma versão anterior em funcionamento e reverter para ela se necessário, ou editar uma mensagem antiga e reverter para explorar uma abordagem diferente. Nada é perdido — todas as alterações feitas depois desse ponto permanecem no chat e podem ser reaplicadas a qualquer momento.
      </Step>

      <Step title="Favoritar edições importantes">
        Mantenha seu trabalho organizado favoritando edições importantes, facilitando encontrá-las e revisitá-las depois.
      </Step>

      <Step title="Histórico de versões intuitivo">
        O painel de histórico agora funciona como o Google Docs, tornando o acompanhamento de alterações mais fácil.

        <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="Adicionar componente de animação com 21st dev">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MJ9pB741sXw?si=7vPZVpe0TyHIgTLp" title="YouTube video player" 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="Adicionar imagens aos Prompts de IA">
    Anexe imagens diretamente ao chat para adicionar contexto aos seus Prompts de IA. Isso facilita ilustrar ideias ou conceitos que são melhor mostrados do que descritos.

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

  <Accordion title="Adicionar uma nova página ao seu projeto">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/h6vnvFKzd0Y?si=cw_zapDQW3hQfVOc" title="YouTube video player" 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="Refatorar código">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/epVlkdNSVrs?si=ufy8WTXkPcpbhkW6" title="YouTube video player" 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 ao GitHub">
    Integre seu projeto com o GitHub para iterar no seu aplicativo de forma contínua. Você pode fazer alterações de código no GitHub ou na sua IDE preferida enquanto mantém tudo sincronizado com o Lovable.

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

    Veja [Integração com GitHub](https://docs.lovable.dev/integrations/git-integration) para mais informações.
  </Accordion>
</AccordionGroup>

<div id="add-fullstack-capabilities-to-your-project">
  ### Adicione funcionalidades full stack ao seu projeto
</div>

<AccordionGroup>
  <Accordion title="Conecte um backend">
    Se você precisar adicionar funcionalidades de backend à sua aplicação, você pode:

    * Conectar ao backend integrado do Lovable -  [Lovable Cloud](https://docs.lovable.dev/features/cloud)
    * Usar a [integração nativa com Supabase](https://docs.lovable.dev/integrations/supabase) do Lovable
  </Accordion>

  <Accordion title="Adicione funcionalidades de pagamento à sua aplicação com Stripe">
    Há várias maneiras de integrar o Stripe ao Lovable, mas a forma mais simples é usar os links de pagamento nativos do Stripe. Consulte a [integração com Stripe](https://docs.lovable.dev/integrations/stripe) para mais informações.
  </Accordion>

  <Accordion title="Adicione funcionalidades de e-mail com Resend">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/w5Xq-Kvt3J0?si=wdSxtbhg3-uH3NZt" title="Reprodutor de vídeo do YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

    Consulte a [integração com Resend](https://docs.lovable.dev/integrations/resend) para mais informações.
  </Accordion>
</AccordionGroup>

<div id="deploy-and-publish-your-project">
  ### Fazer deploy e publicar seu projeto
</div>

<AccordionGroup>
  <Accordion title="Configurar SEO">
    Garanta os melhores resultados seguindo nosso guia [Implementar as melhores práticas de SEO e GEO](https://docs.lovable.dev/tips-tricks/seo-geo).
  </Accordion>

  <Accordion title="Adicionar um domínio personalizado">
    Você pode adicionar um domínio personalizado com:

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

    Consulte [Domínio personalizado](https://docs.lovable.dev/features/custom-domain) para mais informações.
  </Accordion>

  <Accordion title="Publicar meu projeto">
    Quando seu projeto estiver pronto, publique-o para gerar uma URL compartilhável. Isso facilita apresentar seu app ou compartilhá-lo com colaboradores e outras partes interessadas.

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

    Consulte [Publicar](https://docs.lovable.dev/features/publish) para mais informações.
  </Accordion>
</AccordionGroup>