Como Criar Site com o Claude e Publicar Grátis

Se você já testou criar sites com IA, provavelmente percebeu que nem todas as ferramentas geram código da mesma qualidade. O Claude, da Anthropic, se destaca justamente nesse ponto: o HTML que ele produz é limpo, bem estruturado e semântico. Não é código "que funciona por milagre" — é código que você consegue ler, entender e modificar depois.

Isso faz diferença prática. Um site com HTML semântico carrega mais rápido, é mais acessível e aparece melhor no Google. E o Claude entrega isso naturalmente, sem que você precise pedir "use tags semânticas" ou "organize o CSS por seções" — ele faz por padrão.

Neste guia, vamos do prompt até o site publicado na internet. Tudo grátis, tudo sem instalar nada.

O que o Claude consegue criar

O Claude gera sites estáticos — páginas HTML com CSS e JavaScript. Dentro desse universo, as possibilidades são amplas:

Landing pages para negócios e serviços
Portfólios profissionais (designers, fotógrafos, arquitetos, freelancers)
Sites institucionais com seções "sobre", "serviços" e "contato"
Cardápios digitais para restaurantes e bares
Páginas de evento, convite ou casamento
Trabalhos acadêmicos interativos
Currículos online com design moderno
One-pages para lançamento de produto

O que ele não faz diretamente:

E-commerce com carrinho e pagamento
Sistemas com login e banco de dados
Blogs com CMS e painel administrativo
Aplicações web com backend complexo

Para a maioria dos negócios que precisa de presença online — e que não precisa de um sistema inteiro — o Claude resolve muito bem. Um escritório de advocacia, uma personal trainer, uma confeitaria, um fotógrafo: todos esses casos se resolvem com uma página estática bem feita.

Método 1: Claude.ai (gerar HTML via chat)

A forma mais direta de criar um site com o Claude. Abra o chat, descreva o que quer e receba o código pronto.

Passo a passo

1. Acesse o Claude

Vá para claude.ai e crie uma conta gratuita (basta um e-mail). O plano gratuito já permite gerar sites HTML completos — você não precisa pagar nada para começar.

2. Escreva um prompt detalhado

Esse é o passo mais importante. Quanto mais contexto você der, melhor o resultado. Veja um exemplo real para um escritório de arquitetura:

"Crie um site HTML completo e responsivo para um escritório de arquitetura chamado Estúdio Horizonte. O escritório é especializado em projetos residenciais de alto padrão em São Paulo.

Estrutura do site:

Hero: nome do escritório, tagline 'Arquitetura que transforma espaços em experiências', botão 'Conheça nossos projetos'

Seção Projetos: 4 projetos com nome, tipo (casa, apartamento, reforma), metragem e descrição de 2 linhas cada. Nomes sugestivos: Casa Ipê, Residência Vila Madalena, Apartamento Pinheiros, Reforma Jardins

Seção Sobre: 2 parágrafos sobre o escritório, fundado em 2015, equipe de 8 profissionais, menções a prêmios de design

Seção Processo: 4 etapas do trabalho (Briefing, Projeto, Execução, Entrega) com ícone e descrição curta para cada

Depoimentos: 3 clientes com nome, projeto e comentário realista

Contato: endereço (Rua Oscar Freire, 800 — Pinheiros, São Paulo), telefone (11) 3456-7890, e-mail [email protected], horário (segunda a sexta, 9h-18h)

Footer: links para Instagram e LinkedIn, copyright 2026

Design: minimalista e sofisticado. Cores: fundo branco (#ffffff), textos em cinza escuro (#1a1a1a), detalhes em dourado fosco (#b8860b). Fonte: Inter do Google Fonts. Bastante espaço em branco entre seções. Fotos placeholder usando picsum.photos.

Inclua meta tags para SEO (title, description) e Open Graph. Tudo em um único arquivo HTML com CSS embutido. Botão flutuante de WhatsApp (5511934567890)."

Repare nos detalhes: nome do negócio, endereço real, cores com códigos hex, seções específicas, estilo visual definido. Isso elimina ambiguidade e faz o Claude acertar de primeira.

3. Copie o código gerado

O Claude vai exibir o HTML completo em um bloco de código. Clique no botão de copiar no canto superior do bloco. Se o código for muito longo, ele pode vir em partes — peça "mostre o código completo sem interrupção" caso isso aconteça.

4. Salve como arquivo HTML

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

No Bloco de Notas, atenção: antes de salvar, mude o campo "Tipo" para "Todos os arquivos (.)" e a codificação para UTF-8. Sem isso, o arquivo pode salvar como index.html.txt ou exibir caracteres estranhos nos acentos.

5. Teste no navegador

Dê um duplo-clique no arquivo index.html para abri-lo no Chrome. Confira:

O layout está como esperado?
Redimensione a janela para verificar a responsividade no celular
Clique nos links e botões para ver se funcionam
Verifique se os textos estão corretos e sem erros

Se algo não ficou bom, volte ao Claude e peça ajustes. Ele mantém o contexto da conversa, então basta dizer "mude a cor do fundo para creme" ou "adicione uma seção de perguntas frequentes" — sem precisar repetir tudo.

6. Publique no Htmly

Quando o site estiver pronto, acesse htmly.com.br, arraste o arquivo e receba seu link em segundos. Simples assim.

Dicas para prompts melhores

A diferença entre um site genérico e um site profissional está no prompt. Estas dicas funcionam especialmente bem com o Claude:

Estruture por seções. O Claude responde muito bem a listas organizadas. Em vez de "crie um site para meu negócio", liste cada seção: hero, sobre, serviços, depoimentos, contato. Ele vai seguir sua estrutura fielmente.

Defina cores com códigos hex. "Cores modernas" é vago. "#2563eb para detalhes, #f8fafc para fundo, #1e293b para textos" é preciso. O Claude aplica exatamente o que você pede.

Peça responsividade explicitamente. Inclua "responsivo" ou "mobile-first" no prompt. Embora o Claude geralmente inclua media queries, pedir garante que ele dê atenção especial a isso.

Peça meta tags completas. "Inclua meta tags para SEO, Open Graph e Twitter Card" faz seu site ter preview bonito quando compartilhado no WhatsApp, Instagram e LinkedIn. O Claude gera meta tags bem preenchidas, não genéricas.

Peça tudo em um arquivo. "Tudo em um único arquivo HTML com CSS e JavaScript embutidos" simplifica tudo — um arquivo para testar, um arquivo para publicar.

Use o Claude para iterar. Aqui o Claude brilha. Ele mantém contexto muito bem em conversas longas. Você pode pedir 5, 10, 15 ajustes na mesma conversa e ele não perde o fio. Exemplos de ajustes:

"Aumente o espaçamento entre as seções"
"Troque o botão de WhatsApp para o canto inferior esquerdo"
"Adicione animações suaves de scroll"
"Inclua um mapa do Google Maps na seção de contato"
"Mude a fonte para Poppins"

Peça para explicar. Se você quer aprender, peça "explique o que cada seção do CSS faz". O Claude é didático e vai comentar o código de forma clara. Isso é ótimo para quem está começando e quer entender o que está publicando.

Especifique o conteúdo real. Em vez de "adicione depoimentos", diga "adicione 3 depoimentos de clientes: Maria S. ('Projeto impecável, entregaram no prazo'), João P. ('Superou nossas expectativas'), Ana R. ('Recomendo para qualquer pessoa que valorize design')". Conteúdo específico gera resultado profissional.

Claude vs ChatGPT vs Gemini: quando usar o Claude

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

Critério	Claude	ChatGPT	Gemini
Preço	Grátis com limites / US$ 20/mês (Pro)	Grátis (GPT-3.5) / US$ 20/mês (Plus)	Grátis / US$ 20/mês (Advanced)
Qualidade do HTML	Excelente — código limpo e semântico	Muito boa (GPT-4)	Boa para sites simples
Responsividade	Muito boa, geralmente inclui	Geralmente inclui	Geralmente inclui
Limite de contexto	200k tokens (maior da categoria)	128k tokens (GPT-4o)	1M tokens (Gemini 1.5)
Iteração	Excelente — mantém contexto muito bem	Muito boa	Boa
Código limpo	Destaque — semântico, bem organizado	Bom, mas às vezes verboso	Funcional, menos organizado
Melhor para	Projetos maiores, código profissional	Versatilidade, maior ecossistema	Sites simples, quem já usa Google

Quando escolher o Claude

O Claude se destaca em três cenários:

Sites mais elaborados. Se você quer um site com 5+ seções, animações, layout complexo — o Claude lida melhor com projetos maiores sem perder qualidade. O código continua limpo mesmo quando o arquivo HTML tem 500+ linhas.

Código que você vai editar depois. Se existe a possibilidade de mexer no código no futuro (ou de contratar alguém para fazer isso), o Claude facilita. O HTML que ele gera usa classes descritivas, comentários úteis e CSS organizado por seções.

Iteração extensa. Se você gosta de ir ajustando até ficar perfeito, o Claude é o melhor parceiro. Ele não "esquece" o que pediu três mensagens atrás. Você pode ter uma conversa longa de refinamento sem precisar recolar o código inteiro.

Quando escolher outra IA

Se você quer algo rápido e simples (um convite, um cardápio), qualquer IA resolve. Se você quer usar pesquisa integrada (buscar dados atualizados), o ChatGPT com browsing ou o Gemini com integração Google são melhores. Para um comparativo mais amplo de todas as IAs, veja como usar IA para criar sites.

A verdade é que a qualidade do prompt importa mais do que a IA escolhida. Um prompt detalhado no Claude, ChatGPT ou Gemini vai gerar um resultado bom. A diferença está na consistência e na limpeza do código — e nisso o Claude leva vantagem.

Como publicar o site

Depois de gerar e ajustar o site no Claude, publicar é a parte mais fácil de todo o processo.

Htmly: do arquivo ao link em 10 segundos

Copie o código final que o Claude gerou
Salve como index.html no seu computador
Acesse htmly.com.br
Arraste o arquivo para a área de upload
Pronto — você recebe um link compartilhável na hora

Sem cadastro, seu site fica no ar por 1 hora (ótimo para testes rápidos). Com uma conta gratuita, você desbloqueia:

Subdomínio personalizado — estudiohorizonte.htmly.com.br em vez de um hash aleatório
Site permanente — não expira
Analytics básico — veja quantas visitas recebeu
Editor visual — edite textos e cores direto no navegador, sem abrir o Claude de novo

Se precisar de mais recursos como editor de código completo, domínio próprio ou remoção do selo, confira os planos.

Se o Claude gerou arquivos separados

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

Crie uma pasta no computador (ex: meu-site)
Salve cada arquivo dentro dessa pasta
Compacte a pasta em ZIP
Arraste o ZIP no Htmly

O Htmly extrai tudo automaticamente e identifica o index.html como página principal. Também funciona se você tiver imagens — basta incluir na mesma pasta antes de compactar.

Se você preferir começar a partir de um design pronto em vez de gerar do zero, dê uma olhada nos templates HTML — você pode clonar um e editar no navegador.

O que fazer depois de publicar

Teste antes de compartilhar

Antes de mandar o link para todo mundo, confira o resultado. Use nossa ferramenta gratuita HTML Preview para testar o código no navegador sem precisar publicar. Cole o HTML, veja o resultado em tempo real e ajuste o que precisar antes de ir ao ar.

Também teste no celular. Abra o link do seu site no smartphone e navegue por todas as seções. Detalhes como tamanho de botão, espaçamento e tamanho de fonte fazem diferença enorme na experiência mobile.

Coloque no Google

Seu site no Htmly já é indexável por padrão — o Google pode encontrá-lo naturalmente. Mas para acelerar:

Crie uma conta no Google Search Console
Adicione a URL completa do seu site (ex: https://estudiohorizonte.htmly.com.br)
Solicite a indexação na ferramenta "Inspeção de URL"

O processo pode levar de algumas horas a alguns dias. Para um passo a passo completo, veja como colocar seu site no Google.

Compartilhe estrategicamente

Ter um site é meio caminho. Atrair visitantes é a outra metade:

Link na bio do Instagram, TikTok e LinkedIn
Assinatura de e-mail com o link do site
Cartão de visita com QR Code apontando para o site
Google Meu Negócio — essencial para negócios locais
WhatsApp — mande o link direto para clientes e contatos
Grupos e fóruns relevantes para o seu nicho

Edite quando precisar

Precisa atualizar o telefone, mudar o horário de funcionamento ou trocar um depoimento? Você tem três opções:

Editor visual do Htmly — clique no texto e edite direto no navegador (disponível no plano gratuito para ajustes de texto)
Voltar ao Claude — abra a mesma conversa e peça a alteração. Copie o código atualizado e faça upload novamente
Editar o HTML — abra o arquivo no Bloco de Notas, faça a alteração manualmente e reenvie

Para negócios que atualizam o site com frequência, o editor inline dos planos pagos economiza bastante tempo.

Perguntas frequentes

O Claude é grátis para criar sites?

Sim. O Claude gratuito (em claude.ai) permite gerar sites HTML completos sem pagar nada. O plano gratuito tem limite de mensagens por dia — se você atingir, basta esperar algumas horas. Para uso mais intenso, o Claude Pro custa US$ 20/mês e remove os limites.

Preciso saber programar para criar um site com o Claude?

Não. Você descreve o que quer em português e o Claude gera todo o código. Para publicar, basta arrastar o arquivo no Htmly — zero conhecimento técnico. Se quiser fazer ajustes pontuais no código depois, o Claude pode te ensinar o que cada parte faz.

O site gerado pelo Claude funciona no celular?

Sim, desde que você peça "responsivo" no prompt. O Claude gera CSS com media queries que adaptam o layout para celular, tablet e desktop. Ele costuma incluir responsividade por padrão, mas pedir explicitamente garante que nenhum detalhe passe despercebido.

Posso editar o site depois de publicar?

Sim, de três formas: usando o editor visual do Htmly (direto no navegador), voltando ao Claude para pedir alterações no código, ou editando o HTML manualmente. O editor visual é a opção mais prática para mudanças simples como textos e cores.

Quanto custa hospedar o site criado com Claude?

No Htmly, o plano gratuito mantém 1 site online permanentemente com subdomínio personalizado. Para recursos extras como editor de código, mais armazenamento e domínio próprio, os planos começam em R$ 12/mês. É a melhor opção de hospedagem de sites para projetos criados com IA — publicar leva segundos e não exige configuração técnica.

Crie seu site agora

O processo completo leva menos de 30 minutos:

Acesse claude.ai e crie sua conta gratuita
Escreva um prompt detalhado descrevendo seu site (use o exemplo deste guia como base)
Itere com o Claude até o resultado ficar como você quer
Copie o código e salve como index.html
Publique no Htmly — arraste o arquivo e receba seu link

Do zero ao site na internet — grátis, sem servidor, sem complicação. O Claude gera o código, o Htmly coloca no ar. Você cuida do que importa: o conteúdo do seu negócio.

Para um guia completo cobrindo todas as IAs disponíveis, veja como usar IA para criar sites.

Leia também: