Como criar um site com IA no Claude Code, sem cara de template

Dias atrás, uma aluna mandou no nosso grupo o link do primeiro site que ela colocou no ar para uma clínica de estética e desabafou: “Gente, tô tão feliz, nem vendi nada ainda, mas consegui criar meu primeiro site com IA e com o MazyOS, foi revelador, chorei muito”. Quem nunca trabalhou com tecnologia acha que precisa decorar código antes de construir alguma coisa, mas quando vê uma página real funcionando no navegador pela primeira vez, percebe que a barreira técnica acabou.

Hoje existem dois caminhos bem diferentes para escolher a melhor IA para criar site. O primeiro é o dos construtores tradicionais, como os geradores internos do Wix ou da Hostinger, ou plataformas fechadas de navegador como Lovable (veja quanto pesa o preço do Lovable no fim do mês) e Base44, em que você preenche um formulário curto ou fica preso a créditos e recebe um template pré-fabricado igual ao de milhares de outras empresas. O segundo caminho é o que eu uso todos os dias no meu negócio: abrir o Claude Code, deixar a IA escrever o código limpo do zero dentro da pasta do cliente e conduzir cada detalhe na conversa, exatamente como se eu estivesse orientando um desenvolvedor sênior ao meu lado.

Quando você cria pelo Claude Code, a página carrega rápido, você tem liberdade total para mudar qualquer seção e o resultado não fica preso àquelas caixas engessadas de construtor visual, seja para montar uma landing page de alta conversão, um cardápio digital ou até criar um aplicativo com IA. Eu só recorro ao WordPress quando a empresa já tem toda a operação rodando lá dentro e migrar daria trabalho desnecessário, uma diferença prática que detalho em WordPress, Elementor ou código?. No vídeo abaixo, você vê a minha tela aberta enquanto eu construo do zero o site da minha própria empresa de IA usando o Claude Code.

O que você precisa

• Um computador comum, Windows ou Mac. Você pode instalar o Claude Code no Windows, no Mac e usar a extensão dele dentro do VS Code, que é o ambiente onde eu faço todas as minhas entregas por enxergar as pastas do projeto ao lado do chat.
• Uma assinatura que libere o agente de código. No Claude, o Claude Code vem incluso a partir do plano Pro, que custa R$ 110 por mês na assinatura direta pelo site, como explico no guia sobre quanto custa o Claude, já que a conta gratuita não inclui a ferramenta de terminal. Se você já assina o ChatGPT, pode usar o Codex da OpenAI para cumprir a mesma função, até porque o MazyOS roda no Claude Code, no Codex e no Antigravity.
• Ou uma alternativa gratuita para dar a largada. Quem quer começar hoje sem tirar um real do bolso pode baixar o Antigravity, do Google, que oferece um plano grátis, de US$ 0 por mês, com limite de uso por semana. Dá tranquilamente para levantar e vender os primeiros sites por ele antes de migrar, como mostro no comparativo entre Claude Code ou Antigravity.
• As informações reais do cliente. Separe o nome da empresa, o serviço principal, a cidade onde atua, o número de WhatsApp, o perfil do Instagram, a logo e boas fotos do local ou da equipe. Quanto mais contexto verdadeiro você entrega para a IA, menos ela inventa texto genérico.

Como criar o site, passo a passo

1. 1Crie uma pasta no computador com o nome da empresa que você vai atender e abra essa pasta dentro do VS Code. É ali que todos os arquivos do site vão morar.
2. 2Inicie o Claude Code dentro dessa pasta, clicando no ícone da extensão no VS Code ou digitando no terminal o comando que mostro logo abaixo.
3. 3Apresente o negócio para o Claude com riqueza de contexto: diga quem é o dono, o que ele vende, qual é o público, em que cidade fica e qual objetivo a página precisa cumprir. Quando eu faço reunião com o cliente, costumo gravar a conversa, transcrever o áudio e colar na pasta, porque dali saem os melhores argumentos de venda.
4. 4Envie duas ou três referências visuais de páginas que você admira ou consulte modelos de site prontos por nicho, apontando o que quer aproveitar de cada uma, como a distribuição do cabeçalho, a paleta de cores ou o estilo dos botões.
5. 5Peça para o Claude construir a primeira versão completa e abrir a prévia no seu navegador para você avaliar o resultado em tela cheia.
6. 6Refine no diálogo: sempre que um bloco parecer apertado ou fora do tom, tire um print daquele pedaço, cole no chat e diga em português simples o que precisa mudar até a página ficar com a cara do negócio.
7. 7Quando estiver redondo, publique em uma hospedagem moderna como a Vercel ou a Netlify e aponte o domínio do cliente. O próprio Claude te guia em cada clique dessa etapa, como mostro no passo a passo de como hospedar o site de graça e resumo em onde hospedar o site.

Se você preferir abrir o agente direto pelo terminal dentro da pasta do projeto, basta rodar este comando:

Você não precisa usar jargão técnico na hora de fazer o pedido inicial. Um comando direto e bem contextualizado funciona muito melhor: “Crie um site de uma página para o escritório [nome do negócio], em [cidade]. Eles atendem clientes que buscam [serviço principal] e o foco da página é levar a pessoa a chamar no WhatsApp. Siga a estrutura de topo da referência que anexei, use a tipografia [nome da fonte] e aplique as cores da logo. Coloque o botão de WhatsApp no cabeçalho e no encerramento, escrevendo em tom próximo e humano, sem usar travessões.”

Como tirar a cara de IA do site

Se você pedir apenas “faça um site bonito para uma clínica”, qualquer inteligência artificial vai recorrer ao visual padrão com que foi treinada: fundo escuro genérico, degradê roxo ou azulado, três caixinhas de ícones alinhadas e frases cheias de adjetivos vazios. O empresário pode até não saber explicar o motivo técnico, mas bate o olho e sente que aquilo parece artificial. Para a página ter aparência de projeto de estúdio caro, quem precisa dar o repertório visual para a IA é você.

• Busque referências fora da bolha de IA. Antes de abrir o chat, escolha dois ou três sites reais em galerias de curadoria como recent.design, curated.design ou styles.refero.design e mande os prints para o Claude ter um norte estético de verdade.
• Assuma o controle da tipografia, das cores e do respiro. Diga explicitamente quais fontes usar nos títulos e no corpo do texto, passe os códigos das cores da marca do cliente e peça bastante espaço em branco entre as seções.
• Peça animações suaves de rolagem explicando o movimento. Quando encontrar uma transição bonita num site de referência, tire prints do começo e do fim do efeito, descreva como os elementos se movem e peça para o Claude implementar usando a biblioteca gratuita GSAP. Como o modelo lê imagem estática muito melhor do que vídeo, o print acompanhado da sua explicação funciona na mosca.
• Limpe os vícios de escrita automática. Oriente o Claude a usar o vocabulário real do cliente e proíba expressões batidas e travessões no meio das frases, que entregam de longe texto gerado no piloto automático.
• Priorize fotos autênticas. Sempre que possível, use fotografias reais da fachada, do consultório ou do produto do cliente; quando precisar criar ativos visuais do zero, gere imagens coerentes com a direção de arte da página, seguindo o que indico em qual IA eu uso pra imagem.

Quando eu rodo o MazyOS, a própria estrutura da pasta do cliente já guarda a paleta, a tipografia, a oferta e o tom de voz da empresa, além de trazer skills prontas de direção visual para o Claude não cair no padrão de fábrica. E se você gosta de testar variações visuais antes de partir para o código final, também pode rascunhar o layout no Claude Design e exportar direto para o Claude Code. Foi entregando páginas com esse nível de acabamento profissional somado à otimização de Google Meu Negócio e às frentes de como divulgar minha empresa que o Felipe Almeida fechou R$ 5.606,03 em vendas:

Precisa saber programar?

Não precisa, e eu mesmo construí toda a minha operação sem saber programar. Quem escreve e corrige o HTML, o CSS e o JavaScript é o Claude; o seu papel é entender a dor comercial do cliente, dirigir o visual e testar a página no navegador. Se aparecer qualquer aviso de erro na tela, basta copiar a linha ou tirar um print e colar de volta na conversa para ele mesmo resolver. Para você ver como quem nunca programou consegue colocar projetos no ar e já fechar os primeiros clientes em poucas semanas, dá uma olhada no relato da aluna do canal @MundodasAmigasFlorida, que começou sem experiência e vendeu dois sites para familiares e conhecidos por R$ 3.000 e R$ 2.000 logo nas duas primeiras semanas:

Onde costuma travar

• Aviso “Credit balance is too low”. Isso acontece quando o Claude Code tenta consumir créditos pré-pagos da API em vez de usar o login da sua assinatura mensal. Mostro como trocar a autenticação em segundos no guia sobre credit balance is too low.
• Aviso “Prompt is too long”. Significa que o histórico daquela sessão acumulou arquivos e prints demais para a memória da conversa ler de uma vez. Veja como compactar ou limpar a sessão sem perder o projeto em o que fazer com o prompt is too long.
• Erro de Git ausente no Windows. Na primeira instalação em computadores Windows, o terminal pode reclamar que não encontrou o Git instalado; o passo a passo para resolver está em git is not in PATH.
• O limite de uso acabou no meio do ajuste. Bater no teto da janela de cinco horas acontece com todo mundo que emenda vários testes seguidos. Explico como economizar contexto no guia sobre como funciona o limite e como fazer ele durar.
• Dificuldade para apontar o domínio no DNS. Não tente adivinhar configuração de painel sozinho: tire um print da tela do Registro.br, da Hostinger ou do cPanel do cliente e peça para o Claude te dizer exatamente onde colar cada registro. Hoje em dia essa parte ficou mamão com açúcar.
• Layout quebrado ou cortado na tela do celular. Mais da metade dos clientes do seu cliente vai abrir o site pelo celular, então sempre inspecione a versão mobile antes de enviar o link e, se notar texto vazando para o lado, siga o ajuste rápido de o site ficou cortado no celular.

De criar o site a vender o site

Construir a página rápido é a parte que a tecnologia resolveu para nós. O que coloca dinheiro de verdade no seu bolso é pegar essa facilidade e usar a estratégia da prévia pronta: em vez de sair oferecendo serviço da boca para fora, você escolhe um empresário que já te conhece, monta a primeira tela do site dele antes de falar em preço e mostra o negócio dele brilhando no navegador.

Funciona tanto em capital quanto no interior. O Vitor, que mora em São Luiz do Paraitinga, uma cidade de 12 mil habitantes, mandava mensagem para os comerciantes dizendo que tinha rascunhado um site novo para eles; quando o dono respondia curioso, ele finalizava a prévia rapidinho, enviava o link e só nas férias fechou R$ 2.500 num projeto e R$ 2.650,50 em outro presencial. Já o Thiago montou o site e dois carrosséis para o cliente uma hora antes da chamada e fechou R$ 8 mil no dia seguinte a ter entrado no MazyOS.

E o melhor é que o Claude Code permite ir além de uma página estática já nos primeiros contratos, mesmo para quem está começando do zero. O Leo Maia nunca tinha feito um site na vida antes de entrar no MazyOS e, aplicando o método, fechou dois projetos de R$ 3.000 cada entregando site, CRM e brandkit, além de construir R$ 3.500 por mês de recorrência:

Se você quer entender como definir o valor de cada entrega conforme o porte da empresa, eu abro todas as faixas de preço em quanto cobrar por um site, e mostro o roteiro completo de abordagem pelo WhatsApp em como vender sites.

Tem curso de criar sites? O que vale a pena

Vale separar duas coisas que muita gente confunde na hora de pesquisar. Um curso tradicional de web design forma desenhistas de interface no Figma ou especialistas em Elementor que levam semanas em cada projeto. Criar sites com IA pelo Claude Code é uma operação enxuta, focada em transformar contexto de negócio em páginas rápidas e sistemas funcionais em poucas horas.

Por isso, a minha régua para avaliar qualquer formação na área é simples: o treinamento precisa terminar com um cliente real pagando pelo seu trabalho, e não apenas com um certificado na gaveta. No curso do MazyOS, nós vamos direto ao ponto em 7 módulos e 26 aulas, desde preparar o computador do zero até montar o site, gerar a proposta comercial, precificar e abordar os primeiros empresários da sua agenda, de um jeito que um único contrato fechado já paga todo o seu investimento.

Se você quiser colocar na balança a carga horária, o foco prático e o valor das formações disponíveis hoje no Brasil, consulte o levantamento completo em curso de IA.