Como criar um site com IA do zero usando Claude Code

Criar um site costumava exigir meses de aprendizado.

Você precisava aprender HTML, CSS, JavaScript. Precisava entender como servidores funcionam. Precisava de um desenvolvedor ou de tempo para estudar tudo isso.

Esse tempo passou.

Hoje, você descreve o que quer — em português, da forma como falaria com um colega — e a IA constrói. Você revisa. Ajusta. Publica.

Isso tem um nome: vibe coding. E Claude Code é a ferramenta que torna esse processo concreto.

O que é vibe coding

Vibe coding é criar software descrevendo o que você quer, em linguagem natural, e deixando a IA gerar o código.

Você não escreve código. Você escreve instruções.

A diferença prática: em vez de aprender como fazer, você aprende o que pedir. E pedir é algo que qualquer pessoa já sabe fazer.

Não significa que o resultado é sempre perfeito na primeira vez. Significa que você itera em velocidade de conversa — não em velocidade de aprendizado técnico.

O que é Claude Code

Claude Code é uma ferramenta da Anthropic que roda no terminal do seu computador e usa o modelo Claude para criar, editar e corrigir código.

Terminal é o programa de linha de comando do seu sistema — no Windows é o PowerShell ou o Command Prompt, no Mac é o Terminal. É uma janela onde você digita comandos de texto.

Claude Code integra diretamente com a pasta do seu projeto. Ele lê os arquivos existentes, entende o contexto e escreve código coerente com o que já existe.

Antes de começar: o que você precisa

Três coisas. Apenas três.

Node.js instalado. Node é o ambiente que roda aplicações JavaScript no seu computador. Você baixa em nodejs.org e instala como qualquer programa.

Claude Code instalado. Após instalar o Node, abra o terminal e rode:

npm install -g @anthropic-ai/claude-code

Depois rode claude para autenticar com sua conta Anthropic.

Uma ideia do que você quer construir. Pode ser um blog, um portfólio, uma landing page, um site institucional. Quanto mais claro o objetivo, mais rápido o resultado.

Passo 1: criar a estrutura do projeto

Abra o terminal. Navegue até a pasta onde você quer criar o projeto:

cd Desktop
mkdir meu-site
cd meu-site
claude

O último comando abre o Claude Code dentro da pasta do projeto.

Agora você descreve o que quer. Por exemplo:

"Crie um site em Next.js para um consultor de finanças pessoais. Preciso de: página inicial com headline e chamada para ação, página sobre, página de serviços e página de contato com formulário. Design moderno, escuro, profissional."

Claude Code vai criar toda a estrutura inicial. Arquivos de configuração, pastas organizadas, código base.

Next.js é um framework — uma estrutura de desenvolvimento — que facilita criar sites modernos com React. É o que o Modo Build usa. É uma escolha sólida para a maioria dos projetos.

Passo 2: ver o site rodando localmente

Após a criação inicial, Claude Code vai instruir você a rodar o servidor de desenvolvimento.

Servidor de desenvolvimento é um programa que roda localmente no seu computador e mostra como o site ficará antes de publicar.

O comando é geralmente:

npm install
npm run dev

Abra o navegador em http://localhost:3000. Você vai ver o site funcionando.

A partir daí, você conversa com Claude Code para ajustar o que não gostou.

"A cor do header está muito clara. Quero preto com texto branco." "Adiciona um menu hamburger para mobile." "O formulário de contato não tem campo de telefone. Adiciona."

Cada instrução é executada em segundos.

Passo 3: iterar com clareza

A qualidade do resultado depende da clareza das instruções.

Instruções vagas produzem resultados genéricos. Instruções específicas produzem resultados precisos.

Em vez de: "Melhora o design."

Use: "Aumenta o espaçamento entre as seções para 80px. Adiciona uma linha divisória sutil entre a seção de serviços e a seção de depoimentos. Muda o botão de 'Saiba mais' para 'Agendar consulta'."

Cada mudança é reversível. Se não gostou — descreve o que ficou errado e Claude corrige.

Passo 4: conectar imagens e conteúdo real

Sites de verdade precisam de conteúdo real. Fotos, textos, logos.

Para imagens, coloque os arquivos na pasta public/ do projeto. Depois instrua Claude Code:

"Usa a imagem /public/foto-perfil.jpg na seção sobre."

Para textos, copie e cole o conteúdo final diretamente na conversa:

"Substitui o texto da headline por: 'Transforme sua relação com o dinheiro em 90 dias.'"

Claude edita os arquivos com o conteúdo exato que você passou.

Passo 5: preparar para publicação

Antes de publicar, rode o build de produção para verificar que tudo funciona:

npm run build

Build de produção é o processo que otimiza o código para ser publicado — comprime arquivos, remove o que não é necessário, gera as versões finais das páginas.

Se aparecer algum erro, cole a mensagem de erro no Claude Code e peça para corrigir.

Onde publicar o site

A publicação é o próximo passo — e Vercel é a plataforma mais simples para isso.

Vercel é um serviço de hospedagem especializado em Next.js. Você conecta seu projeto, Vercel detecta automaticamente como construir e publicar.

O processo completo de publicação está na próxima lição da trilha.

O que você acabou de aprender

Criar um site com IA não é usar um construtor de sites com arrastar e soltar.

É uma conversa com uma ferramenta que entende o que você quer e executa com código real.

O resultado é um site profissional, com código real, que você pode expandir, personalizar e publicar — sem precisar aprender programação do zero.

A curva de aprendizado existe. Mas ela está em aprender a descrever bem o que você quer, não em aprender a escrever código.

Esse é o fundamento do vibe coding. E é o que separa quem está construindo hoje de quem ainda está esperando ter tempo para estudar.