# GPT-6 Astra para criar sites: tutorial completo com Codex e Hostinger MCP > O GPT-6 Astra no Codex CLI permite projetar, programar e publicar sites cinematográficos completos com Three.js e scroll interativo diretamente a partir do terminal, eliminando a programação manual e viabilizando deploy em produção via MCP da Hostinger em poucos minutos. - URL canônica: https://blog.lenaai.com.br/gpt-6-astra-criar-sites-tutorial-codex-hostinger - Autor: Thalena Lima; publicado por Lena AI. - Publicado em 21 de setembro de 2026; atualizado em 22 de setembro de 2026. - Leitura estimada: 6 min. - Categorias: IA na prática, Tecnologia, Tutorial. - Conteúdo complementar: https://www.youtube.com/watch?v=GWkm5vGVPuw --- > O GPT-6 Astra no Codex CLI é um agente de desenvolvimento de software autônomo que opera diretamente sobre o sistema de arquivos local, sendo capaz de projetar arquiteturas visuais, programar cenas 3D com Three.js e publicar aplicações em produção via MCP sem intervenção manual no código. ## O que muda com o GPT-6 Astra no terminal A maioria dos desenvolvedores e criadores já experimentou interfaces de chat na web para gerar blocos de código. O fluxo tradicional, no entanto, é fragmentado: você copia o trecho gerado, cola no editor, descobre dependências ausentes, volta ao navegador e repete o ciclo. O GPT-6 Astra rodando no **Codex CLI** altera radicalmente esse modelo operacional. Em vez de uma caixa de diálogo isolada, o modelo assume o controle de um diretório de trabalho local. Ele analisa a árvore de arquivos, instala bibliotecas via `npm`, executa scripts de build e abre o navegador para inspecionar o resultado visual em tempo real. ![Ambiente de desenvolvimento com GPT-6 Astra criando sites cinematográficos](https://raw.githubusercontent.com/vinilevy/lena-blog-assets/main/posts/gpt-6-astra-criar-sites-tutorial-codex-hostinger/gpt6_astra_sites.jpg) Esse nível de autonomia transforma o conceito de *vibe coding*: o desenvolvedor atua como diretor criativo e arquiteto de produto, enquanto o modelo executa tarefas longas de ponta a ponta com consistência de contexto. ## A arquitetura da experiência cinematográfica com scroll e Three.js Criar um site que foge do padrão genérico exige planejamento de narrativa visual antes de qualquer linha de código. No projeto demonstrado por Thalena Lima no canal oficial, o processo foi estruturado em quatro etapas coordenadas: 1. **Definição de identidade e marca:** Estabelecimento de paleta cromática, tipografia e diretrizes conceituais diretamente em HTML e CSS limpos. 2. **História visual e timeline de scroll:** Planejamento de cenas em que a rolagem do mouse avança o take de visualização da cena 3D, criando imersão progressiva. 3. **Modelagem e renderização 3D:** Uso do Three.js para renderizar objetos tridimensionais responsivos que respondem à posição do cursor e ao scroll. 4. **Refinamento e responsividade móvel:** Ajuste de câmeras virtuais e proporções para manter o impacto tanto em monitores ultrawide quanto em telas verticais de smartphones. ![Três interfaces responsivas desenvolvidas com GPT-6 Astra: Aruá, Claraê e Dobra](https://raw.githubusercontent.com/vinilevy/lena-blog-assets/main/posts/gpt-6-astra-criar-sites-tutorial-codex-hostinger/astra_web_showcase.jpg) ## Três marcas autorais testadas na prática Para testar o limite de resolução do GPT-6 Astra no modo Ultra com prompt único, foram submetidos três desafios de design e nichos complementares: * **Aruá (Bebida artesanal energética):** Foco em e-commerce jovem com cores vibrantes (tangerina e lima), microinterações no hover, carrinho persistente e simulação de frete com cálculo por CEP. * **Claraê (Clínica de estética minimalista):** Identidade visual baseada em tons oliva e serifas elegantes, incluindo fluxo de qualificação de leads com formulário modal em etapas e agendamento de consultas. * **Dobra (Churrasqueira portátil premium):** Engenharia visual modelada em Three.js, onde os componentes do produto (tampa, grelha, bandeja e base) se desmontam ao rolar a página para baixo e remontam perfeitamente ao subir. Todas as informações textuais foram preservadas como HTML e CSS reais para indexação em buscadores, evitando a armadilha de imagens estáticas "queimadas" com texto. ## Do localhost para a web: deploy automatizado via MCP da Hostinger Nenhum projeto construído localmente gera tração comercial se permanecer restrito ao `localhost`. O diferencial decisivo deste fluxo é o uso do Model Context Protocol (MCP) para conectar o ambiente do Codex diretamente à infraestrutura da **Hostinger**. Ao plugar o MCP oficial da hospedagem, o modelo ganha capacidade de executar ações externas seguras: - Criação e configuração de diretórios de publicação remota. - Upload dos pacotes estáticos gerados no build. - Apontamento e ativação de domínio personalizado diretamente pelo chat. Todo o processo de deploy ocorre em menos de dois minutos sem necessidade de acessar painéis cPanel ou clientes FTP tradicionais. ## Recursos, Descontos e Ecossistema Lena AI Para acelerar o desenvolvimento de interfaces e sistemas de alta conversão assistidos por inteligência artificial: * ⚡ **Servidor e Deploy na Hostinger:** Contrate sua [Hospedagem Hostinger com desconto exclusivo por este link](https://www.hostg.xyz/SHK2m) e use o cupom **THALENA** para garantir **10% OFF** em planos anuais de VPS. * 🎁 **Templates e Comunidade Gratuita:** Baixe os prompts utilizados e acesse nossa comunidade na [Lena Academy Oficial](https://academy.lenaai.com.br/?utm_source=organico&utm_medium=blog&utm_campaign=gpt6-astra). * 🎓 **Formação Profissional:** Domine as técnicas de programação autônoma e vibe coding no [Treinamento Completo IA Experts com Thalena Lima](https://iaexperts.thalena.com.br/?utm_source=organico&utm_medium=blog&utm_campaign=gpt6-astra). * 🏢 **Projetos Sob Medida:** Para empresas que buscam transformar seus processos com soluções e agentes corporativos de IA, [conheça as implementações da Lena AI](https://lp.lenaai.com.br/?utm_source=organico&utm_medium=blog&utm_campaign=gpt6-astra). ## Assista ao tutorial prático no YouTube Este artigo aprofunda os bastidores técnicos e a lógica de arquitetura da aula em vídeo gravada por Thalena Lima. Você pode acompanhar a demonstração tela a tela no link oficial abaixo: > **Vídeo complementar:** [O GPT-6 Astra é INSANO para Criar Sites (Tutorial Completo)](https://www.youtube.com/watch?v=GWkm5vGVPuw) ## Respostas diretas **O que diferencia o GPT-6 Astra no Codex de um chatbot de IA comum?** O GPT-6 Astra no Codex CLI opera diretamente dentro do sistema de arquivos local do projeto, permitindo criar pastas, instalar dependências com npm, escrever código React/Three.js e verificar erros de execução no navegador de forma autônoma. **Como funciona o deploy de sites com IA via Hostinger MCP?** O MCP oficial da Hostinger conecta o terminal do Codex aos servidores de hospedagem, permitindo realizar o upload dos arquivos estáticos compilados e vincular um domínio com um único comando em linguagem natural. ## Perguntas frequentes **Qual a diferença entre usar o GPT-6 Astra no Codex e no ChatGPT web?** Diferente do ChatGPT comum no navegador, o Codex CLI roda como agente local com controle direto sobre a pasta do projeto, instalando pacotes npm, gerando código e rodando testes sem intervenção manual. **O GPT-6 Astra consegue gerar animações 3D com Three.js?** Sim. O modelo consegue instanciar cenas WebGL com Three.js, amarrar animações à rolagem do mouse e adaptar o comportamento visual tanto para desktop quanto para smartphones. **Como funciona a publicação via Hostinger MCP?** O MCP da Hostinger conecta o ambiente de desenvolvimento local à hospedagem em nuvem, permitindo que a IA envie os arquivos de build e configure o domínio em produção direto pelo chat. ## Fontes - [Tutorial GPT-6 Astra por Thalena Lima](https://www.youtube.com/watch?v=GWkm5vGVPuw): Demonstração prática em vídeo da criação de três interfaces comerciais e uma experiência cinematográfica com scroll interativo utilizando GPT-6 Astra e deploy via Hostinger MCP.