Claude Design: Como Publicar o Site Que Você Criou

2026-08-08 — Equipe Htmly

Você montou o site no Claude Design, ficou bonito, está pronto — e aí procura o botão de publicar e ele não existe. O compartilhamento nativo gera um link interno, que só quem tem acesso ao seu workspace consegue abrir. Para transformar o projeto num site de verdade, com endereço público que qualquer pessoa acessa, falta um passo que o Claude Design não dá: a publicação.

A boa notícia: esse passo leva menos de um minuto, e o próprio Claude Design entrega o formato certo para isso. Este guia mostra o caminho completo.

O que o Claude Design faz (e o que ele não faz)

O Claude Design é a ferramenta de design da Anthropic, lançada em 2026 dentro dos planos pagos do Claude (Pro, Max, Team e Enterprise). Nele você cria sites, landing pages, apresentações e one-pagers descrevendo o que quer — e refina visualmente, elemento por elemento.

Na hora de tirar o projeto de lá, ele exporta para vários formatos: Canva, PDF, PowerPoint editável e — o que interessa aqui — Standalone HTML: um arquivo auto-contido com HTML e CSS puros, sem frameworks e sem dependências.

O que ele não faz é hospedar. Não há botão que coloque o site num endereço público. O botão de compartilhar gera uma URL interna, pensada para revisão dentro do time — não para o mundo.

Vale desfazer uma confusão comum: os Artifacts do chat do claude.ai têm, sim, um botão de publicar, que gera uma URL no domínio claude.site. Mas é outro produto — e a página publicada carrega uma barra do Claude no topo, num endereço que não é seu. Se a ideia é um site com a sua cara, o caminho é outro.

Passo 1: exporte o projeto como Standalone HTML

No projeto aberto no Claude Design:

  1. Clique no menu de export (compartilhar/exportar, no canto superior)
  2. Escolha Standalone HTML
  3. Aguarde a geração — o Claude interpreta o projeto para escrever o código, então esse export consome uso da sua assinatura
  4. Baixe o arquivo (ou o ZIP, se o projeto tiver mais de uma página)

O resultado é o site inteiro em arquivo: abra no navegador com um duplo clique para conferir que está tudo lá — textos, cores, tipografia, responsividade.

O que conferir no arquivo antes de publicar

O export do Claude Design costuma vir redondo, mas 2 minutos de conferência evitam publicar com defeito. Abra o arquivo no navegador e verifique:

  • Imagens aparecem? Se o projeto usa imagens, confira se elas estão embutidas no arquivo ou vieram numa pasta junto. Se vieram em pasta, o upload precisa ser o ZIP com tudo dentro — arquivo solto quebra as imagens.
  • Fontes carregam? Tipografia que depende do Google Fonts precisa de internet para carregar — abra o arquivo com a internet ligada para o teste valer.
  • Mais de uma página? Projetos multi-página exportam vários arquivos HTML. Confira se a página principal se chama index.html (é ela que abre quando alguém acessa o endereço raiz) e se os links entre as páginas funcionam clicando neles.
  • Textos finais? O Design às vezes mantém texto de rascunho que você esqueceu de trocar. Releia títulos, telefones e preços — depois de publicado, dá para corrigir no editor do HTMLy, mas melhor nascer certo.

Se algo estiver quebrado, o caminho mais rápido é voltar ao Claude Design, ajustar no projeto e re-exportar — o export é reproduzível.

Passo 2: publique e receba o link

Com o arquivo em mãos:

  1. Acesse htmly.com.br
  2. Arraste o arquivo HTML (ou o ZIP) para a área de upload
  3. Em segundos, o site está no ar com um link do tipo seusite.htmly.com.br, com HTTPS automático

Sem cadastro, o link fica 1 hora no ar — bom para conferir o resultado. Com uma conta gratuita, o site fica permanente, com subdomínio escolhido por você. E se o projeto merece endereço próprio, o plano Pro conecta seu domínio (www.seusite.com.br) com SSL automático, por R$ 29/mês, com PIX.

A partir daí, o site é seu de verdade: o arquivo está com você, o endereço é seu, e nada depende de manter a assinatura do Claude ativa.

Precisa ajustar algo depois de publicar?

Dois caminhos, sem voltar ao Claude Design:

  • Editor visual do HTMLy (grátis): clique no texto, corrija, salve. Bom para trocar um telefone, um preço, um título.
  • Editor de código (planos pagos): HTML e CSS completos no navegador, com preview em tempo real.

Para mudanças grandes de layout, aí sim vale voltar ao Claude Design, re-exportar e subir o arquivo novo — o link continua o mesmo.

Depois de publicar: preview de link e Google

Dois acabamentos que transformam o site publicado em site profissional:

Preview no WhatsApp e nas redes. Quando alguém recebe seu link, o card de preview mostra título, descrição e imagem. O Claude Design nem sempre gera essas meta tags — no painel do HTMLy você define título, descrição e imagem de compartilhamento sem tocar no código, e o que você preencher vale na hora.

Aparecer no Google. Site novo não entra no índice sozinho da noite pro dia. O básico que acelera: título descritivo (não "Untitled"), uma descrição real do que a página oferece, e o site marcado como indexável no painel. Se o site é um preview para cliente ou um rascunho, faça o contrário — desligue a indexação e ele fica fora da busca.

E as ferramentas que "publicam direto do Claude Design"?

Existem extensões e serviços que se conectam ao Claude Design e publicam o projeto — reconstruindo tudo em React no caminho. Para aplicações complexas, pode fazer sentido. Para uma landing page, um portfólio ou um site institucional, é maquinário demais: o export nativo em HTML puro já entrega o site pronto, e publicar HTML é a operação mais simples da web.

A regra prática: se o seu projeto é um site (páginas, textos, imagens, formulário de contato), o caminho export HTML → publicar resolve. Se é um aplicativo (login, banco de dados, lógica), você precisa de um stack de desenvolvimento — e aí o assunto é outro.

Para quem programa: o atalho do Claude Code

O Claude Design também exporta um pacote de handoff para o Claude Code, o agente de programação da Anthropic — que roda no terminal, em app próprio, no navegador (claude.ai/code) e dentro de editores como o VS Code. Se você trabalha assim, dá para levar o projeto pro Claude Code, ajustar o que quiser e publicar sem trocar de ferramenta — o HTMLy tem integração com o Claude Code para publicar via MCP, direto do fluxo de trabalho.

Para quem não programa, ignore este atalho: o caminho dos passos 1 e 2 é mais curto.

O quadro completo: criar com o Claude, publicar de qualquer jeito

O Claude virou um ecossistema com três portas de saída para um site:

De onde vem o site O que você tem Como publicar
Chat do claude.ai (Artifacts) Código HTML na conversa Copiar o código, salvar como arquivo e publicar — guia completo
Claude Design Export Standalone HTML Este guia: exportar e arrastar
Claude Code (terminal, app ou navegador) Projeto em arquivos Publicar via MCP sem sair do fluxo

Os três terminam no mesmo lugar: um arquivo HTML que é seu, publicado num endereço que é seu. Se você está começando agora e ainda não criou o site, o guia de como criar site com IA compara os caminhos.

Publique agora

Exporte o Standalone HTML do seu projeto, acesse htmly.com.br e arraste o arquivo. Em menos de um minuto o site que hoje só existe dentro do Claude Design vira um link que você manda para qualquer pessoa.

Leia também:

Perguntas frequentes

O Claude Design publica o site na internet?+

Não. O Claude Design cria e exporta o projeto (HTML, PDF, PPTX, Canva), mas não tem botão de publicar site público. O compartilhamento nativo gera uma URL interna, visível para quem tem acesso ao seu workspace. Para ter um site de verdade, você exporta o HTML e publica numa hospedagem.

Qual a diferença entre Claude Design e os Artifacts do chat?+

São produtos diferentes. Artifacts são criados na conversa do claude.ai e têm botão de publicar que gera uma URL claude.site — com uma barra do Claude no topo da página. O Claude Design é a ferramenta de design da Anthropic (claude.ai/design), mais completa para criar sites e apresentações, mas sem publicação pública.

O Claude Design é grátis?+

Não. Ele está disponível nos planos pagos do Claude (Pro, Max, Team e Enterprise) e consome os limites da sua assinatura. O export para HTML também consome uso, porque o Claude interpreta o projeto para gerar o código.

O export do Claude Design é HTML puro ou React?+

O export Standalone HTML gera um arquivo auto-contido, com HTML e CSS puros — sem React, sem build, sem dependências. É exatamente o formato que qualquer hospedagem estática aceita. Ferramentas de terceiros como o Anima reconstroem o projeto em React, o que é mais do que uma landing page precisa.

Preciso saber programar para publicar?+

Não. O caminho todo é visual: exportar o HTML no Claude Design, arrastar o arquivo para o HTMLy e copiar o link. Nenhuma linha de código, nenhum terminal.

Receba dicas de HTML e hospedagem

Cadastre-se e receba conteúdo exclusivo sobre como criar e publicar sites.

Publique seu site em segundos

Crie seu HTML (na mão ou com IA) e coloque no ar agora — sem servidor, sem complicação.

Comece grátis