Uma landing page com IA, no ar numa tarde

O plano é simples: o Astro cria o esqueleto do site, o Claude Code escreve o conteúdo e o design enquanto você explica o que quer, e a Vercel coloca no ar com uma URL. Três ferramentas, uma tarde, e nenhum template pago.

A mudança que vale notar: você não está codando a página, está dirigindo ela. O Astro entrega ao Claude um projeto limpo para trabalhar, o servidor de dev mostra cada mudança no instante em que ela acontece, e esse loop curto de olhar-falar-olhar é o que deixa você moldar um site inteiro conversando. A habilidade que importa deixa de ser sintaxe. Vira dizer o que você quer com clareza suficiente para que o resultado bata com a imagem que está na sua cabeça.

1. Crie o projeto com o Astro

O Astro é um framework para construir sites rápidos. Você não precisa saber como ele funciona por baixo dos panos: uma única linha monta o projeto inteiro. No Terminal:

npm create astro@latest my-landing

Ele vai te fazer algumas perguntas. Para começar, escolha o template vazio (Empty), e diga sim para instalar as dependências e iniciar o git. Quando terminar, entre na pasta:

cd my-landing

2. Abra com o Claude Code e descreva a página

Aqui está o truque de tudo isso. Abra o Claude Code na pasta e, em vez de programar, diga em linguagem simples que site você quer:

claude

E você escreve algo concreto. Quanto mais detalhe, melhor o resultado. Por exemplo:

> Crie uma landing page para um estúdio de fotografia.
  Um hero com um título grande e um botão "Agendar sessão",
  uma seção com três serviços, uma galeria de 6 fotos,
  e um rodapé com o email de contato. Estética limpa,
  fundo claro, tipografia elegante.

O Claude cria e edita os arquivos do projeto sozinho. Você não toca no código: você revisa o que ele propõe e dá o aval.

3. Veja no seu navegador

Para ver o site enquanto você constrói, suba o servidor de dev:

npm run dev

O Astro te diz onde ele está rodando:

  astro  v6.1  ready in 412 ms
  ┃ Local    http://localhost:4321/

Abra http://localhost:4321 no navegador. Aí está a sua página, no ar. Cada mudança que o Claude faz atualiza sozinha, sem recarregar. Deixe essa aba ao lado do seu terminal: é o loop de feedback em que a construção inteira roda.

4. Refine conversando

Construir aqui é uma conversa. Você olha a página, algo parece errado, você diz, e muda. Uma coisa por mensagem funciona melhor do que dez:

• "O hero está pequeno demais, deixa ele em tela cheia."
• "Muda a cor de destaque para um verde-oliva."
• "Adiciona uma seção de preços com três planos."

Às vezes ele exagera ou quebra alguma coisa. Sem drama: você diz o que deu errado e ele conserta. Assim, em duas horas, você tem uma página parecida com a que estava na sua cabeça.

5. Suba para o GitHub

Quando gostar, salve e suba. O Astro já iniciou o git quando criou o projeto, então você só precisa salvar a primeira versão e criar o repositório no GitHub. Se nunca fez isso, está passo a passo em Git e GitHub do zero:

git add .
git commit -m "first version"
gh repo create my-landing --source=. --public --push

6. Coloque no ar com a Vercel

A Vercel pega o seu repositório do GitHub e publica na internet, de graça. Vá em vercel.com, crie uma conta com o seu GitHub, e clique em Add New → Project. Escolha o seu repositório my-landing na lista.

A Vercel reconhece sozinha que é um projeto Astro, então você não precisa configurar nada: clique em Deploy. Em cerca de um minuto ela te dá uma URL pública e o seu site está no ar. A partir daí, cada git push atualiza ele automaticamente.

Quando algo quebra

Vai quebrar, um pouco. Os quatro problemas mais prováveis de aparecer, e o conserto de cada um:

• "command not found: npm". O Node ainda não está instalado, ou o terminal precisa ser reaberto depois de instalar. Resolva em instalar o Node, depois rode o comando de novo.
• O Claude quebrou o layout. Ele exagerou. Você não conserta isso na mão: diga "isso quebrou o header, desfaz e tenta de novo", ou volte para a última versão boa com git restore ..
• "Port 4321 is in use". Um servidor de dev ainda está rodando em outra aba. Feche, ou rode npm run dev -- --port 4322.
• O build da Vercel falhou. Abra o log do deploy na Vercel. Quase sempre é uma dependência faltando ou a versão errada do Node. Cole o erro no Claude Code e ele te entrega a única linha para mudar.

Agora tente isto

A página está no ar. Algumas formas de levar mais longe, cada uma a um prompt ou um clique de distância:

• Coloque no seu próprio domínio. Compre um, adicione na aba Domains do projeto na Vercel, e aponte o DNS para onde a Vercel mandar.
• Capture emails. Adicione um formulário de cadastro que realmente guarda o endereço, do jeito que este site faz: conecte o formulário ao n8n.
• Deixe bilíngue. Peça ao Claude uma versão /es da página e um seletor de idioma no header.
• Mantenha atualizado. Toda mudança depois ainda é só uma frase e um git push; o site no ar se atualiza sozinho.

O que você acabou de fazer

Um site de verdade, numa URL de verdade, numa tarde. O que importa não é o Astro nem a Vercel: é que você não escreveu a página, você descreveu. A ferramenta deixou de ser a barreira. O que faz a diferença agora é saber pedir o que você quer.