Como Criar Site com o Lovable e Publicar Grátis

O Lovable (que antes se chamava GPT Engineer) é uma plataforma de IA visual que cria aplicações web completas a partir de descrições em texto. Você escreve o que quer, e a ferramenta gera o código, monta a interface e entrega um projeto funcional — tudo sem que você precise escrever uma linha de código.

A interface é em inglês, mas o Lovable entende perfeitamente instruções em português. Você pode descrever seu site inteiro em PT-BR e ele vai entregar exatamente o que pediu.

Neste guia, vamos cobrir tudo: o que o Lovable consegue fazer, como usar passo a passo, como extrair o HTML para publicar em qualquer lugar, e como colocar seu site no ar de graça em menos de 10 segundos.

O que o Lovable consegue criar

O Lovable vai muito além de sites simples. Diferente de ferramentas como ChatGPT ou Gemini, que geram apenas código HTML para você copiar e colar, o Lovable monta projetos completos com interface visual, navegação entre páginas e até integração com banco de dados.

Veja o que ele consegue fazer:

Landing pages profissionais com animações e responsividade
Portfólios interativos com galerias de imagens
Dashboards com gráficos e tabelas de dados
Aplicações completas com autenticação (via Supabase)
Sites institucionais com múltiplas páginas
Páginas de evento, convite ou casamento
Ferramentas web simples (calculadoras, formulários, quizzes)

O que ele não faz tão bem:

E-commerce completo com gateway de pagamento nativo
Sistemas muito complexos com lógica de negócio elaborada
Sites que precisam de SEO avançado no server-side

Para a maioria dos casos de uso — especialmente se você quer um site bonito e funcional rápido — o Lovable resolve muito bem.

A grande vantagem sobre outras IAs é que você não precisa lidar com código. O Lovable tem um editor visual onde você vê o resultado em tempo real enquanto a IA trabalha. Isso torna a experiência muito mais acessível para quem nunca programou.

Como usar o Lovable passo a passo

Vamos ao que interessa. O processo é surpreendentemente simples.

1. Crie sua conta

Acesse lovable.dev e crie uma conta. Você pode entrar com Google ou email. O plano gratuito permite criar alguns projetos com limitações de mensagens por dia.

2. Crie um novo projeto

Na dashboard, clique em "New Project" ou use o campo de texto central. É aqui que você descreve o que quer.

3. Descreva seu site em detalhes

A qualidade do resultado depende diretamente da qualidade da sua descrição. Quanto mais específico você for, melhor o resultado.

Aqui vai um exemplo de prompt detalhado para um site de convite de casamento:

Crie um site de convite de casamento elegante e moderno para Maria e João.

O casamento será no dia 15 de março de 2027, às 16h, na Igreja
Matriz de São Paulo. A recepção será no Espaço Villa Real,
Rua das Flores 123.

O site deve ter:
- Hero section com uma foto de fundo desfocada, os nomes do casal
  em tipografia elegante e a data
- Seção "Nossa História" com um timeline bonito mostrando quando
  se conheceram (2020), primeiro encontro (2020), noivado (2025)
  e casamento (2027)
- Seção com detalhes da cerimônia e recepção, incluindo mapa do
  Google incorporado
- Formulário de confirmação de presença (nome, email, número de
  convidados, restrições alimentares)
- Seção de lista de presentes com link externo
- Paleta de cores: verde oliva, dourado e branco
- Fonte elegante tipo serif para títulos e sans-serif para corpo
- Totalmente responsivo para celular
- Animações suaves de scroll

O Lovable vai processar sua descrição e começar a gerar o projeto em tempo real. Você vai ver o código sendo escrito e a interface sendo montada simultaneamente.

4. Itere e refine

Depois que a primeira versão ficar pronta, você pode continuar conversando com a IA para ajustar detalhes:

"Mude a cor do fundo do hero para um tom mais escuro"
"Adicione um contador regressivo para a data do casamento"
"O formulário precisa ter um campo de mensagem para os noivos"
"Reduza o tamanho da fonte dos parágrafos no celular"

Cada pedido gera uma nova versão que você vê instantaneamente. Não precisa esperar, não precisa recarregar página — é tudo em tempo real.

5. Visualize e teste

O Lovable tem um preview embutido onde você pode ver o site funcionando. Teste em diferentes tamanhos de tela (desktop, tablet, celular) para garantir que está tudo certo.

Você também pode clicar no botão de compartilhamento para gerar um link temporário e mostrar para outras pessoas antes de publicar.

Como extrair o HTML do Lovable

Aqui vem um ponto importante. O Lovable gera projetos em React por padrão — não HTML puro. Isso significa que o código gerado usa componentes, JSX e um bundler. Para sites simples, isso pode ser mais do que você precisa.

Existem três formas de contornar isso:

Opção 1: Peça HTML puro desde o início

Na sua descrição inicial, seja explícito:

Crie este site como um ÚNICO arquivo HTML com todo o CSS inline
e JavaScript embutido. Não use React, não use frameworks.
Apenas HTML, CSS e JS puros em um único arquivo.

O Lovable vai respeitar essa instrução e gerar um arquivo HTML standalone que funciona em qualquer lugar. Essa é a opção mais simples se você quer publicar rapidamente.

Opção 2: Salve a página do preview

Se você já criou o projeto em React e não quer começar de novo:

Abra o preview do seu site no Lovable
Clique com o botão direito na página
Selecione "Salvar como..." (ou Ctrl+S)
Escolha "Página web completa" para salvar HTML + assets
Você vai ter um arquivo .html e uma pasta com CSS, JS e imagens

Essa abordagem funciona bem para sites simples. Para projetos mais complexos com navegação entre páginas, você pode precisar salvar cada página separadamente.

Opção 3: Use o deploy do Lovable e depois exporte

O Lovable permite fazer deploy direto para um subdomínio deles. Depois de publicado, você pode usar ferramentas como HTTrack ou wget para baixar o site completo como HTML estático:

wget --mirror --convert-links --page-requisites https://seu-projeto.lovable.app

Essa opção é mais técnica, mas garante que você captura todas as páginas e assets corretamente.

Qual opção escolher?

Para a maioria das pessoas, a Opção 1 é a melhor. Você evita complicações e já recebe um arquivo pronto para publicar. Se o seu site é simples (landing page, portfólio, convite), HTML puro resolve perfeitamente.

Se você precisa de algo mais complexo (dashboard, app com autenticação), talvez valha a pena manter o projeto em React e usar o deploy nativo do Lovable ou migrar para uma hospedagem que suporte React.

Lovable vs Bolt.new vs v0: comparativo

Existem várias ferramentas de IA para criar sites. Vamos comparar as três mais populares em 2026:

Característica	Lovable	Bolt.new	v0 (Vercel)
Interface visual	Sim, editor em tempo real	Sim, com preview	Parcial, mais focado em componentes
Curva de aprendizado	Baixa	Baixa	Média
Gera HTML puro	Sim (se pedido)	Sim (se pedido)	Não (foco em React/Next.js)
Preço	Freemium (msgs limitadas)	Freemium (tokens limitados)	Freemium (gerações limitadas)
Backend integrado	Sim (Supabase)	Sim (múltiplos)	Não diretamente
Qualidade visual	Excelente	Boa	Excelente
Entende português	Sim	Sim	Sim
Deploy nativo	Sim	Sim (Netlify)	Sim (Vercel)
Ideal para	Sites completos, apps	Prototipação rápida	Componentes UI, apps Next.js

Lovable se destaca pela experiência visual mais polida e pela integração com Supabase para backend. É a melhor opção se você quer criar algo mais completo sem código.

Bolt.new é ótimo para prototipação rápida. Você escreve, ele gera, você itera. Mais direto ao ponto, mas com menos refinamento visual.

v0 é focado em componentes React e projetos Next.js. Perfeito para desenvolvedores que querem acelerar o trabalho, mas menos acessível para iniciantes.

Para quem não programa e quer um site completo, o Lovable é provavelmente a melhor escolha. Para quem quer algo rápido e simples, qualquer uma das três funciona — desde que você saiba como usar IA para criar sites de forma eficiente.

Como publicar o site

Você criou seu site no Lovable, extraiu o HTML e agora quer colocar no ar. O processo é simples:

Acesse htmly.com.br — a plataforma de hospedagem de sites mais rápida do Brasil
Arraste o arquivo HTML (ou ZIP com todos os arquivos) para a área de upload
Em menos de 10 segundos, seu site está no ar com link compartilhável
Pronto. Sem configuração, sem servidor, sem complicação

O Htmly gera automaticamente um subdomínio do tipo seu-site.htmly.com.br com HTTPS incluso. Você pode compartilhar esse link imediatamente.

Se você quer um domínio próprio (como www.meusite.com.br), os planos pagos do Htmly suportam domínios personalizados com SSL automático.

E se o site tiver múltiplos arquivos?

Se você exportou o site como "página web completa" e tem uma pasta com CSS, imagens e JavaScript separados, basta compactar tudo em um arquivo ZIP e fazer o upload. O Htmly extrai automaticamente e serve todos os arquivos corretamente.

A estrutura ideal dentro do ZIP é:

meu-site/
  index.html
  style.css
  script.js
  images/
    foto1.jpg
    foto2.jpg

O index.html precisa estar na raiz do ZIP (ou dentro de uma única pasta raiz). O Htmly detecta automaticamente a estrutura.

Dicas para não-técnicos

O Lovable é provavelmente a ferramenta de IA mais acessível para quem nunca escreveu uma linha de código. Mas existem algumas dicas que fazem toda a diferença no resultado final.

Seja específico na descrição

Em vez de "crie um site para minha loja", diga:

Crie um site para uma loja de roupas femininas chamada Belle Mode.
A loja fica em Belo Horizonte. O site deve ter: hero com foto
de moda, seção de categorias (vestidos, blusas, calças, acessórios),
seção "Sobre nós" contando que a loja existe desde 2015, e rodapé
com endereço, telefone e links para Instagram e WhatsApp.
Paleta de cores: rosa claro, branco e dourado.

Quanto mais contexto você der, menos iterações vai precisar.

Descreva o visual, não o código

Você não precisa falar em termos técnicos. Em vez de "adicione um componente hero com background-image e overlay", diga "coloque uma foto grande no topo com o nome da loja por cima em letras brancas com sombra". O Lovable entende linguagem natural perfeitamente.

Use referências visuais

Se você tem um site que admira, mencione:

Quero algo com o estilo visual do site da Apple — minimalista,
muito espaço em branco, tipografia grande e fotos de alta qualidade.

Itere em pequenos passos

Não tente mudar tudo de uma vez. Faça um pedido por mensagem:

Primeiro: "Mude a cor do botão para verde"
Depois: "Aumente o tamanho do título"
Depois: "Adicione um ícone de telefone antes do número"

Pedidos pequenos e específicos geram resultados melhores do que pedidos grandes e vagos.

Teste no celular

Mais de 60% dos acessos a sites no Brasil vêm de dispositivos móveis. Sempre peça para o Lovable otimizar para celular e teste o preview em diferentes tamanhos de tela.

Não se preocupe com perfeição na primeira vez

A beleza das ferramentas de IA é que você pode iterar quantas vezes quiser. Se algo não ficou bom, é só pedir para mudar. Comece com o básico e vá refinando.

Se você é empreendedor e quer colocar seu negócio na internet rapidamente, o Lovable combinado com o Htmly é uma das formas mais rápidas de ter presença digital profissional.

Perguntas frequentes

O Lovable é gratuito?

Parcialmente. O plano gratuito permite criar projetos e usar um número limitado de mensagens por dia (geralmente 5-10 mensagens). Para uso mais intenso, existem planos pagos a partir de US$ 20/mês. Para criar um site simples, o plano gratuito costuma ser suficiente — você só precisa planejar bem suas mensagens.

O Lovable funciona em português?

Sim. A interface da plataforma é em inglês, mas a IA entende e gera conteúdo perfeitamente em português. Você pode escrever todas as suas instruções em PT-BR e o conteúdo do site será gerado em português. Os nomes de botões, menus e labels da interface do Lovable continuarão em inglês, mas isso não afeta o site que você está criando.

Posso editar o site depois de criado?

Sim, de duas formas. Dentro do Lovable, você pode continuar conversando com a IA para fazer alterações. Se você exportou o HTML e publicou no Htmly, pode usar o editor visual do Htmly para fazer ajustes diretamente no site publicado — mudar textos, cores, imagens — tudo sem mexer em código.

Como exporto o site do Lovable?

A forma mais simples é pedir para o Lovable criar o site como HTML puro (arquivo único com CSS inline). Basta incluir essa instrução no prompt. Se o projeto já foi criado em React, você pode salvar a página do preview usando Ctrl+S no navegador. Para projetos mais complexos, use o deploy nativo e depois baixe com ferramentas como wget.

Quanto custa hospedar o site depois?

No Htmly, a hospedagem básica é gratuita. Você faz upload do HTML, recebe um link com HTTPS e pode compartilhar imediatamente. Se quiser domínio próprio e recursos avançados como proteção por senha e editor de código, existem planos a partir de R$ 12/mês. Muito mais barato que qualquer hospedagem tradicional.

Crie seu site agora

O caminho mais rápido de uma ideia para um site publicado na internet em 2026 passa por ferramentas de IA como o Lovable. Você descreve o que quer, a IA constrói, você refina com conversas naturais, exporta o HTML e publica no Htmly em segundos.

Não precisa saber programar. Não precisa contratar um desenvolvedor. Não precisa gastar semanas aprendendo WordPress.

Experimente agora:

Acesse lovable.dev e crie seu projeto
Exporte como HTML seguindo as instruções deste guia
Publique grátis no Htmly em menos de 10 segundos

Se quiser explorar outras opções de IA para criar sites, veja nosso guia completo sobre sites gerados por IA: a tendência de 2026. E se preferir começar com um modelo pronto, confira nossos templates HTML editáveis.

Leia também: