Como criar um site com o Claude Code que não fique horrível

Resposta rápida: É possível criar um site com o Claude Code que pareça projetado, e não gerado, mas só se você impedir que ele recorra aos padrões de sempre. Dê a ele um design system de verdade na forma de tokens, escreva suas regras em um arquivo CLAUDE.md e em uma especificação, construa em fases pequenas aprovadas por uma pessoa e adicione verificações de contraste, tokens, acessibilidade e velocidade que façam o build falhar quando algo sair do esperado.

A maioria dos profissionais de marketing que tenta isso chega ao mesmo resultado. A primeira página sai rápido e, à primeira vista, parece boa. Aí você repara na fonte Inter, no gradiente roxo, no título centralizado sobre dois botões e nos três cards idênticos, e percebe que já viu esse mesmo site muitas vezes.

Este guia é para profissionais de marketing e fundadores que querem criar ou reconstruir um site de marketing com o Claude Code e terminar com algo que tenha a cara da sua marca. Ele explica por que os sites feitos por IA parecem genéricos, o que entregar ao Claude antes de ele escrever uma linha, como mantê-lo na linha durante a construção e como trocar um site antigo sem perder tráfego de busca. O estudo de caso ao longo do texto é o próprio saas-hackers.com, reconstruído a partir do Webflow com o Claude Code em novembro de 2026. Todos os resultados citados desse projeto vêm dos próprios registros dele.

Dá para criar um site bonito com o Claude Code?

O Claude Code é uma ferramenta de programação com IA que lê o seu projeto, escreve e edita o código, executa comandos e verifica o próprio trabalho. Para um site de marketing, isso significa que ele pode configurar o framework, construir os componentes, conectar um CMS e rodar os testes, enquanto você decide o que o site deve ser e se cada etapa está boa o bastante.

Sim, desde que você faça o trabalho certo em torno dele. O Claude Code é bom na parte de engenharia e rápido nas partes repetitivas de um build. Ele não conhece a sua marca, os seus compradores nem as decisões que o seu time tomou em uma reunião, e vai preencher essas lacunas com a escolha mais comum que já viu. O que define se o site fica bonito é o trabalho que você faz antes e durante o build: o design system, as regras escritas e as verificações.

Se você ainda não definiu o que o site precisa fazer pelo seu pipeline, comece pelo nosso guia de estratégia de site para SaaS B2B. Este guia pressupõe que você já sabe de quais páginas precisa e quer construí-las bem.

Por que os sites feitos por IA são todos parecidos?

Os sites feitos por IA ficam parecidos porque os modelos de linguagem escolhem a próxima opção mais provável, e, em web design, a opção mais provável é a segura. A Anthropic chama isso de convergência distribucional: as escolhas de design seguras dominam os dados de treinamento e, sem direcionamento, o modelo sorteia a partir desse centro de alta probabilidade (Anthropic, 2025).

A própria equipe de frontend da Anthropic descreve o resultado sem rodeios. Ao receber o pedido de criar uma landing page sem orientação, um modelo “quase sempre vai se render a fontes Inter, gradientes roxos sobre fundo branco e animações mínimas” (Anthropic, 2025). O argumento deles é que isso enfraquece a identidade da marca e faz com que as interfaces criadas por IA sejam fáceis de reconhecer e de descartar.

Os sinais são fáceis de identificar quando você os conhece:

• Inter, Roboto ou fontes do sistema em todo lugar, com pesos que quase não mudam entre títulos e texto corrido
• Gradientes roxos ou violeta e títulos com texto preenchido por gradiente
• Um hero centralizado com selo em formato de pílula, título, subtítulo e dois botões
• Três cards idênticos logo abaixo do hero, seja qual for o conteúdo
• Os mesmos cantos arredondados e a mesma sombra cinza suave em tudo
• Emojis ou ícones de linha genéricos ao lado de cada tópico

A mesma pesquisa mostra a saída. O Claude é altamente direcionável: diga quais padrões evitar e o que usar no lugar, e o resultado melhora na hora (Anthropic, 2025).

A Anthropic empacotou essa orientação como uma skill de design de frontend e um plugin do Claude Code, e observa que você pode criar sua própria skill com base no design system da sua empresa. Essa última parte é a que importa para o site de uma empresa.

Conselhos genéricos sobre “fontes interessantes” levam a outro site genérico. O seu próprio design system leva ao seu site.

Comece por um design system, não por um prompt

Um design system para um build com IA é um conjunto de decisões nomeadas que o Claude consegue ler: cores, fontes, tamanhos de texto, espaçamentos, raio dos cantos e breakpoints, cada um com uma função. Escritos como design tokens em um arquivo, eles se tornam os únicos valores que o site pode usar.

A diferença em relação a um PDF de brand guidelines é que os tokens são legíveis por máquina. Um PDF diz que o seu destaque é laranja. Um arquivo de tokens diz brand.flame é #df4e32 e é usado no logotipo, nas setas, nos filtros ativos e no foco dos campos, e em mais nada. O Claude consegue seguir a segunda instrução à risca, e um script consegue verificar que ele seguiu.

O que um design system utilizável para um build com o Claude Code contém:

• Tokens de cor com funções. Fundo, texto, títulos, texto secundário, bordas, uma cor de destaque e os temas (por exemplo, um escuro e um claro) que combinam essas cores.
• Tipografia. As fontes da marca como arquivos que você tem licença para hospedar por conta própria, uma escala tipográfica com saltos de tamanho reais e os pesos usados em cada nível.
• Espaçamento, raio e breakpoints. Uma escala de espaçamento, um raio por função (botões, cards, seções) e as larguras de tela em que o layout muda.
• Componentes com um nome só. Um botão, um card ou um hero tem o mesmo nome no arquivo de design, no código e no CMS, para que ninguém precise traduzir.

De onde isso vem? Se você tem um designer ou uma biblioteca no Figma, exporte os tokens de lá.

Se você já tem um site de que gosta, os tokens podem ser extraídos da folha de estilos dele, que foi o que aconteceu na reconstrução do SaaS Hackers. Se você não tem nenhum dos dois, pague um designer por essa parte antes de construir qualquer coisa. Um dia de decisões de design custa menos do que um site com a cara de todos os outros.

Uma escolha técnica faz o sistema pegar. Se você usa Tailwind CSS, não importe o tema padrão dele. Gere o tema a partir do seu arquivo de tokens, para que as únicas cores, tamanhos e fontes que existam no projeto sejam os seus. O Claude não consegue pegar um roxo genérico que não está lá.

Como registrar as regras para o Claude?

O Claude Code lê um arquivo chamado CLAUDE.md no início de cada sessão, então é nele que você coloca as regras do projeto. Um CLAUDE.md de projeto fica no repositório e é compartilhado, por meio do controle de versão, com todos que trabalham nele (documentação do Claude Code, 2026).

A orientação da Anthropic para escrevê-lo é prática. Mantenha cada CLAUDE.md abaixo de cerca de 200 linhas, porque arquivos mais longos consomem mais contexto e reduzem o quanto o Claude os segue.

Deixe as instruções concretas o bastante para serem verificadas: “Execute npm test antes de fazer o commit” em vez de “teste suas alterações”. Agrupe as regras sob títulos e remova as que se contradizem (documentação do Claude Code, 2026).

Você também não precisa começar do zero: o /init comando gera um arquivo inicial a partir do seu código.

Para o build de um site, o CLAUDE.md que funciona cobre cinco coisas:

1. O que você está construindo e com quê. A stack, a hospedagem e onde fica o conteúdo.
2. A lista do que nunca fazer. Coisas que não podem acontecer: mudar uma URL no ar, fazer commit de segredos, adicionar um serviço pago ou um script de terceiros sem perguntar, gravar no projeto errado do CMS.
3. Padrões. Nenhuma cor, tamanho ou fonte fora dos tokens. Um único nome de componente em todo lugar. Saída estática por padrão. WCAG 2.2 AA. Inglês britânico ou americano.
4. Regras de escrita para qualquer texto que o Claude adicionar. Linguagem simples, nada de texto inventado e um marcador impossível de passar despercebido (as palavras COPY NEEDED em maiúsculas, mais o que está faltando) onde o texto ainda não existe.
5. Comandos. Como rodar o servidor de desenvolvimento, o build e cada verificação. As boas práticas da Anthropic chamam o comando que roda as suas verificações de a linha mais útil do arquivo (documentação do Claude Code, 2026).

O CLAUDE.md é orientação, não imposição. O Claude o trata como contexto e pode decidir que uma diretriz não se aplica. Para tudo o que precisa acontecer sempre, como rodar o formatador ou nunca ler um arquivo de segredos, o Claude Code oferece hooks e regras de permissão que a própria ferramenta aplica (documentação do Claude Code, 2026).

Coloque o briefing mais longo em um arquivo de especificação separado. A Anthropic sugere pedir ao Claude que entreviste você até conseguir escrever a especificação, salvá-la como SPEC.md e, em seguida, iniciar uma sessão nova para construir a partir dela. Assim, a construção começa com um contexto limpo e uma definição escrita do que significa "pronto" (documentação do Claude Code, 2026). Para regras de marca e de design que só importam em alguns momentos, uma skill as mantém fora do caminho até serem necessárias. Nosso guia sobre Claude Skills para equipes de marketing explica como elas funcionam.

Construa em fases pequenas, aprovadas por uma pessoa

Um site construído com o Claude Code dá errado do mesmo jeito que um site construído por um desenvolvedor júnior: coisa demais de uma vez, sem ninguém olhando até o fim. A solução também é a mesma. Divida a construção em fases, revise cada uma e não comece a próxima até que a anterior seja aprovada.

Uma ordem de fases que funciona para um site de marketing:

1. Configuração. Framework, estilos, CMS e hospedagem conectados, com uma página vazia sendo publicada em um link de prévia.
2. Modelo de conteúdo e migração. Schemas do CMS e o conteúdo existente transferido como rascunhos.
3. Design system. Tokens, fontes e todos os componentes, exibidos em uma única página de catálogo.
4. Templates e páginas. Cada tipo de página construído a partir dos componentes e preenchido com conteúdo real.
5. SEO. Tags do head, dados estruturados, sitemap, redirecionamentos e verificações em relação ao site antigo.
6. Publicação. Prévias, o fluxo de trabalho do editor e tudo o que reconstrói o site quando o conteúdo muda.

Cada fase termina com um pull request e um link de prévia pelo qual uma pessoa possa navegar. O pull request informa o que foi construído, o que foi verificado e o que se encontrou, o que o Claude presumiu e o que falta. É nesse último título que as dúvidas não resolvidas aparecem, em vez de serem resolvidas na base do palpite.

Por que um catálogo de componentes importa

O catálogo é uma página que mostra todos os componentes em todos os estados: cada estilo de botão, cada card, o cabeçalho aberto e fechado, campos de formulário com erros, cada bloco de seção com conteúdo de exemplo. É onde você aprova o visual antes que qualquer template o utilize. Corrigir um card uma vez no catálogo custa muito menos do que descobrir o erro em 200 páginas. Deixe o catálogo fora do sitemap e defina-o como noindex.

Veja o catálogo na largura de um celular, além do desktop. A maioria dos sites feitos por IA com aparência genérica desanda primeiro no celular: texto pequeno demais, cards apertados, menus sobrepostos.

Que verificações mantêm um site feito por IA sob controle?

São as verificações que impedem um bom começo de virar um resultado genérico. As melhores práticas da Anthropic resumem bem: o Claude para quando o trabalho parece pronto. Por isso, dê a ele algo que retorne aprovado ou reprovado, e ele poderá corrigir os próprios erros antes que você os veja (documentação do Claude Code, 2026).

Para um site de marketing, estas são as verificações que vale a pena incluir. Faça a própria construção executá-las, de modo que uma falha interrompa a publicação em vez de virar mais um item em uma lista de tarefas.

• Tokens atualizados. A folha de estilos gerada corresponde ao arquivo de tokens, de modo que ninguém editou um sem o outro.
• Contraste. Cada par de texto, campo de formulário e foco em todos os temas atende ao WCAG 2.2 AA. Isso significa pelo menos 4,5:1 para texto normal e 3:1 para texto grande (W3C, 2023). O anel de foco e as bordas que delimitam um controle também precisam de 3:1.
• Lint de tokens. Um script que falha diante de qualquer cor, tamanho ou fonte no código que não seja um token: nada de códigos hex, nada de rgb(), nada de tamanhos em pixels digitados em um componente, nada de nomes de fontes.
• Nomes dos componentes. Cada bloco de seção no CMS tem um componente com o mesmo nome, e vice-versa.
• Verificação de acessibilidade. Uma varredura automatizada, como o axe, em cada tipo de página, mais uma verificação pelo teclado: dá para acessar e usar todos os menus, filtros e formulários sem o mouse?
• Velocidade. Lighthouse em mobile para a home e os principais templates, executado mais de uma vez. Nosso guia sobre Core Web Vitals explica o que as pontuações de velocidade medem.
• Layout em larguras reais. Capturas de tela ou uma varredura de overflow nas larguras de celular, tablet e desktop, à procura de texto que transborda da caixa.

Peça evidências ao Claude todas as vezes: o comando que ele executou e o resultado. Um "todas as verificações passaram" sozinho diz muito pouco, e ler o resultado é mais rápido do que rodar tudo de novo por conta própria (documentação do Claude Code, 2026).

Depois, olhe as páginas com os próprios olhos. As verificações automáticas detectam o que é mensurável. Elas não conseguem dizer que uma página parece um template genérico.

Como substituir um site existente sem perder tráfego de busca?

Substituir um site no ar é uma migração, e o risco é perder posições nos rankings, não ficar feio. A regra que protege você é que toda URL que existe no site antigo mantenha exatamente o mesmo endereço no novo ou receba um redirecionamento permanente para a página certa.

O Claude Code é muito indicado para essa checagem, porque ela é repetitiva e exata. Em uma reconstrução, configure três verificações antes de fazer a troca:

• Verificação de rotas: todo endereço do sitemap antigo retorna 200 na prévia do site novo, e um endereço desconhecido retorna 404.
• Verificação de paridade: para cada endereço, compare title, meta description, canonical, H1 e dados estruturados com a página no ar, e reprove qualquer coisa que tenha se perdido.
• Verificação de redirecionamentos: todo redirecionamento que a plataforma antiga mantinha é recriado, as cadeias são simplificadas e nada redireciona para uma página que redireciona de novo.

Não deixe o Claude mudar um slug "para organizar". Coloque "nunca altere uma URL que exista no site no ar" na lista de proibições. Nosso guia de estratégia de SEO traz o panorama mais amplo. Se o site é grande ou o tráfego é muito importante, uma agência da nossa lista de agências de migração de SEO pode cuidar do plano de migração enquanto o Claude faz a construção.

Na prática: como o SaaS Hackers foi reconstruído com o Claude Code

O SaaS Hackers (operado pela Team 4) migrou do Webflow para Astro, Tailwind CSS, TypeScript, Sanity e Netlify em novembro de 2026, com o Claude Code fazendo a construção. O briefing foi deliberado quanto ao visual: reconstruir o design atual, sem redesign. Não havia arquivo do Figma nem design system, então o design system foi construído a partir do site no ar.

Isso moldou a abordagem. As cores, fontes, espaçamentos e raios de borda foram extraídos da folha de estilos do site no ar para um arquivo de tokens, que acabou com 26 tokens de cor e três temas (escuro, preto e claro). A fonte de exibição da marca, a Heming, tem licença para hospedagem própria, e a Inter é de código aberto, então ambas foram hospedadas por nós.

O tema padrão do Tailwind não foi importado, então os tokens eram os únicos valores disponíveis. O cabeçalho, o rodapé, os cards, as partes do perfil de especialista, os campos de formulário, o corpo dos posts e 14 blocos de seção foram construídos com blocos correspondentes no CMS e exibidos em um catálogo de componentes.

As quatro verificações de design (tokens, contraste, lint de tokens e nomes de componentes) rodam no início de cada build e o interrompem se qualquer uma falhar. Os componentes foram aprovados nas larguras de celular e desktop antes que qualquer template os usasse.

Os registros do próprio projeto mostram como ele se saiu:

• O axe encontrou 0 violações em 13 páginas quando os templates ficaram prontos.
• Todos os 409 endereços no escopo retornaram 200 na prévia, na mesma etapa.
• Todos os 409 endereços superaram as páginas do Webflow no ar na verificação de paridade (title, description, canonical, H1 e schema), sem nenhuma perda.
• O Lighthouse mobile em produção, com três execuções cada na home em inglês e em alemão, em um post e em um perfil de especialista, deu de 99 a 100 em desempenho e 100 em acessibilidade e boas práticas.
• Uma varredura de overflow em 11 tipos de página, em 7 idiomas e 4 larguras de tela, não encontrou problemas.

O que fez a diferença foi simples. O Claude nunca precisou escolher uma cor ou uma fonte, porque o arquivo de tokens já tinha escolhido. E uma pessoa revisou cada fase antes que a seguinte começasse, então os problemas foram encontrados no catálogo, e não nas páginas no ar. O que o Claude fez mais rápido do que uma equipe foi a parte repetitiva: a migração de conteúdo, os 134 redirecionamentos prontos no lançamento e a execução das mesmas verificações depois de cada mudança. Como o site funciona no dia a dia, com seus agentes e travas de segurança, está em nosso guia sobre a stack de tecnologia do Claude Code para um site agêntico.

Erros comuns e como evitá-los

A maioria das construções de sites com IA que dão errado falha por um entre poucos motivos. Cada um tem uma solução simples.

Começar com "crie uma home para mim". O Claude preenche cada lacuna com um padrão, e a home define o visual de tudo o que vem depois. Escreva primeiro o design system e o CLAUDE.md, depois construa os componentes e, por fim, as páginas.

Descrever a marca com adjetivos. "Ousada, moderna, confiável" não significa nada em que um modelo possa se basear. Dê a ele tokens, arquivos de fonte e uma captura de tela de uma página de que você goste. A documentação da Anthropic sugere colar a captura de tela do design direto no prompt.

Construir tudo em uma única sessão. Sessões longas perdem o fio das decisões iniciais. Trabalhe em fases, inicie sessões novas a partir da especificação e mantenha cada alteração pequena o bastante para ser revisada.

Confiar no “pronto”. O Claude relata o que ele acredita ter feito. Faça o build rodar as verificações, peça o resultado e confira você mesmo o preview na largura de um celular antes de aprovar qualquer coisa.

Deixar o texto surgir do nada. Um build feito por IA escreve títulos e depoimentos plausíveis só para preencher espaço. Proíba texto inventado no CLAUDE.md e use placeholders visíveis, para que nada falso chegue ao site no ar. Nosso guia sobre como usar o Claude para copywriting explica como escrever o texto de verdade.

Quando contratar um designer ou uma agência?

O Claude Code substitui boa parte do tempo de desenvolvimento. Ele não substitui o critério de design. Chame um designer quando você não tiver um design system, quando a própria marca precisar de ajustes ou quando o site for o principal meio pelo qual os compradores avaliam você e “está bom” não for suficiente.

Uma divisão sensata é pagar um designer pelo sistema e pelos layouts das páginas-chave, e deixar o Claude Code construir a partir deles, sob as verificações acima. O designer também dá a você um ponto de comparação: um mockup contra o qual o Claude pode ser checado vale mais do que qualquer descrição. Veja nossa lista de web designers para marcas de SaaS B2B e encontre freelancers que podem cuidar dessa parte.

Chame uma agência quando você precisar que alguém assuma o projeto inteiro: estratégia, design, desenvolvimento, migração e um responsável quando algo quebrar. Pergunte como ela usa IA no processo de desenvolvimento e quais verificações rodam antes de qualquer coisa ir ao ar. Se preferir entregar o projeto todo a terceiros, compare as melhores agências de web design para SaaS B2B antes de fazer o briefing com qualquer uma.

Sobre o SaaS Hackers

O SaaS Hackers é uma comunidade de especialistas em SaaS B2B que compartilham insights práticos, criada por quem realmente executa por trás do crescimento. Publica guias práticos, templates e um diretório selecionado a dedo de agências e especialistas com experiência comprovada em marketing digital para SaaS B2B. O SaaS Hackers é mantido pela Team 4, e este site foi reconstruído com o Claude Code seguindo a abordagem descrita neste guia.