Criar site no Claude começa com uma conversa, mas termina com uma página que precisa ser revisada, testada e disponibilizada corretamente. Um layout bonito não comprova que o contato funciona. Da mesma forma, um link de artefato não equivale a um site instalado no seu domínio.
Neste tutorial, o caminho escolhido é o Claude no navegador, usando Design e exportação. Assim, você não precisa começar instalando Claude Code. O exemplo é uma página para a empresa fictícia Horizonte Climatização, com serviços, região atendida, processo de orçamento e contato. O objetivo é construir algo pequeno, entender os ajustes e preparar uma publicação que possa ser conferida.
Este guia usa documentação oficial consultada em 19/10/2026. As capturas mostram essa documentação. O briefing é fictício; geração, exportação e publicação não foram executadas em uma conta autenticada.
Antes de criar site no Claude, defina a entrega
Primeiro, escolha uma única ação: solicitar um orçamento. Depois, reúna serviços, regiões, identidade visual e contato autorizado. Se os dados ainda não existem, use informações fictícias, identificadas como demonstração.
Além disso, limite a primeira versão: sem pagamentos, cadastro ou banco de dados. Dessa forma, a revisão ficará concentrada no conteúdo, na navegação e no contato.
A documentação oficial de artefatos informa que os modelos de Design estão disponíveis nos planos Free, Pro, Max, Team e Enterprise. No entanto, é necessário conferir as capacidades habilitadas e as regras da organização. A disponibilidade do recurso também não elimina os limites de uso do plano.
1. Abra o Claude e escolha Design
Entre no Claude pelo navegador e abra uma conversa. Em seguida, selecione Saída > Design, quando essa opção estiver disponível, ou peça explicitamente um design de página. Também é possível começar pela aba Artefatos e escolher o modelo de Design, conforme a documentação atual.
O guia oficial do Claude Design descreve a criação por conversa, revisão no canvas e exportação. Portanto, o roteiro usa essa experiência visual e não exige instalar Claude Code.
Se você já tem uma marca, anexe logo e referências. Além disso, informe o que deve ser preservado: fonte, cores e padrões existentes. Isso orienta melhor do que pedir apenas um site moderno.
2. Use um primeiro comando completo
Ao criar site no Claude, o primeiro pedido deve conectar negócio, conteúdo e comportamento. Por isso, copie o modelo abaixo e substitua os dados antes de usar em uma empresa real. O contato continuará desabilitado até que um destino autorizado seja informado.
Crie um Design de landing page para a empresa fictícia
Horizonte Climatização. Identifique o projeto como demonstração.
Público: responsáveis por pequenos escritórios que precisam
instalar ou fazer manutenção de ar-condicionado.
Objetivo: explicar o serviço e orientar um pedido de orçamento.
Região do exemplo: São Paulo, sem endereço ou telefone inventados.
Conteúdo:
1. Hero: “Climatização para o seu escritório funcionar melhor”.
2. Três serviços: instalação, manutenção preventiva e limpeza.
3. Como funciona: solicitação, avaliação e proposta.
4. Perguntas frequentes sobre atendimento e orçamento.
5. Contato com aviso de demonstração e destino ainda não configurado.
Visual: Inter, fundo claro, títulos escuros e amarelo #F9B82D
em detalhes. Use ícones coerentes, margens amplas e blocos retos.
Não invente depoimentos, certificações, preços ou clientes.
Comportamento: navegação por âncoras, foco visível no teclado,
FAQ acessível e animações leves que respeitem movimento reduzido.
No celular, use uma coluna e evite rolagem horizontal.
Prepare uma versão estática exportável como HTML independente.
Não inclua integrações privadas, chamadas de IA ou credenciais.
Antes de finalizar, explique o que está funcional e o que falta configurar.O pedido evita avaliações falsas e distingue aparência de integração real. Assim, você não aprova uma página que parece pronta, mas perde os contatos de quem tenta contratar.
3. Revise a primeira versão por critérios objetivos
Depois da geração, confira o hero antes de navegar pelo restante. Um visitante deve entender o serviço, a região e a próxima ação sem interpretar frases vagas. Em seguida, compare os três blocos com o briefing: instalação, manutenção preventiva e limpeza precisam aparecer de forma coerente.
Também revise os links. Cada item do menu deve levar à seção correspondente, enquanto o contato demonstrativo deve explicar que ainda não está configurado. Se o Claude acrescentar números, avaliações ou selos não fornecidos, peça a remoção antes de avançar.
Por fim, avalie a leitura. Títulos precisam ter hierarquia, descrições devem ter contraste e os botões devem continuar identificáveis fora do estado de hover. Não aprove somente pela captura da primeira dobra: percorra a página inteira e abra todas as perguntas do FAQ.
4. Peça uma alteração que possa ser comparada
Agora, escolha um problema específico e preserve o que já foi aprovado. Em vez de “melhore o design”, descreva onde o defeito acontece e qual comportamento espera. Assim, fica mais fácil verificar se a nova versão resolveu o ponto levantado.
Preserve os textos, as cores e a ordem das seções.
Revise somente o hero e o comportamento em telas pequenas.
No desktop, alinhe o conteúdo visual ao centro do texto.
No celular, coloque o visual abaixo da descrição.
Use pelo menos 24 px de margem lateral em telas de 390 px.
Aumente a área dos botões e mantenha o foco visível.
Não recrie a página inteira nem invente novos conteúdos.
Depois, liste exatamente o que foi alterado.Para comparar, registre a mesma seção e largura antes e depois. Além disso, confira se a mudança preservou links, conteúdo e interações já aprovados.
5. Teste no celular e configure o contato
Antes de publicar, abra a página em uma largura pequena e tente usá-la. Confira menu, FAQ e botões sem depender do mouse. Depois, verifique se palavras longas ou blocos de código criaram rolagem lateral. Se isso acontecer, envie ao Claude a largura e a seção em que o problema aparece.
No contato, escolha entre WhatsApp e formulário. Um link de WhatsApp encaminha o visitante para uma conversa; ele não confirma que uma mensagem foi enviada. Já um formulário precisa de um destino de recebimento, que pode ser um serviço próprio ou uma plataforma autorizada.
Por isso, não peça “formulário funcionando” sem definir o destino. Informe campos, responsável pelo recebimento e comportamento em caso de erro. Além disso, nunca coloque senhas ou chaves secretas no HTML que será entregue ao navegador.
Para validar um formulário real, faça um envio identificado como teste e confira o recebimento. Em seguida, teste um campo obrigatório vazio e uma falha de envio. Uma mensagem de sucesso exibida sem confirmação do serviço não comprova a entrega do contato.
6. Exporte e escolha onde publicar
Após revisar, use Exportar e confira as opções disponíveis no projeto. A documentação do Claude Design lista HTML independente e ZIP, entre outros formatos. No entanto, o nome do arquivo não garante que qualquer projeto funcionará sem dependências: abra o material exportado e confira seu conteúdo.
Em um exemplo estático, procure a página inicial e os arquivos necessários. Se houver um ZIP, extraia-o antes de enviar os arquivos à hospedagem. Depois, abra a página localmente e verifique imagens, fontes, navegação e interações. Recursos dependentes de servidor exigem outra validação.
O compartilhamento do artefato tem finalidade diferente. A orientação oficial sobre compartilhamento distingue os artefatos atuais dos legados e apresenta condições por plano. Portanto, não suponha que o antigo botão “Publicar” estará presente em todo projeto novo ou que qualquer visitante conseguirá entrar sem conta.
7. Publique os arquivos do site
Para publicar os arquivos estáticos fora do Claude, um caminho documentado é o Direct Upload do Cloudflare Pages. Tenha uma conta no serviço e os arquivos finais, com index.html na raiz da pasta. Primeiro, abra Workers & Pages e escolha Create application > Get started > Drag and drop your files.
Em seguida, nomeie o projeto e arraste a pasta ou ZIP com os arquivos. Escolha Deploy site e conclua em Save and Deploy, quando solicitado. Depois, abra o endereço pages.dev fornecido pelo painel e repita os testes. Não envie arquivos-fonte que ainda dependem de compilação.
Esse envio não instala WordPress nem executa PHP. Portanto, use-o para uma página estática compatível; formulários precisam de um destino externo ou backend adequado. A publicação descrita segue a documentação do provedor e não foi executada nesta sessão.
Antes de substituir o site existente, preserve uma cópia e confirme o destino da publicação. Caso você utilize WordPress, um HTML independente não vira automaticamente um tema ou uma página editável em blocos. Nesse caso, será necessário adaptar o projeto ou escolher uma instalação estática separada.
O que conferir no endereço publicado
O trabalho de criar site no Claude só deve ser considerado concluído depois da revisão no endereço de destino. Confira HTTPS, imagens e links a partir de outro navegador ou janela privada. Em seguida, repita o caminho de contato, pois um teste local não comprova o comportamento da hospedagem.
Além disso, revise título da página, descrição, idioma e conteúdo principal. Esses elementos ajudam a organizar a entrega, mas não garantem posicionamento no Google. Se o site precisa atrair demanda, o planejamento de conteúdo e a estrutura de conversão precisam acompanhar a publicação.
Para aprofundar essa decisão, consulte os artigos da Evolux sobre Claude para empresas e Claude Cowork vs ChatGPT. Eles complementam a escolha de uso, enquanto este tutorial se concentra na criação da página.
Perguntas frequentes sobre criar site no Claude
Preciso saber programar?
Você pode começar descrevendo a página em linguagem comum. No entanto, precisa revisar o resultado e reconhecer integrações pendentes. Se a publicação exigir configuração de servidor, banco de dados ou adaptação ao WordPress, será necessário conhecimento técnico adicional.
Qual plano permite acompanhar o tutorial?
A documentação atual inclui Design nos planos Free, Pro, Max, Team e Enterprise. Ainda assim, confira capacidades habilitadas, limites e permissões. As condições de compartilhamento não são iguais para todos os planos nem para artefatos atuais e legados.
Posso usar meu próprio domínio?
Sim, desde que você tenha uma hospedagem compatível e publique os arquivos necessários nela. O domínio e sua configuração ficam nessa etapa externa. Portanto, compartilhar um artefato não equivale a conectar automaticamente o domínio da empresa.
O formulário já envia mensagens?
Somente quando existe uma integração real e ela foi testada. Campos visíveis, botão e mensagem de sucesso não bastam. Por isso, confira o destino, o recebimento e os erros antes de divulgar a página para clientes.
Consigo editar o site depois?
Guarde o projeto no Claude e uma cópia dos arquivos exportados. Depois de uma revisão, exporte novamente e confira o que será substituído. Além disso, mantenha um registro da versão publicada para não perder alterações feitas fora do Claude.
Posso colocar o resultado no WordPress?
Um arquivo HTML não se transforma sozinho em conteúdo nativo do WordPress. É possível adaptar o layout, mas será preciso integrar estrutura, estilos e funcionalidades. Assim, a escolha entre site estático e WordPress deve ocorrer antes da publicação definitiva.
Crie uma página que ajude o cliente a decidir
Criar site no Claude pode acelerar o primeiro projeto. Entretanto, o site da empresa também precisa comunicar a oferta, funcionar no celular e facilitar um contato real. Conheça o serviço de desenvolvimento web da Evolux e solicite um diagnóstico gratuito de marketing digital.
Por Diogo Leão. Especialista em marketing digital para empresas e sócio fundador da Evolux.
Especialista em marketing digital para empresas e sócio fundador da Evolux.
