Criar site com o Gemini (Google IA) grátis

O Google Gemini consegue criar sites HTML completos, responsivos e bonitos a partir de uma descrição em texto. Você descreve o que quer, o Gemini gera o código, e em menos de 1 minuto você tem um site funcional.

O melhor? É grátis. E publicar o resultado na internet também pode ser — em menos de 10 segundos.

Neste guia, vamos cobrir o passo a passo completo: desde o prompt certo até o site online com link compartilhável.

O que o Gemini consegue criar

Antes de começar, é importante entender o que esperar. O Gemini gera sites estáticos — páginas HTML com CSS e JavaScript. Isso inclui:

Landing pages para negócios
Portfólios profissionais
Sites institucionais (sobre, serviços, contato)
Cardápios digitais para restaurantes
Páginas de evento ou convite
Trabalhos acadêmicos interativos

O que ele não faz (pelo menos não diretamente):

E-commerce com carrinho de compras
Sistemas com login e banco de dados
Blogs com CMS (como WordPress)
Aplicações web complexas

Para sites simples — que são a maioria dos casos — o Gemini resolve perfeitamente.

Método 1: Gemini Chat (gerar HTML via conversa)

A forma mais direta. Abra o Gemini no navegador e peça para criar seu site.

Passo a passo

1. Acesse o Gemini

Vá para gemini.google.com e faça login com sua conta Google. O acesso é gratuito.

2. Escreva um prompt detalhado

Quanto mais específico, melhor o resultado. Veja um exemplo:

"Crie um site HTML responsivo para uma clínica de estética chamada Bella Pele. Inclua: hero com nome e tagline 'Realce sua beleza natural', seção de tratamentos (limpeza de pele, peeling, botox, preenchimento — com descrição curta de cada), seção sobre a clínica com 2 parágrafos, depoimentos de 3 clientes, horário de funcionamento (segunda a sábado, 8h-19h), endereço (Av. Paulista, 1000 — São Paulo), botão flutuante de WhatsApp (5511999999999). Design moderno, cores rosa-claro e branco, fonte elegante. Meta tags para SEO e Open Graph. Tudo em um único arquivo HTML com CSS embutido."

3. Copie o código gerado

O Gemini vai exibir o código HTML completo. Clique no botão de copiar (ícone de cópia no canto do bloco de código).

4. Salve como arquivo HTML

Abra o Bloco de Notas (Windows) ou TextEdit (Mac). Cole o código. Salve como index.html.

Atenção no Bloco de Notas: antes de salvar, mude "Tipo" para "Todos os arquivos (*.*)". Senão o arquivo fica como index.html.txt e não funciona.

5. Teste no navegador

Abra o arquivo index.html no Chrome (duplo-clique ou arraste para a janela). Confira se está tudo certo — textos, layout, responsividade (redimensione a janela para simular o celular).

6. Publique no Htmly

Acesse htmly.com.br, arraste o arquivo e receba seu link em segundos.

Dicas para prompts melhores

A qualidade do site depende diretamente do prompt. Estas dicas fazem diferença:

Estruture por seções. Liste cada seção que quer: hero, sobre, serviços, depoimentos, contato. Isso evita que o Gemini invente uma estrutura aleatória.

Defina cores e estilo. "Moderno e minimalista" gera um resultado muito diferente de "elegante e clássico". Se tiver cores específicas, use códigos hex: "cor principal #6366f1, fundo #fafafa".

Peça responsividade. Sempre inclua "responsivo" ou "mobile-first". Sem isso, o site pode não funcionar bem no celular.

Peça meta tags. "Inclua meta tags para SEO e Open Graph" faz o link ter preview bonito quando compartilhado no WhatsApp e redes sociais.

Peça tudo em um arquivo. "Tudo em um único arquivo HTML com CSS embutido" simplifica o upload — um arquivo só, sem complicação.

Itere. O primeiro resultado raramente é perfeito. Peça ajustes:

"Mude a cor do fundo para branco"
"Adicione uma seção de FAQ"
"Aumente o tamanho da fonte dos títulos"
"Adicione um mapa do Google Maps embutido"

Cada ajuste leva segundos. Em 10-15 minutos você chega num resultado profissional.

Método 2: Gemini Canvas (edição visual)

O Gemini Canvas é um recurso mais recente que permite editar o código gerado visualmente, lado a lado com a conversa. Em vez de só receber um bloco de código, você vê o preview do site enquanto pede alterações.

Como usar

No Gemini, peça para criar o site normalmente
Se o Gemini oferecer a opção "Canvas", clique para abrir
Você verá o código à esquerda e o preview à direita
Peça ajustes via chat — o canvas atualiza em tempo real
Quando estiver satisfeito, copie o código final

Vantagem: ver o resultado enquanto itera é muito mais rápido do que copiar o código toda vez para testar no navegador.

Limitação: nem sempre o Canvas está disponível. Depende da versão do Gemini e do tipo de prompt.

Gemini vs ChatGPT vs Claude: comparativo

Se você está decidindo qual IA usar para criar sites, aqui está a comparação honesta:

Critério	Gemini	ChatGPT	Claude
Preço	Grátis	Grátis (GPT-3.5) / US$ 20/mês (GPT-4)	Grátis com limites / US$ 20/mês
Qualidade do HTML	Boa para sites simples	Muito boa (GPT-4)	Excelente, código limpo
Responsividade	Geralmente inclui	Geralmente inclui	Geralmente inclui
Pesquisa integrada	Sim (diferencial)	Sim (com browsing)	Não
Canvas/Preview	Sim (Gemini Canvas)	Não nativo	Não nativo
Iteração	Boa	Muito boa	Excelente
Melhor para	Sites simples, quem já usa Google	Projetos variados, versatilidade	Código limpo, projetos maiores

Para a maioria das pessoas, qualquer uma das três resolve. A diferença de resultado entre elas é menor do que a qualidade do prompt que você escreve.

Se você já tem conta Google e quer a opção mais direta, o Gemini é a escolha natural. Se quer o código mais limpo e detalhado, Claude tende a ser superior. Se quer versatilidade e a maior base de tutoriais em PT-BR, ChatGPT é a referência.

Já usou o ChatGPT para criar seu site? Veja nosso guia O ChatGPT criou meu site — e agora?

Como publicar o site do Gemini

Depois de gerar e ajustar seu código, publicar é a parte mais fácil.

Opção rápida: Htmly (10 segundos)

Copie o código final do Gemini
Salve como index.html
Se tem imagens separadas, coloque tudo numa pasta e compacte em ZIP
Acesse htmly.com.br e arraste o arquivo
Pronto — link compartilhável na hora

Com uma conta gratuita, você:

Escolhe o subdomínio (bellapele.htmly.com.br)
Mantém o site no ar permanentemente
Acompanha visitas com analytics básico
Edita textos direto no navegador (modo visual)

Se o Gemini gerou tudo em um arquivo

Melhor cenário — um único index.html com HTML + CSS + JavaScript embutidos. Basta arrastar esse arquivo no Htmly e está feito.

Se o Gemini gerou arquivos separados

Às vezes o Gemini gera index.html, style.css e script.js separados. Nesse caso:

Crie uma pasta no seu computador
Coloque todos os arquivos dentro
Compacte em ZIP
Arraste o ZIP no Htmly

O Htmly extrai automaticamente e identifica o index.html como página principal.

O que fazer depois de publicar

Visualize antes

Se quiser testar o código antes de publicar, use nossa ferramenta gratuita HTML Preview. Cole o código e veja o resultado em tempo real.

Coloque no Google

Seu site no Htmly já é indexável por padrão. Para acelerar:

Cadastre-se no Google Search Console
Adicione a URL do seu site
Solicite a indexação

Para um guia detalhado, veja como colocar seu site no Google.

Edite quando precisar

Precisa atualizar um texto ou trocar uma informação? Nos planos pagos do Htmly, o editor inline permite editar direto no navegador — sem abrir o Gemini de novo. Confira os planos.

Se estiver no plano gratuito, o editor visual (modo contenteditable) permite ajustes básicos de texto.

Compartilhe

Seu site precisa de visitantes:

Link na bio do Instagram, TikTok e LinkedIn
Assinatura de e-mail com o link
Cartão de visita com QR Code
Google Meu Negócio para aparecer nas buscas locais
WhatsApp — mande o link para contatos relevantes

Perguntas frequentes

O Gemini é grátis para criar sites?

Sim. O Gemini gratuito (com conta Google) gera sites HTML sem custo. O Gemini Advanced (pago) pode gerar resultados mais elaborados, mas o gratuito já resolve para a maioria dos projetos.

Preciso saber programar?

Não. Você descreve o que quer em texto natural e o Gemini gera o código. Para publicar no Htmly, basta arrastar o arquivo — zero conhecimento técnico necessário.

O site funciona no celular?

Sim, se você pedir "responsivo" no prompt. O Gemini gera CSS com media queries que adaptam o layout para celular, tablet e desktop.

Posso editar o site depois?

Sim, de três formas:

Voltar ao Gemini e pedir alterações no código
Editar o HTML manualmente em um editor de texto
Usar o editor visual do Htmly (direto no navegador)

Quanto custa hospedar o site?

No Htmly, o plano gratuito mantém 1 site online permanentemente. Para mais recursos (editor de código, mais armazenamento), os planos começam em R$ 12/mês. É a melhor hospedagem de sites para projetos criados com IA.

Crie seu site agora

O fluxo completo leva menos de 30 minutos:

Abra o Gemini
Descreva o site que quer (use as dicas de prompt deste guia)
Itere até ficar satisfeito
Salve como index.html
Publique no Htmly

Do zero ao site na internet — grátis, sem servidor e sem código.

Para um guia mais amplo sobre todas as IAs disponíveis, veja o panorama atualizado das ferramentas de IA pra sites.

Vai gerar uma landing page? Prompts simples como os deste guia funcionam pra sites institucionais, mas landing pages que convertem precisam de framework de copy, design system coerente e schema.org. Testa nosso criador de landing page com IA — ele monta um briefing estruturado em 7 passos e gera um prompt otimizado pra colar no Gemini.

Leia também: