Como Criar Site com o Claude e Publicar Direto do Chat

Sim, o Claude faz site. Ele gera páginas completas em HTML, CSS e JavaScript a partir de um pedido em português, e o código sai limpo, organizado e fácil de mexer depois. Este guia vai do prompt até o site no ar, e mostra o que quase nenhum tutorial mostra: como publicar direto da conversa e como atualizar o site depois sem subir arquivo de novo. Tudo no plano gratuito do Claude e no plano gratuito do HTMLy.

O caminho é este: você conecta o Claude ao HTMLy uma vez, aprova na tela, e a IA passa a publicar por você. Se preferir o jeito antigo, arrastar um arquivo também funciona, e ele está aqui como caminho alternativo.

Atualizado em setembro de 2026 com o conector do HTMLy para o Claude.

O que o Claude consegue criar (e o que não)

O Claude gera sites estáticos: páginas HTML com CSS e JavaScript, sem servidor rodando por trás. Dentro desse universo, cabe quase tudo que um negócio pequeno precisa:

• Landing pages para serviços e lançamentos
• Portfólios de designers, fotógrafos, arquitetos e freelancers
• Sites institucionais com "sobre", "serviços" e "contato"
• Cardápios digitais para restaurantes e bares
• Páginas de evento e convites de casamento por link
• Currículos online e trabalhos acadêmicos interativos
• Catálogos de produtos com botão de WhatsApp

O que ele não faz sozinho:

• Loja com carrinho e pagamento no próprio site
• Sistema com login e banco de dados
• Blog com painel administrativo
• Formulário que grava respostas no servidor

Para a maioria dos negócios que precisa de presença online, e não de um sistema inteiro, o Claude resolve. Um escritório de advocacia, uma personal trainer, uma confeitaria, um fotógrafo: todos se resolvem com uma página estática bem feita. Se quiser partir de algo pronto, os templates de cardápio e currículo do HTMLy já nascem publicáveis.

Passo a passo: do prompt ao código

A forma mais direta de criar um site com o Claude é pelo chat. Abra o claude.ai, crie a conta gratuita e descreva o que quer.

1. Escreva um prompt detalhado

É o passo que decide a qualidade do resultado. Quanto mais contexto, melhor. 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 às 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 em código, seções específicas, estilo definido. Isso elimina a ambiguidade e faz o Claude acertar de primeira.

2. Confira e ajuste na conversa

O Claude mostra o resultado no painel lateral. Olhe o layout, redimensione a janela para ver como fica no celular, clique nos botões. Se algo não ficou bom, peça o ajuste na mesma conversa: "mude o fundo para creme", "adicione uma seção de perguntas frequentes". Ele mantém o contexto e não precisa que você repita nada.

Se o código vier cortado (acontece com sites longos), peça "mostre o código completo sem interrupção".

3. Publique

Aqui o guia se divide em dois caminhos. O primeiro é novo e é o mais curto. O segundo é o clássico, arrastar um arquivo, e continua valendo.

Publicar direto do chat: conecte o Claude ao HTMLy

O HTMLy tem um conector para IA, feito no padrão MCP. Em uma frase: é o padrão que deixa a IA usar serviços de fora, como o HTMLy. Você conecta uma vez, aprova na tela, e a partir daí o Claude publica e atualiza seus sites por conta própria, sem você copiar código, salvar arquivo ou abrir outra aba.

Para conectar o Claude ao HTMLy no claude.ai:

1. Abra Configurações, depois Conectores, e clique em Adicionar conector personalizado. No nome, escreva HTMLy; na URL, cole https://htmly.com.br/api/mcp.
2. Uma tela do HTMLy abre pedindo sua autorização. Aprove uma vez (se ainda não tem conta, crie a gratuita ali mesmo).
3. Volte à conversa do site e peça: "Publique este site no HTMLy."

O Claude chama o conector, envia os arquivos e responde com o endereço do site no ar, no formato seu-nome.htmly.com.br, com HTTPS. A resposta traz também a lista do que foi publicado, arquivo por arquivo, e quanto espaço o site ocupa. Se você quiser um endereço específico, diga na mesma frase: "publique com o nome estudiohorizonte".

Três coisas que valem saber antes de conectar:

• Funciona no plano gratuito do Claude e no plano gratuito do HTMLy: 1 site, 10 MB, 3 atualizações por dia, sem cartão.
• A IA não apaga nem paga. Excluir site, mudar plano ou mexer em cobrança não existem como ferramenta do conector. Isso só acontece no painel, por você.
• Você pode desconectar quando quiser em Perfil, Conexões com IA, no HTMLy.

O mesmo conector funciona no Cursor, no Codex e no Gemini CLI, com o mesmo endereço. A referência técnica completa está na documentação do MCP.

Atualizar o site sem subir arquivo de novo

É aqui que o conector muda a rotina. Publicar uma vez é fácil de qualquer jeito. O trabalho de verdade é o que vem depois: trocar o telefone, corrigir o horário, adicionar um depoimento, mudar o preço. Sem conector, cada mudança é gerar o código, salvar o arquivo e subir de novo.

Com o Claude conectado, a atualização é uma frase na mesma conversa:

"Troque o telefone do contato para (11) 3456-0000 e publique a atualização."

O Claude edita o arquivo e manda só o que mudou. O conector aplica por cima do que já está no ar: o que a IA envia entra, o que ela não envia fica exatamente como estava. Uma resposta cortada no meio nunca apaga uma página. Apagar arquivo só acontece quando você pede um pelo nome, e cada publicação devolve a lista do que mudou, para conferir.

Dá para ir além da correção pontual. "Adicione uma página de serviços com esses três itens e coloque o link no menu" vira uma página nova no ar, sem tocar no resto. Para um negócio que atualiza o site toda semana, é a diferença entre manter e abandonar.

Se você precisar mexer no texto sem abrir o Claude, o editor visual do painel do HTMLy também está lá: clique na frase e digite.

Caminho alternativo: publicar pelo arquivo

Conectar é opcional. Se preferir, ou se o site for grande e cheio de imagens, o jeito clássico continua sendo o mais simples que existe para publicar HTML grátis: arrastar o arquivo.

1. No bloco de código do Claude, clique em copiar.
2. Abra o Bloco de Notas (Windows) ou o TextEdit (Mac), cole e salve como index.html. No Bloco de Notas, mude o campo "Tipo" para Todos os arquivos e a codificação para UTF-8, senão o arquivo sai como .txt ou com os acentos trocados.
3. Acesse htmly.com.br e arraste o arquivo para a área de upload. O link aparece em segundos.

Sem cadastro, o site fica no ar por 1 hora, bom para mostrar a alguém. Com a conta gratuita ele fica permanente, com endereço próprio (estudiohorizonte.htmly.com.br em vez de um código aleatório) e contagem de visitas.

Se o Claude gerou arquivos separados (index.html, style.css, script.js, imagens): crie uma pasta, salve tudo dentro, compacte em ZIP e arraste o ZIP. O HTMLy extrai e reconhece o index.html como página inicial.

Quando o site é grande, com dezenas de fotos, o ZIP pelo painel é o caminho certo mesmo com o conector ligado. O conector é feito para site leve e para atualização; o ZIP, para volume.

Se você usa o Claude Code

O Claude Code é a versão do Claude que trabalha na pasta do seu computador, pelo terminal. Ele cria o site direto nos arquivos, em vez de mostrar o código no chat. Para publicar, o conector é o mesmo, com um comando:

claude mcp add --transport http htmly https://htmly.com.br/api/mcp

Depois, /mcp para autorizar, e o pedido é igual: "publique este site no HTMLy". Quem programa encontra o plugin e a skill no guia do HTMLy para o Claude Code. Quem usa o Claude na web não precisa de nada disso.

Dicas de prompt que funcionam com o Claude

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

Estruture por seções. Em vez de "crie um site para meu negócio", liste cada seção: hero, sobre, serviços, depoimentos, contato. Ele segue a estrutura fielmente.

Defina cores em código. "Cores modernas" é vago. "#2563eb para detalhes, #f8fafc para fundo, #1e293b para textos" é preciso.

Escreva o conteúdo real. Em vez de "adicione depoimentos", diga quem são os clientes e o que disseram. Texto específico gera resultado profissional; placeholder gera site de exemplo.

Peça meta tags completas. "Inclua meta tags para SEO, Open Graph e Twitter Card" faz o link ter preview bonito no WhatsApp e no Instagram.

Peça o site pronto para publicar. "Um único arquivo index.html, com CSS embutido; imagens em uma pasta images". Assim a IA e o conector têm menos o que decidir.

Itere. O Claude não perde o fio em conversas longas. Dez ajustes seguidos na mesma conversa funcionam melhor que dez prompts novos.

Se o objetivo do site é vender ou captar contatos, um prompt genérico não basta. O criador de landing page com IA do HTMLy monta um briefing em 7 passos e devolve um prompt completo para colar no Claude, com estrutura de copy, design e dados estruturados do seu nicho. É grátis.

Claude, ChatGPT ou Gemini: qual usar

Os três geram sites bons a partir de um prompt detalhado, e a qualidade do prompt pesa mais que a escolha da IA. O Claude leva vantagem em código organizado, em conversas longas de ajuste e em sites com muitas seções. O ChatGPT tem o maior ecossistema; o Gemini é natural para quem já vive no Google.

Os guias irmãos mostram cada caminho: criar site com o Gemini e criar site com o ChatGPT. O panorama de todas elas está no guia de criar site com IA.

Uma diferença prática hoje: o Claude, o Cursor, o Codex e o Gemini CLI conectam ao HTMLy e publicam da conversa. O ChatGPT e o Gemini na web ainda publicam pelo arquivo. Se você criou o site no Claude Design, a ferramenta visual, o caminho está no guia de como publicar o site do Claude Design.

Depois de publicar

Teste antes de compartilhar. Abra o link no celular e navegue por todas as seções. Para testar o código antes de publicar, a ferramenta de teste de HTML online mostra o resultado na hora, sem colocar nada no ar.

Coloque no Google. Seu site no HTMLy já é indexável. Para acelerar, cadastre a URL no Google Search Console e peça a inspeção. O passo a passo está em como colocar seu site no Google.

Divulgue onde já tem gente. Link na bio do Instagram, assinatura de e-mail e Google Meu Negócio, no caso de negócio local, são os três lugares que mais trazem visita para um site novo.

Crie seu site agora

O processo inteiro cabe em quatro passos:

1. Abra o claude.ai e descreva o site com um prompt detalhado (use o exemplo deste guia como base).
2. Ajuste na conversa até ficar do seu jeito.
3. Conecte o HTMLy uma vez e peça: "publique este site no HTMLy".
4. Quando precisar mudar algo, peça na mesma conversa. A IA publica por você.

Do zero ao site na internet, grátis, sem servidor e sem sair do chat. O Claude escreve o código, o HTMLy coloca no ar, e você cuida do que importa: o conteúdo do seu negócio.