Uma IA como Claude, ChatGPT, Codex ou Cursor consegue escrever um projeto Astro inteiro: páginas, componentes, estilos e conteúdo. O que costuma travar é o fim do processo. O projeto existe, mas falta rodar o build, conferir o resultado e colocar a página num endereço público que dê para mandar ao cliente.

Este guia mostra dois caminhos para criar um site Astro com IA e publicá-lo pelo Site no Ar, com um prompt pronto para colar na conversa e uma lista do que revisar antes de mandar o link para alguém.

Se você ainda está decidindo se Astro é a tecnologia certa, comece por o que é Astro. Na prática, ele gera HTML pronto e só envia JavaScript para as partes interativas, o que combina com landing pages, sites de negócio e portfólios.

O que você precisa antes de começar

Três coisas:

  1. Um cliente de IA com suporte a MCP remoto. Claude, ChatGPT, Claude Code, Codex, Cursor e Gemini CLI estão entre os compatíveis. A lista completa e o passo a passo de cada um estão em Conecte sua IA.
  2. Uma conta no Site no Ar com plano ativo. Todos os planos são pagos e sem fidelidade. O Básico custa R$ 10/mês e inclui 5 sites e 1 domínio próprio.
  3. A conexão feita uma vez. Você autoriza o acesso pelo login no navegador, sem copiar chave de API. Depois disso, a IA passa a ter as ferramentas para criar, editar, pré-visualizar e publicar sites.

O Site no Ar não escreve o site por você. A sua IA escreve; o Site no Ar roda o build, publica, guarda as versões e devolve o link na conversa.

Dois caminhos para criar o site Astro

Caminho Quando escolher O que acontece primeiro
Partir de um template Astro Seu site se parece com um modelo do catálogo O template vai ao ar com conteúdo de exemplo no seu endereço
Pedir do zero Estrutura muito própria ou identidade visual única A IA cria uma Landing Page vazia e escreve as páginas

Nos dois casos o resultado é o mesmo tipo de site: uma Landing Page do Site no Ar, que é um projeto Astro com páginas em src/pages, componentes em src/components e arquivos avulsos em public/.

Caminho 1: começar de um template Astro

Os templates Astro são sites completos, já publicados, para casos como oferta de produto, clínica, restaurante, portfólio e proposta comercial. Cada um tem uma prévia ao vivo para você comparar antes de escolher.

Quando a IA cria o site a partir de um template, o Site no Ar publica o conteúdo de exemplo no seu endereço e prepara o projeto em seguida. Quando o site aparece como No ar, a IA troca textos, fotos, cores e contatos pelos seus e publica de novo.

Muitos templates trazem um arquivo AGENTS.md na raiz. É um guia para a IA: diz onde fica cada conteúdo, quais regras o template segue e como fazer mudanças comuns, como trocar a paleta ou esconder uma seção. O arquivo não vai ao ar.

Esse caminho rende mais quando o seu caso já está coberto. Um template de clínica, por exemplo, já traz seções de especialidades, convênios e localização, e regras sobre o que não prometer em saúde. A IA trabalha em cima de uma estrutura testada em vez de inventar uma.

Caminho 2: pedir o site do zero

Quando nenhum modelo se aproxima do que você quer, peça à IA uma Landing Page nova. Ela cria o site com o tipo landing, escreve as páginas .astro, os estilos e o conteúdo.

Aqui o resultado depende muito do pedido. Uma IA sem contexto tende a produzir a mesma página genérica de sempre: hero com gradiente, três cards de benefícios, depoimentos inventados. Dê a ela o que só você sabe: quem é o público, qual é a oferta, que ação o visitante deve tomar e que tom a marca usa.

Um prompt para colar na sua IA

Ajuste os colchetes e cole na conversa com a IA já conectada ao Site no Ar:

Quero criar um site Astro no Site no Ar para [nome do negócio].


Sobre o negócio:
- o que vendemos: [produto ou serviço]
- para quem: [público e cidade, se for local]
- ação principal do visitante: [chamar no WhatsApp, agendar, comprar]
- contato: [WhatsApp, e-mail, endereço]
- tom: [direto e acolhedor, técnico, descontraído]


Como fazer:
1. Veja os templates Astro do Site no Ar. Se algum combinar com o meu caso,
   me mostre as opções antes de criar. Se nenhum combinar, crie uma Landing Page do zero.
2. Use o endereço [meu-endereco].
3. Siga o AGENTS.md do template, se existir.
4. Não invente depoimentos, números, prêmios ou preços. Onde faltar
   informação, deixe um texto marcado e me avise.
5. Antes de publicar, rode a verificação do projeto, abra a pré-visualização
   e confira a página no celular.
6. Publique, espere a publicação terminar e me mande o link e a lista do que mudou.

O item 4 é o mais importante. Sem ele, a IA preenche lacunas com dados plausíveis e falsos, e o problema só aparece quando um cliente lê “mais de 500 atendimentos” num negócio que abriu mês passado.

Como a IA trabalha no projeto

Depois do pedido, a IA edita os arquivos numa sessão de edição do site. Cada alteração é salva automaticamente, mas nada vai ao ar sozinho. O site público só muda quando a IA publica.

Isso permite um ciclo seguro: a IA escreve, confere, ajusta e só então publica. Se você interromper a conversa no meio, as alterações continuam salvas na sessão e a próxima edição continua de onde parou.

Em um projeto Astro, as mudanças mais comuns caem em poucos lugares:

  • textos e dados do negócio, muitas vezes concentrados num arquivo de conteúdo do template;
  • páginas em src/pages, onde cada arquivo vira uma rota;
  • estilos e tokens de cor;
  • public/ para favicon, robots.txt e sitemap.xml.

O que conferir antes de publicar

Pré-visualização

Peça a pré-visualização antes do primeiro deploy. Ela abre o site com as alterações numa URL temporária, que não é o endereço público. Em Landing Pages, a primeira pré-visualização pode levar cerca de um minuto para subir o servidor de desenvolvimento.

Olhe a página inteira, não só o topo. Seções escondidas, links de âncora quebrados e imagens de exemplo esquecidas costumam aparecer no meio ou no rodapé.

Build e verificação do projeto

A Landing Page passa por bun run build a cada publicação. Se o build falhar, a publicação fica com status de falha, o erro diz o que corrigir e a versão anterior continua no ar.

Para não descobrir o erro só no deploy, peça à IA para rodar a verificação do projeto antes. Nos templates, o script typecheck roda o astro check, que aponta erros de tipo e de componentes. No Astro 7, uma tag sem fechamento passa a gerar erro de compilação, então vale rodar essa checagem depois de cada rodada grande de edição.

Celular

Links de anúncio, WhatsApp e redes sociais costumam ser abertos no celular. Peça para a IA conferir a pré-visualização em largura de celular e revise você também:

  • o botão principal aparece sem rolar muito;
  • textos não estouram a largura da tela;
  • o menu abre e fecha;
  • o link do WhatsApp abre com a mensagem certa.

SEO básico

Antes do primeiro link público, confira:

  • <title> e meta description específicos de cada página, sem “Home” ou o nome do template;
  • um único H1 por página, coerente com o título;
  • texto alternativo nas imagens que carregam informação;
  • sitemap.xml e robots.txt com o endereço certo do site.

Nos planos Pro e Diamante, você pode pedir à IA o Sinal do site, que dá uma nota para o Google e outra para as IAs e lista o que corrigir.

Publicar e republicar no mesmo endereço

Quando a revisão termina, a IA publica e acompanha o status até a publicação concluir. Cada publicação bem-sucedida vira uma versão nova, e o link seu-endereco.sitenoar.app volta na conversa.

Para mudar algo depois, peça à IA na mesma conversa ou numa nova: “troque o horário de sábado para 9h às 13h e publique”. O endereço continua o mesmo. Se uma mudança sair errada, dá para restaurar uma versão anterior, e a restauração também vira uma versão nova, sem apagar o histórico.

Quando o conteúdo estiver aprovado, conecte um domínio próprio, como seunegocio.com.br. O Básico inclui um; o HTTPS é emitido automaticamente.

Erros comuns ao criar site Astro com IA

  • Pedir interatividade em tudo. Carrossel, animação e contador em toda seção transformam ilhas pequenas em muito JavaScript. Peça interatividade só onde ela ajuda o visitante.
  • Deixar fotos de exemplo. Templates trazem imagens de banco só para mostrar o layout. Troque pelas suas antes de divulgar.
  • Colocar chaves no código. Se o site usa uma API, a chave vai como segredo do site, nunca num arquivo. Veja Landing Pages e Aplicações Web.
  • Publicar sem abrir o link final. A pré-visualização não é o site público. Depois do deploy, abra o endereço real e confira.

Próximo passo

Escolha um modelo em templates Astro para landing page ou cole o prompt acima na sua IA conectada. Se depois você quiser comparar onde manter o projeto, o guia sobre como hospedar um site Astro mostra as alternativas ao Site no Ar e quando cada uma faz mais sentido.