Astro Framework e a ferramenta mais inovadora para criar sites rapidos em 2026. Com sua arquitetura de ilhas (islands architecture) e zero JavaScript por padrao, o Astro entrega performance excepcional. Quando combinado com agentes de IA, o Astro agentes IA permite criar sites completos — blogs, documentacao, landing pages e e-commerces — com produtividade maxima. Este tutorial mostra como Claude Code e Codex podem gerar paginas Astro, componentes ilha e integracoes com React e Tailwind.
Setup do Astro com Claude Code
O setup de um projeto Astro Claude Code e rapido com o agente:
Criacao do projeto
claude "Crie um projeto Astro com React, TypeScript e Tailwind. Use 'npm create astro@latest' com as opcoes: - Template: basics - TypeScript: strict - Dependencias: React, Tailwind CSS Nome do projeto: astro-blog."
Claude Code executa o scaffolding completo, instalando as dependencias e configurando o projeto.
Verificacao da estrutura
claude "Verifique a estrutura do projeto Astro: - Confirme que astro.config.mjs existe e tem as integracoes corretas - src/pages/ para as paginas - src/components/ para os componentes - src/layouts/ para layouts - public/ para assets estaticos - Verifique se o Tailwind esta configurado no projeto"
Instalacao de integracoes
claude "Instale integracoes uteis para o blog Astro: - @astrojs/mdx (para posts em MDX) - @astrojs/rss (para feed RSS) - @astrojs/sitemap (para sitemap.xml) - astro-seo (para metadados SEO) Configure cada integracao no astro.config.mjs."
Paginas Astro com Claude Code
Claude Code cria paginas Astro com a sintaxe correta de frontmatter e template:
Pagina inicial
claude "Crie src/pages/index.astro com:
- Frontmatter: import Layout from @layouts/Layout.astro
- Hero section com titulo, descricao e CTA
- Grid de posts recentes (usando Astro.glob para buscar)
- Seccao de categorias
- Newsletter signup (ilha React com formulario)
- Meta tags SEO e Open Graph
- Layout aplicado com <Layout> wrapper"
Pagina de blog
claude "Crie src/pages/blog/[...page].astro com paginacao: - Frontmatter: define PAGE_SIZE = 6 - Busca todos os posts com Astro.glob('../posts/*.md') - Ordena por data (mais recente primeiro) - Pagina com Previous/Next - Grid de cards com titulo, data, descricao e link - Usa Astro.url para a pagina atual"
Layout global
claude "Crie src/layouts/Layout.astro com:
- <!DOCTYPE html> com lang='pt-BR'
- Head com meta tags, fonts, e CSS global
- Header com navegacao (logo, links, Dark Mode toggle)
- <slot /> para o conteudo
- Footer com links e copyright
- SEO via astro-seo
- Tailwind CSS classes para estilo global"
Componentes .astro com Codex
Codex e excelente para gerar componentes .astro — a sintaxe e limpa e previsivel:
Card de post
opencode "Crie src/components/PostCard.astro com:
- Props: title (string), date (Date), description (string), slug (string), tags (string[])
- Template: card com imagem (opcional), titulo, data formatada,
descricao truncada (150 chars), tags como badges
- Estilo com Tailwind: bg-white dark:bg-slate-800, rounded-xl, shadow, hover:shadow-lg
- Link para /blog/{slug}
- E um componente .astro puro (sem JavaScript no cliente)"
Header com navegacao
opencode "Crie src/components/Header.astro com: - Props: currentPath (string, para highlight do link ativo) - Logo do site (texto ou imagem) - Links de navegacao: Home, Blog, Sobre, Contato - Link ativo com classe diferente (text-primary) - Dark mode toggle (botao que alterna classe 'dark' no HTML) - Responsivo: hamburguer em mobile, menu horizontal em desktop - E um componente .astro — o dark mode toggle sera uma ilha React"
Footer
opencode "Crie src/components/Footer.astro com: - Props: none (dados estaticos) - Grid com 3 colunas: Sobre, Links Rapidos, Redes Sociais - Copyright com ano atual (new Date().getFullYear()) - Links para redes sociais (GitHub, Twitter, LinkedIn) - Estilo Tailwind: bg-slate-900 text-white, py-12"
Ilhas interativas com React e Codex
A arquitetura de ilhas (islands) e o que torna o Astro unico. Codex gera componentes React que sao hidratados seletivamente:
Formulario de newsletter (ilha React)
opencode "Crie src/components/NewsletterForm.tsx com: - Client directive: client:load (hidrata na carga) - Campos: email (input), botao 'Inscrever' - Validacao de email no frontend - Apos submit: mostra mensagem de sucesso ou erro - Animacao: fade in da mensagem de confirmacao - Estilizado com Tailwind (usa classes do tema global)"
Dark mode toggle (ilha React)
opencode "Crie src/components/ThemeToggle.tsx com: - Client directive: client:idle (hidrata quando o navegador esta ocioso) - Botao que alterna entre icone de sol e lua - Le preferencia do localStorage ('theme') - Alterna classe 'dark' no document.documentElement - Animacao: rotate-180 na transicao - Props: className para customizacao"
Como usar as ilhas em paginas .astro
---
// src/pages/index.astro
import NewsletterForm from '../components/NewsletterForm.tsx';
import ThemeToggle from '../components/ThemeToggle.tsx';
---
<Layout>
<ThemeToggle client:idle />
<!-- Conteudo estatico -->
<NewsletterForm client:load />
</Layout>
O JavaScript do NewsletterForm so e carregado se o componente estiver visivel. O ThemeToggle so e carregado quando o navegador estiver ocioso. Zero JavaScript para o resto da pagina.
Coleta de dados com Astro.glob
Astro.glob e a API de coleta de dados do Astro. Claude Code a usa para buscar arquivos de conteudo:
Posts em MDX
claude "Crie src/pages/blog/[slug].astro que:
- Usa Astro.glob('../posts/*.mdx') para buscar todos os posts
- Gera uma pagina para cada post baseada no slug
- Renderiza o conteudo MDX com <Content />
- Frontmatter: title, date, description, tags, image
- Navegacao entre posts anterior/proximo
- Breadcrumb: Home > Blog > {title}
- SEO com meta tags especificas do post"
Colecao de categorias
claude "Crie src/pages/blog/categoria/[categoria].astro: - Usa Astro.glob e filtra por categoria - Lista posts da categoria com paginacao - Mostra o nome da categoria como titulo - 404 se categoria nao existir (Astro.redirect)"
Com Astro.glob, todo o conteudo e processado em build time, gerando HTML estatico sem necessidade de JavaScript no servidor ou cliente.
Exemplo pratico: Blog com Astro
Vamos unir tudo em um blog completo.
Estrutura completa
claude "Crie a estrutura completa do blog Astro: - src/pages/index.astro: landing page - src/pages/blog/[...page].astro: listagem paginada - src/pages/blog/[slug].astro: post individual - src/pages/blog/categoria/[categoria].astro: posts por categoria - src/pages/sobre.astro: pagina sobre - src/pages/contato.astro: pagina de contato - src/layouts/Layout.astro: layout global - src/components/: Header, Footer, PostCard, NewsletterForm, ThemeToggle - src/posts/: posts em MDX com frontmatter - public/: assets estaticos"
Build e deploy
claude "Configure o build e deploy do blog Astro: - Execute 'astro build' para gerar o site estatico - Verifique a pasta dist/ com o HTML gerado - Configure Vercel ou Netlify para deploy - Teste o RSS feed em /rss.xml - Teste o sitemap em /sitemap-index.xml"
Com Claude Code e Codex, voce tem um blog Astro completo — paginas, componentes, ilhas React, colecao de dados e RSS — construido em horas, com performance excepcional e zero JavaScript desnecessario.
FAQ — Perguntas Frequentes
Astro e melhor que Next.js para quais casos?
Astro e superior para sites de conteudo (blogs, documentacao, landing pages, portfolios, e-commerce com pouco JavaScript) porque gera HTML estatico por padrao e carrega zero JavaScript no cliente. Next.js e melhor para aplicacoes web interativas (dashboards, apps, plataformas SaaS).
Claude Code e Codex conhecem a sintaxe .astro?
Sim. Ambos conhecem a sintaxe dos componentes .astro (frontmatter ---, HTML template, slots, Astro.glob, e as diretivas client:* para hidratacao de ilhas). O codigo gerado usa a sintaxe correta sem erros.
Preciso JavaScript no cliente com Astro?
Nao. O Astro gera HTML puro por padrao, sem JavaScript. So ha JavaScript se voce adicionar componentes interativos (ilhas) com diretivas como client:load ou client:idle. Agentes de IA geram codigo Astro que segue essa filosofia — zero JS onde nao e necessario.
Astro funciona com React, Vue e Svelte ao mesmo tempo?
Sim. Astro suporta multiplos frameworks na mesma pagina — voce pode ter um header em React, um card em Vue e um footer em Svelte no mesmo arquivo .astro. Claude Code pode misturar frameworks naturalmente.
O Orquestra funciona com o Astro dev server?
Sim. O Orquestra no Windows 11 executa o Astro dev server (astro dev) normalmente com HMR. Voce pode ter Claude Code gerando paginas em um terminal e o live preview em outro.
Comece com Astro e agentes hoje
Astro agentes IA e a combinacao ideal para criar sites rapidos e performaticos. Com Claude Code para paginas e layouts, Codex para componentes .astro e ilhas React, e Astro.glob para coleta de dados, voce cria sites completos com performance excepcional e produtividade maxima.
O Orquestra no Windows 11 e o ambiente ideal para orquestrar Claude Code e Codex no desenvolvimento Astro — terminais lado a lado, HMR do Astro dev server, e tudo visivel no canvas infinito.
Baixe o Orquestra para Windows 11 e comcece seu teste gratis de 7 dias.
Links internos recomendados
- Estilizando com Tailwind CSS e Agentes de IA — Tailwind e usado nos exemplos Astro
- TypeScript React com Agentes de IA — componentes React usados como ilhas no Astro
- Next.js 16 com Agentes de IA — comparacao entre Astro e Next.js para diferentes casos
Links externos recomendados
- Astro Documentation — documentacao oficial do Astro Framework
- Astro Islands Architecture — guia da arquitetura de ilhas
- Tailwind CSS — utilitarios CSS usados nos exemplos
Pronto para orquestrar seus agentes?
Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Gratis por 7 dias.