Primeiros passos

Do primeiro Prompt de IA ao app full stack

​

Visão geral do Lovable

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

​

Visão geral da plataforma Lovable

Crie seu primeiro projeto

1. Step 1

   Para começar, acesse lovable.dev e crie uma conta. Depois de se registrar, você poderá criar seu primeiro projeto.

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

Dashboard da Lovable

Na Lovable, a simplicidade é fundamental:

• Aqui 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 para conferir créditos mensais e ajustar configurações.
• Experimente recursos do Labs, como o Chat mode — ative ou desative.
• Atualize ou reduza seu plano com facilidade.

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.

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

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.

​

Inicie seu projeto

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

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.

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

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.

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

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.

Usando um esboço

1. Etapa 1

   Use o Excalidraw ou qualquer ferramenta semelhante para esboçar sua UI.

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

Mais informações aqui.

Clonando um site ou aplicativo

Se você quiser replicar uma página da web existente:

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

2. Etapa 2

   Cole ou arraste a captura de tela no Lovable. O Lovable recriará a estrutura da página da web no seu projeto.

Mais informações aqui.

​

Edite seu projeto

Adicionar conhecimento personalizado ao seu projeto

O Custom knowledge no Lovable funciona como o plano mestre do seu projeto, organizando funcionalidade, design e objetivos em um só lugar.

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 para mais informações.

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.

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

2. Favoritar edições importantes

   Mantenha seu trabalho organizado favoritando edições importantes, facilitando encontrá-las e revisitá-las depois.

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

   

Adicionar componente de animação com 21st dev

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.

Adicionar uma nova página ao seu projeto

Refatorar código

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.

Veja Integração com GitHub para mais informações.

​

Adicione funcionalidades full stack ao seu projeto

Conecte um backend

Se você precisar adicionar funcionalidades de backend à sua aplicação, você pode:

• Conectar ao backend integrado do Lovable -  Lovable Cloud
• Usar a integração nativa com Supabase do Lovable

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 para mais informações.

Adicione funcionalidades de e-mail com Resend

Consulte a integração com Resend para mais informações.

​

Fazer deploy e publicar seu projeto

Configurar SEO

Garanta os melhores resultados seguindo nosso guia Implementar as melhores práticas de SEO e GEO.

Adicionar um domínio personalizado

Você pode adicionar um domínio personalizado com:

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

Consulte Domínio personalizado para mais informações.

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.

Consulte Publicar para mais informações.