Sites com IA: Gemini 3.7 no Antigravity, a Skill Impeccable e o Método das Referências Reais

Esta playlist tem só três vídeos, mas junto eles formam um fluxo completo: como gerar as imagens e animações de um site, como montar o código com IA, como tirar a cara de “feito por IA” do resultado e como publicar de verdade. Nenhum dos três é sobre teoria. São capturas de tela, comando por comando, do que cada criador realmente fez. É isso que este artigo relata: o passo a passo real de cada vídeo, sem preencher lacuna nenhuma com suposição.

---

Gemini 3.7 no Google Antigravity: do prompt de imagem ao site publicado

Rafael Mota, do canal Sala Ninja IA, mostra em “O NOVO GEMINI 3.7 Cria SITES ANIMADOS ABSURDOS do ZERO” um fluxo de ponta a ponta para montar uma landing page animada para um prestador de serviço (o exemplo do vídeo é uma manutenção residencial), sem depender de vídeo de estoque nem de banco de imagens pronto. O processo tem quatro etapas encadeadas.

1. Gerar as imagens em lote, no Google Labs. Em vez de gerar imagem por imagem num chat comum, ele abre um novo projeto no Google Labs e ativa o “modo agente”. Nesse modo, ele cola de uma vez os prompts das seis imagens da sequência (imagem 1 a imagem 6) e o agente entende que precisa gerar todas mantendo o contexto entre elas, sem precisar copiar e colar prompt por prompt.

2. Animar as imagens em pares, com Veo 3.1 Lite. Com as seis imagens prontas, ele desativa o modo agente e ativa o modo vídeo, formato 16:9, modelo Veo 3.1 Lite. A técnica é encadear as imagens em “takes”: arrasta a imagem 1 como frame inicial e a imagem 2 como frame final (usando o modo “frame”, não “elementos”), gera o take, depois repete pegando a imagem 2 como início e a imagem 3 como fim, e assim sucessivamente até o take 5→6. Cada animação usa um prompt próprio que a própria ferramenta já sugere.

3. Costurar os takes num vídeo único, no CapCut. Os cinco clipes animados entram na timeline do CapCut, na ordem em que a ação acontece (entrar na casa, abrir a caixa de ferramentas, prender o nicho na parede, terminar o serviço). O áudio de cada clipe é removido e o resultado é exportado como um único arquivo de vídeo.

4. Gerar o site com Gemini 3.7 no Google Antigravity. Ele abre o Google Antigravity (ferramenta do Google que roda localmente no computador e gera os arquivos ali mesmo), aponta para uma pasta local, seleciona o modelo Gemini 3.7 Flash com nível de raciocínio “medium” e cola um prompt inicial pedindo explicitamente HTML, CSS e JavaScript puros (sem framework). O Antigravity gera a estrutura completa (seis seções, no exemplo) e, ao final, entrega um link local para visualizar o resultado (ou, se não entregar, basta pedir “quero o link para acessar”). Ele também mostra alternativas para abrir o resultado: abrir o index.html direto, ou instalar a extensão Live Server no editor e usar o botão “Go Live”. Um detalhe que ele verifica no inspetor do navegador: o layout já sai responsivo para mobile sem pedido adicional.

Depois disso, o vídeo cobre dois ajustes finos que valem citar porque são instruções literais dadas à IA, não genéricas: para trocar o número de WhatsApp do botão de contato, ele mostra tanto a opção manual (abrir o HTML e editar o atributo do link) quanto pedir por prompt (“insira meu número no link de WhatsApp, abrindo em nova aba”); para colocar o vídeo gerado como fundo animado que acompanha o scroll, ele cria uma pasta videos/ dentro do projeto, salva o arquivo como video_completo.mp4 (nome que o próprio prompt da ferramenta pede) e envia um prompt específico pedindo que o vídeo funcione como background com esse efeito de acompanhar a rolagem da página.

Publicação: o vídeo fecha mostrando a hospedagem na Hostinger (link e cupom de afiliado do canal, deixado explícito). O caminho é: no painel, escolher a opção “Migrar site” (não “Adicionar site”, porque o projeto é HTML/CSS/JS puro), compactar a pasta do projeto em .zip, enviar o arquivo e aguardar a URL temporária ser gerada. A partir daí é possível conectar um domínio próprio.

---

A skill Impeccable: tirar o “AI Slop” do frontend com comandos específicos

Sujeito Programador, no vídeo “Essa Skill é a melhor forma de criar frontend com IA”, detalha uma skill chamada Impeccable, que ele diz usar há mais de duas semanas em projetos reais, dentro de agentes como Claude Code, Codex ou Cursor (a skill funciona em qualquer um deles). No momento do vídeo, ele cita mais de 176 mil instalações no site skills.sh e mais de 42 mil estrelas no GitHub.

Instalação e inicialização. A instalação é feita via comando copiado do skills.sh, rodado dentro da pasta do projeto (ele reforça que prefere instalar por projeto, não de forma global). Depois de instalada, o primeiro passo recomendado é mencionar a skill com o comando init: isso faz o agente criar dois arquivos centrais, um product.md (sobre o produto) e um design.md (sobre o design system do projeto: cores, tipografia, padrões de layout). Se o projeto já existe e esses arquivos não foram gerados, existe também um comando document, que analisa o projeto existente e extrai esse design system a partir do que já está no código.

Os comandos que ele mais usa, na prática:

• critic (Impeccable Critic): analisa UX, hierarquia visual e clareza do layout atual e devolve uma lista de pontos de melhoria.
• audit: roda verificações técnicas de acessibilidade, desempenho e responsividade, usando subagentes (no exemplo do vídeo, levou cerca de 8 minutos).
• clarify: melhora o texto e a copy de UX, podendo ser aplicado à página inteira ou a uma seção específica (ex.: só na seção de preços).
• animate: adiciona movimento e animações intencionais a um componente ou seção específica.
• polish: faz uma revisão final de uma seção, alinhando o sistema visual e preparando para produção (o exemplo dele é polish na seção de preços).
• craft: fluxo completo de modelagem e reconstrução visual, usado para criar algo novo a partir de uma instrução.
• boulder: amplifica o design, melhorando o layout de forma mais ampla.
• type: corrige hierarquia, tamanho e escolha de fontes.
• destil (distill): resume a essência do design para simplificar.

A demonstração central do vídeo usa uma landing page fictícia de um SaaS de petshop, gerada só com um prompt genérico (“cria um layout para um SaaS de aplicativo de petshop”), exatamente para expor o problema de AI Slop. Rodando critic e audit nela, a skill aponta, entre outras coisas:

• Os CTAs principais são “botões decorativos”, não ações reais: o botão “fale com vendas” não faz nada ao ser clicado, o que ele descreve como algo que “quebra a confiança” e não pode ir para produção.
• Estrutura repetida demais de “glass card” com glow por baixo, um padrão visual associado ao AI Slop.
• Tipografia alta e apertada demais, sem espaço de respiro, o que “prejudica a experiência de leitura”.
• Uso excessivo e repetitivo de badges (pequenos selos/etiquetas) espalhados pelo layout.
• Problema de narrativa na seção de preços: o plano aparece antes de qualquer prova social ou construção de confiança, quando o ideal seria mostrar prova social antes do preço.

A conclusão prática dele é que, em vez de ficar re-gerando o layout inteiro repetidamente e queimando tokens, o ganho real está em usar esses comandos de diagnóstico primeiro (critic, audit) para identificar o problema exato, e só depois atacar aquele ponto específico com o comando certo (clarify, animate, type, etc.).

---

“Não adianta só palavras”: o método de referências reais de Gustavo Campelo

Gustavo Campelo, no vídeo “Transforme a IA em um Mestre do Design”, parte de uma tese direta: pedir num prompt “faça um design incrível, personalizado, não genérico” não funciona, porque são só palavras. O que muda o resultado é dar assets concretos para a IA trabalhar em cima.

Passo 1: definir a identidade visual primeiro. Antes de qualquer prompt, decidir se o projeto é mais tecnológico e minimalista, mais sério, ou mais cartunizado.

Passo 2: buscar referências que sejam sites reais e navegáveis, não só prints estáticos do Pinterest. Ele cita dois lugares específicos:

• Awwwards, para referências de sites premiados, altamente interativos, com animações 3D. Ele mesmo pondera que esse tipo de referência é mais difícil da IA reproduzir bem, por depender de WebGL e JavaScript pesado.
• Framer Gallery (a galeria de sites feitos com o Framer), para referências mais realistas de uso comercial direto, como uma landing page de SaaS para empresa.

Passo 3: gravar a tela navegando pela referência e narrar o que acontece, em vez de só mandar o link do site. Ele explica que agentes de IA muitas vezes não interpretam bem um link de site sozinho, mas entendem melhor quando recebem o vídeo da navegação junto com uma explicação escrita do que está acontecendo visualmente: por exemplo, dizer explicitamente que ao rolar a página a seção 2 “come” a seção 1 num efeito parallax, que a imagem aumenta levemente de tamanho, que o texto se revela letra por letra com um leve blur, ou que os cards fazem um “scale out” no hover.

Passo 4 (o método que ele destaca como o melhor): captura de layout via extensão do Figma no Chrome. Ele usa uma extensão chamada “Figma Extension”, instalável na Chrome Web Store. O recurso “Capture Page” copia o layout de uma página real, e ao colar (Ctrl+V) dentro do Figma, o layout vem editável: fontes, textos e componentes ficam ajustáveis. A limitação que ele mesmo aponta: elementos renderizados via JavaScript ou WebGL (como animações complexas em canvas) não são capturados dessa forma, só o layout “normal”. A partir daí, com um clique direito num elemento e “Copy link to selection”, ele consegue colar esse link do Figma direto no prompt do agente de código.

Um detalhe técnico específico que ele confirma no vídeo: Claude Code não aceita vídeos como asset de entrada (aceita imagens e SVGs), enquanto o Codex aceita vídeos. Já um link do Figma funciona nos dois. Com acesso ao Figma Pro, a IA consegue inspecionar cada elemento do design (tamanho de fonte, padding, ícones) e baixar os assets automaticamente, o que ele descreve como o caminho mais fiel ao design original.

Passo 5: alternativa sem Figma Pro, usando Manus. Para quem não tem Figma Pro, ele demonstra a plataforma Manus (paga, num patamar de preço que ele compara ao de Claude Code ou Codex), que tem um recurso de “adicionar referência” onde se cola a URL de um site real e a ferramenta inspeciona esse site com mais precisão do que um link comum enviado a outro agente (Manus também aceita importar direto de uma URL do Figma). No exemplo prático, ele usa o site “Headsun” como referência, escreve um prompt descrevendo uma landing page para uma plataforma fictícia chamada “Rise” (cursos, comunidade e notícias sobre tecnologia e IA), pede que o tema seja escuro com gradientes em roxo e rosa (em vez do laranja do site de referência) e anexa a logo da marca como imagem. O resultado é publicado automaticamente com uma URL temporária da própria Manus, com opção de conectar domínio próprio depois. Ele então refina o resultado com prompts de acompanhamento, pedindo que o estilo de um card específico (que ficou bom) seja replicado nas outras seções, e que sejam adicionadas microinterações, como um efeito de post “surgindo” dentro de um card.

---

O que liga os três vídeos

Os três tratam do mesmo problema por ângulos diferentes: como fazer um site com IA parecer feito por um profissional, e não um site genérico. Rafael Mota ataca isso pelo lado da produção de imagem e vídeo animado antes mesmo de chegar ao código. Sujeito Programador ataca pelo lado do diagnóstico técnico, com uma skill que audita e nomeia o problema (glass card repetido, badges em excesso, CTA decorativo) antes de tentar corrigir. Gustavo Campelo ataca pelo lado do input: a IA só produz algo fora do genérico quando recebe referência real (imagem, vídeo narrado ou link do Figma), não quando recebe só um prompt bem escrito. É o mesmo tema do “AI Slop” abordado, com outro enfoque, no artigo sobre design com IA deste site.

---

Fontes

• “O NOVO GEMINI 3.7 Cria SITES ANIMADOS ABSURDOS do ZERO 😳” — Rafael Mota – Sala Ninja IA
• “Transforme a IA em um Mestre do Design” — Gustavo Campelo - Desenvolvedor
• “Essa Skill é a melhor forma de criar frontend com IA” — Sujeito programador