Dá para criar um site profissional inteiro conversando com uma IA, sem escrever uma linha de código. Você descreve o site que quer, com as cores, as seções e os textos, e o Claude Code monta os arquivos direto na pasta do seu computador, prontos para subir em qualquer hospedagem.
Nesta aula eu crio do zero o site de um escritório de advocacia, o Carlos Dias Advocacia. É uma página única com menu fixo, banner, áreas de atuação, seção de equipe, depoimentos em carrossel, perguntas frequentes e botão flutuante de WhatsApp. Você pode refazer exatamente esse projeto para usar no seu portfólio, mesmo que ainda não tenha nenhum cliente.
E não precisa mexer em terminal. O Claude Code hoje vem dentro do aplicativo do Claude para computador, na aba Code, lá em cima. Você instala como qualquer outro programa, faz login, aponta a pasta do projeto e começa a pedir. Só vale saber antes que essa aba funciona em contas Pro, Max, Team ou Enterprise, porque o plano gratuito do Claude não abre essa parte.
No mapa abaixo está o passo a passo completo, com os três prompts prontos para copiar: o do site, o de revisão de segurança e o de SEO. Clique em cada passo para abrir o conteúdo.
O Claude Code é um assistente que roda no seu computador e escreve os arquivos do site direto na pasta do projeto. Você não precisa mexer no terminal: basta baixar o aplicativo do Claude para computador e clicar na aba Code, no topo da tela.
- Baixe o aplicativo do Claude para computador e instale, como qualquer outro programa.
- Abra o aplicativo e faça login com a sua conta.
- No topo aparecem três abas: Chat, Cowork e Code. Clique em Code.
- Crie uma pasta vazia no computador só para esse projeto, com um nome simples como site-cliente.
- Na aba Code, deixe o ambiente em Local, clique em Select folder e escolha a pasta do projeto.
O Claude Code trabalha dentro da pasta que você selecionou. Se você apontar para a área de trabalho, ele vai criar os arquivos soltos ali no meio de tudo. Aponte sempre para a pasta do projeto.
As imagens ficam separadas antes de qualquer código. Crie uma pasta chamada carlos-dias dentro da pasta do projeto e coloque os arquivos lá com estes nomes exatos.
- carlos-dias-logo-1.png logo do escritório, fundo transparente
- hero-1.jpg imagem do topo do site
- office-lawyer-1.png foto do escritório
- team-parallax-bg-1.png fundo da seção da equipe
- team-carlos-1.jpg, team-luciana-1.jpg, team-mariana-1.jpg
- team-amanda-1.jpg, team-victor-1.jpg, team-julio-1.jpg
Nome de arquivo com espaço, acento ou letra maiúscula funciona no seu computador e quebra na hospedagem. Deixe tudo em minúsculo e com hífen no lugar do espaço.
Um site bom começa por um prompt bem escrito. Você entrega o objetivo, o público, as cores, as seções e os caminhos das imagens, e o Claude Code monta o arquivo completo.
1. Negócio e cidade: [preencher]
2. Público e objetivo da página: [preencher]
3. Cores da marca: [preencher]
4. Fontes: [preencher]
5. Seções, nesta ordem: topo com menu, banner principal, sobre, serviços, como funciona, equipe, depoimentos, contato com WhatsApp, perguntas frequentes e rodapé
6. Imagens: estão na pasta [nome da pasta], com estes nomes: [listar]
7. Contato: WhatsApp, e-mail, endereço e horário
Regras: responsivo no celular, um h1 por página, imagens com alt e carregamento preguiçoso, botão flutuante de WhatsApp e nenhum travessão nos textos.
IMAGENS
Estão na pasta carlos-dias, ao lado do HTML. Logo do topo e do rodapé: carlos-dias/carlos-dias-logo-1.png. Fundo do banner e da faixa de destaque: carlos-dias/hero-1.jpg. Foto do escritório: carlos-dias/office-lawyer-1.png. Fundo da equipe: carlos-dias/team-parallax-bg-1.png. Fotos da equipe: team-carlos-1.jpg, team-luciana-1.jpg, team-mariana-1.jpg, team-amanda-1.jpg, team-victor-1.jpg e team-julio-1.jpg.
DADOS
Carlos Dias Advocacia, Dr. Carlos Dias, OAB/MG 000000, Uberlândia MG com atendimento online para todo o Brasil. WhatsApp 5534999999999, e-mail contato@carlosdiasadvocacia.com.br, Avenida Rondon Pacheco 1000, Centro. Segunda a sexta, das 8h às 18h.
CORES
Petróleo #002e3a nos fundos escuros, dourado #ebcc71 em botões e detalhes, dourado claro #efdbac em molduras, creme #f5f5f3 nos fundos claros, texto #17323a e texto secundário #5a6b70. Botão dourado sempre com texto petróleo.
FONTES
Questrial nos títulos, Manrope no texto e Allura na frase de destaque.
SEÇÕES
1. Topo fixo com logo, menu e redes, que ganha fundo ao rolar
2. Banner com título, dois botões e a linha de atendimento
3. O escritório, com foto e quatro cards
4. Passo a passo da defesa, em cinco cards
5. Áreas de atuação, em seis cards
6. Como funciona, em linha do tempo de quatro etapas
7. Faixa com frase de destaque
8. Equipe, em seis cards com foto redonda
9. Depoimentos em carrossel
10. Contato com maquete de celular em CSS
11. Perguntas frequentes em acordeon
12. Rodapé em quatro colunas e botão flutuante de WhatsApp
REGRAS
Responsivo, um h1 por página, imagens com alt e carregamento preguiçoso. Sem promessa de resultado e sem previsão de valores. Nenhum travessão nos textos.
O site dificilmente fica pronto na primeira tentativa. Abra o arquivo no navegador, veja o que ficou estranho e peça uma coisa por vez, como aumentar o banner, dar mais respiro entre as seções ou trocar a ordem de uma parte.
Site gerado por IA costuma sair com pontos frágeis que ninguém percebe olhando a tela. Antes de publicar, peça uma revisão de segurança no próprio Claude Code.
Verifique e corrija:
1. Links que abrem em nova aba sem rel noopener
2. Chaves, tokens, senhas ou e-mails internos deixados no código
3. Formulários que enviam dados sem destino definido ou sem validação
4. Scripts externos desnecessários ou carregados de origem duvidosa
5. Uso de innerHTML com conteúdo vindo do usuário
6. Comentários no código com informação que não deveria ir para produção
No final, liste em português o que foi corrigido e o que eu preciso configurar na hospedagem, como HTTPS e cabeçalhos de segurança.
Com o site seguro, falta ele ser encontrado. O prompt de SEO organiza os títulos, as descrições e os dados que o Google usa para entender de quem é a página.
1. Title de até 60 caracteres com o serviço e a cidade
2. Meta description de até 155 caracteres
3. Link canonical
4. Open Graph e Twitter Card completos
5. JSON-LD do tipo certo para o negócio, com nome, telefone, e-mail, endereço, horário e áreas atendidas
6. Um h1 só na página e a hierarquia de títulos corrigida
7. Alt descritivo em todas as imagens
8. Carregamento preguiçoso nas imagens abaixo da dobra
9. Crie também o sitemap.xml e o robots.txt
No final, liste em português o que mudou e o que ainda depende de mim.
Criar um site é o começo. Viver disso é o próximo passo.
No Sites Evolution você aprende o caminho completo do web designer, com WordPress, Elementor, IA, Figma e Canva, e também a parte que sustenta o negócio: precificar, apresentar a proposta e entregar o projeto para o cliente.
Conhecer o Sites EvolutionDuas coisas que costumam travar quem está começando
A primeira é o plano da conta. Se você clicar na aba Code e aparecer um convite para fazer upgrade, é porque a conta ainda está no gratuito e o Claude Code precisa de uma assinatura paga para rodar.
A segunda vale para quem usa Windows: o Git precisa estar instalado no computador para as sessões locais funcionarem. É uma instalação rápida e você faz uma vez só. No Mac ele já vem por padrão, então esse passo nem existe.
O site quase nunca sai pronto na primeira resposta
Isso é normal e não quer dizer que você escreveu o prompt errado. O caminho que funciona é abrir o arquivo no navegador, olhar com calma e pedir um ajuste por vez, como aumentar a altura do banner, dar mais respiro entre as seções ou trocar a ordem de duas partes. Pedidos separados são mais fáceis de conferir, e você enxerga exatamente o que mudou a cada resposta.
Também não pule os prompts de segurança e de SEO. Site gerado por IA costuma sair com pontos frágeis que ninguém percebe olhando só a tela, como link que abre em nova aba sem proteção ou formulário sem destino definido. E sem title, description e dados estruturados, o Google demora bem mais para entender de quem é aquela página.
Onde publicar o seu site
A hospedagem que eu uso nos projetos do canal. O desconto já vem aplicado quando você entra pelo link.
Assista à aula completa
No vídeo eu mostro cada etapa na tela, do primeiro prompt até o site publicado, incluindo os ajustes que precisei pedir no meio do caminho.
Quando o site vira serviço
Deixar o site bonito é o começo do trabalho. Para viver disso, você ainda precisa saber precificar o projeto, apresentar a proposta de um jeito que o cliente entenda o valor e entregar tudo organizado no final. É esse caminho completo que eu ensino no Sites Evolution, com WordPress, Elementor, IA, Figma e Canva, mais a parte de negócio que sustenta a rotina de web designer.
Criar um site é o começo. Viver disso é o próximo passo.
No Sites Evolution você aprende o caminho completo do web designer, com WordPress, Elementor, IA, Figma e Canva, e também a parte que sustenta o negócio: precificar o projeto, apresentar a proposta e entregar tudo organizado para o cliente.
Conhecer o Sites Evolution
