Aprenda a fazer seu site em 10 minutos
Esta é a rota interna oficial da Evyon. Um tutorial simplificado e prático que mostra como estruturar, programar e colocar seus projetos no ar utilizando inteligência artificial de última geração.
Nossos Ajudantes Inteligentes
ChatGPT ou Claude (O Cérebro)
O que ele faz:
Pense nele como um conselheiro ou amigo super inteligente. Ele não consegue mexer nos arquivos do seu computador, mas planeja o site com você, dá ideias de textos, escolhe cores e monta todo o roteiro passo a passo.
Antigravity & IDE (O Construtor)
O que ele faz:
É o ajudante que faz o trabalho pesado. Ele entra nas pastas do seu computador, cria os arquivos, escreve os códigos de programação e até abre o navegador para testar tudo automaticamente para você.
Skills (A Receita do Bolo)
O que ele faz:
É um pequeno manual de instruções que você entrega para a inteligência artificial. Ele diz exatamente quais cores usar, o tamanho dos botões e as regras da sua marca para evitar que a IA cometa erros.
Como eles trabalham em harmonia
Primeiro, você conversa com o Cérebro (ChatGPT/Claude) para desenhar a ideia do site. Depois, você pega o Manual (Skill) com as cores da marca. Por fim, você entrega tudo para o Construtor (Antigravity), que vai criar todas as pastas e arquivos no seu computador sozinho.
O Fluxo de Desenvolvimento
Preparando o Ambiente Instalação
Primeiro passo é baixar as duas versões do assistente Antigravity para a sua máquina de trabalho: a versão convencional para conversações focadas e o cliente IDE integrado.
Especializando a Inteligência Artificial Instrução
Abra o ChatGPT ou o Claude e peça para ele se comportar como um especialista na criação de Skills (instruções em formato Markdown `.md` com cabeçalho YAML). Essa estrutura é a linguagem ideal que o assistente agentivo entende.
O que é uma Skill?
Uma Skill é um arquivo de especificação estruturado em markdown com frontmatter que mapeia o comportamento do agente, regras de codificação, bibliotecas permitidas e padrões de design (tokens CSS) para um projeto específico, evitando retrabalho e inconsistências.
Pacote de Skills Exclusivo Evyon
Para acelerar seu desenvolvimento, a Evyon está disponibilizando um pacote exclusivo contendo as mesmas Skills que nosso time utiliza internamente em nossos projetos e automações reais. Economize tempo importando nossas regras de design e código!
1. GoodCode (Código Organizado)
Ensina o assistente a criar códigos limpos, organizados e fáceis de ler para que o site seja leve e rápido de carregar.
2. LPCreator (Página de Vendas)
Ensina o assistente a criar Landing Pages — que são aquelas páginas profissionais de uma única tela feitas especificamente para atrair clientes e vender produtos.
3. SiteCreator (Criador de Sites)
Ensina a IA a construir sites completos com várias páginas, menus de navegação e galerias de fotos.
4. Using Tokens (Economia de Energia)
Diz à IA para ser direta ao ponto e economizar combustível (tokens), diminuindo o custo das suas conversas e acelerando as respostas.
Organizando a Estrutura Diretório
Crie uma nova pasta vazia em seu computador. Esta pasta será o diretório raiz do seu novo site, onde todos os códigos fontes (HTML, CSS, JS e assets) serão criados e manipulados de forma isolada.
Conectando o Agente e Selecionando o Modo Configuração
Abra a pasta do projeto que você acabou de criar dentro do Antigravity. Em seguida, selecione o modo de execução como a IA deverá trabalhar. Cada modo de execução oferece um nível diferente de autonomia e velocidade:
Default
Segurança Máxima: O agente solicita aprovação manual por meio de pop-ups antes de executar qualquer comando no terminal ou modificar arquivos.
Full Machine
Escrita Livre: Permite ler e gravar arquivos no computador livremente, mas ainda pede autorização para executar processos do terminal.
Turbo Mode
Autonomia Total: Desabilita todas as confirmações e banners de segurança. A IA executa comandos e grava arquivos continuamente sem interrupções.
Custom
Regras customizadas: Você determina quais comandos de console específicos ou pastas exigem revisão manual ou operam no modo turbo.
Importando o Conhecimento do Projeto Carregamento
Insira a Skill de especificação do projeto na pasta de configurações do seu projeto e peça para o Antigravity consumir o arquivo, indicando a ele o caminho correto onde as instruções estão localizadas na sua máquina local.
Iniciando a Geração Inteligente Execução
Por fim, retorne ao ChatGPT ou Claude e peça para ele formular o prompt específico para iniciar a geração do site no Antigravity com base no seu tema e diretrizes visuais. Envie esse prompt para o Antigravity e acompanhe o assistente codificando todo o seu projeto de ponta a ponta.
Colocando o Site no Ar! Publicação
Pronto! Depois que o construtor terminar os códigos, compacte a pasta do seu projeto no formato ZIP. Suba esse arquivo na sua hospedagem para que pessoas do mundo todo consigam acessar o seu novo site.
🛠️ Simulador do Antigravity
Experimente o fluxo de trabalho real do Antigravity! Siga as etapas abaixo para interagir de forma manual com o assistente.
index.html e styles.css.npm run build no seu terminal.Como Colocar Seu Site no Ar
Após gerar todo o código do seu site, para que as pessoas possam acessá-lo na internet de qualquer lugar do mundo, você precisará contratar dois serviços fundamentais: Domínio e Hospedagem.