Quais são os prompts do Claude para criar sites? 5 modelos para copiar

Uso o Claude e o Claude Code no dia a dia, inclusive em sistemas de clientes que estão no ar, como um CRM com IA para uma indústria do segmento de acústica e uma calculadora de aquecimento de piscina com dados do INMET. O que mais muda o resultado nesses projetos é o que entra no pedido, e isso vale também para quem quer só a página do próprio negócio.

Abaixo estão cinco modelos de prompt para copiar, com o que cada parte faz. Os colchetes são para você preencher com os seus dados. Recursos e planos foram conferidos nas páginas oficiais da Anthropic em 13 de novembro de 2026.

O que todo prompt para criar site precisa ter?

A documentação da Anthropic sugere tratar o Claude como um funcionário brilhante e recém-contratado, que ainda não conhece o seu negócio (boas práticas de prompt). O teste proposto lá é simples: mostre o pedido a um colega que não sabe nada do projeto. Se ele ficaria em dúvida, o Claude também fica.

Para um site, o pedido completo responde seis perguntas:

1. Para que serve o site? Receber pedidos pelo WhatsApp, mostrar o cardápio, agendar horário, passar confiança antes de uma reunião.
2. Quem vai visitar? Morador do bairro que procura pelo celular, empresa que compara fornecedores, paciente que quer saber o endereço.
3. Quais seções entram? Na ordem em que você quer que apareçam.
4. Quais são os textos e contatos reais? Nome, telefone, endereço, horário, serviços e preços, se você publica preço.
5. Qual é o estilo? Cores da marca, tipo de letra, sites que você admira.
6. Em que formato? Para ver no chat, um arquivo HTML só, com o CSS e o JavaScript dentro dele.

A quarta pergunta é a que mais falta. Sem os textos reais, o Claude escreve textos de exemplo, e a página fica com cara de modelo. Ele não tem como saber o seu horário de atendimento.

Onde o site aparece: no chat ou no Claude Code?

No chat do Claude, a página aparece como artefato, uma janela ao lado da conversa onde você vê e testa o resultado. Segundo a central de ajuda sobre artefatos, eles existem no plano gratuito e nos pagos, e o Claude pode criar sites de uma página nesse formato. Para funcionar, a opção de criar e editar arquivos precisa estar ligada em Configurações, na parte de capacidades.

Um site com várias páginas, guardado em pastas no seu computador, é trabalho para o Claude Code. Ele cria e edita os arquivos, roda o projeto e confere o que fez, e vem nos planos pagos, a partir do Pro (página de preços). Quem não programa consegue usar pelo app desktop, sem terminal, como explico em Claude Code para não programadores.

Se a dúvida ainda é se o Claude dá conta do seu caso, comece por o Claude cria um site?.

Prompt 1: a página do seu negócio em um arquivo

Este é o pedido de partida. Copie, troque o que está entre colchetes e apague as linhas que não servem para você.

Crie a página única do site de [nome do negócio], [o que faz] em [cidade].

Objetivo: [ex.: receber pedidos de orçamento pelo WhatsApp].
Público: [quem visita e de onde, ex.: moradores da região, pelo celular].

Seções, nesta ordem:
1. Topo com o nome, uma frase sobre o que fazemos e um botão de WhatsApp.
2. Serviços: [lista dos serviços, com uma linha de descrição cada].
3. Como funciona: [os passos do atendimento].
4. Horário e endereço: [horário] e [endereço], com link para o Google Maps.
5. Perguntas frequentes: [3 a 5 perguntas que os clientes fazem de verdade].
6. Rodapé com telefone, e-mail e redes sociais.

Contatos: WhatsApp [número com DDD], e-mail [e-mail].
Use só os textos que passei. Onde faltar informação, deixe um aviso [PREENCHER] em vez de inventar.

Entregue um arquivo HTML único, com o CSS e o JavaScript dentro dele, que funcione bem no celular.

A linha do aviso [PREENCHER] evita o problema mais comum: o Claude completar um telefone, um prêmio ou um depoimento que não existe. Antes de publicar, procure esse aviso na página e substitua cada um.

Prompt 2: o visual sem cara de modelo pronto

Sem orientação de estilo, o resultado tende ao visual genérico. A própria Anthropic reconhece, nas boas práticas, que os modelos convergem para padrões previsíveis em design de páginas e sugere orientar tipografia, cores, movimento e fundo. A lista de exemplos do que evitar inclui fontes muito usadas e o degradê roxo sobre fundo branco.

Agora ajuste o visual da página:
- Cores da marca: [cor principal em hexadecimal] e [cor de destaque].
- Letra dos títulos: [nome da fonte] ou outra do Google Fonts com o mesmo estilo.
- Clima: [ex.: sóbrio e técnico / acolhedor / popular e direto].
- Referência: gosto de [site de referência] pelo [o que você gosta nele].
Evite o visual de modelo pronto: nada de degradê roxo e nada de ícones genéricos.
Mantenha todos os textos como estão.

A última linha importa. Pedido de visual que não protege o conteúdo pode voltar com o texto reescrito.

Prompt 3: os ajustes, um de cada vez

A primeira versão raramente é a final. Em vez de reescrever o pedido inteiro, peça uma mudança por vez na mesma conversa. Alguns exemplos que funcionam:

Troque a foto do topo por um fundo liso na cor [cor] e aumente o botão de WhatsApp.

No celular, o menu ficou cortado. Transforme em um botão que abre a lista de seções.
Teste em 360 pixels de largura.

O texto de "Como funciona" ficou longo. Reduza para três passos de uma linha cada,
sem mudar o sentido.

Uma mudança por pedido deixa claro o que mudou e facilita voltar atrás. Para conferir no celular sem publicar, estreite a janela do navegador até a largura de um telefone e veja se algum texto ou botão quebra.

Conversas longas também gastam mais do limite de uso, principalmente no plano gratuito, como explico em qual o limite de uso do Claude grátis. Quando a página estiver quase pronta, peça o arquivo final e comece outra conversa para os próximos ajustes, colando esse arquivo.

Prompt 4: o site com várias páginas no Claude Code

Num projeto maior, a documentação do Claude Code sugere um caminho em duas etapas: primeiro o Claude entrevista você até ter uma especificação escrita, depois uma sessão nova constrói a partir dela (boas práticas do Claude Code). O pedido inicial fica assim:

Quero criar o site de [nome do negócio] com as páginas [lista de páginas].
Ainda não pensei em todos os detalhes. Me entreviste até conseguir escrever
a especificação e grave em ESPECIFICACAO.md.

A mesma documentação traz duas orientações que fazem diferença em projetos de clientes. A primeira é dizer quando você quer a versão completa. O Claude tende a entregar o menor resultado que atende o pedido, e a Anthropic indica a expressão “be ambitious” (seja ambicioso) para pedir estados vazios, mensagens de erro e o fluxo inteiro funcionando.

A segunda é dar ao Claude uma conferência que diga se o trabalho está pronto: um teste, o resultado do build ou uma comparação com o modelo aprovado. No site novo da indústria do segmento de acústica, a virada só aconteceu depois de 305 testes unitários e 187 testes de ponta a ponta passarem. Para um site simples, basta pedir:

Construa o site a partir de ESPECIFICACAO.md. Seja ambicioso: formulário funcionando,
página de erro e versão para celular. No fim, rode o build, confira que cada página
abre sem erro e me mostre o comando que rodou e o resultado.

Quando ele disser que terminou, o comando /verify pede ao Claude que construa, rode e olhe o próprio site, o que pega problemas que os testes não pegam, segundo a mesma página de boas práticas.

Prompt 5: a revisão antes de publicar

Antes de colocar no ar, peça ao próprio Claude uma revisão com critério:

Revise a página como se fosse um cliente visitando pelo celular.
Liste, sem corrigir ainda: textos com erro, informações que parecem inventadas,
avisos [PREENCHER] que sobraram, botões que não levam a lugar nenhum e partes
que demoram para carregar.

Pedir a lista antes da correção deixa você decidir o que muda. É a mesma lógica de revisão que a Anthropic descreve nas boas práticas: rascunho, revisão contra critérios, refinamento.

O que o prompt não resolve?

Três coisas ficam com você, por melhor que seja o pedido.

As regras do negócio. A calculadora da Retiro Entulhos mostra o preço na hora porque cada regra do dono está no sistema: material, ensacar, andares, viagens e distância de carro. Nenhum modelo adivinha esse tipo de regra. Ela precisa estar escrita no pedido, com os números de quem conhece o negócio.

A publicação. O Claude escreve o código, mas o site só vai ao ar numa hospedagem, e o endereço com o nome da empresa depende de um domínio registrado no seu nome. As opções de hospedagem, inclusive gratuitas, estão em hospedagem de site.

A manutenção. Mudou o horário, entrou um serviço novo: alguém precisa abrir o arquivo, pedir a alteração e publicar de novo. Se você não quer cuidar disso, um site pronto e mantido por outra pessoa costuma sair mais barato que o seu tempo.

Para melhorar qualquer pedido, não só os de site, veja qual é o melhor prompt para o Claude, com as técnicas da documentação oficial e um exemplo de antes e depois.