Duas IAs Criaram Esse App SOZINHAS: Eu só assisti (Google Stitch + Antigravity é INSANO)
Resumo
O vídeo apresenta um fluxo de trabalho de ponta a ponta para criar aplicativos usando duas IAs do Google: Google Stitch para design de interface e Antigravity para geração de código.
Os pontos principais incluem:
- Visão Geral do Workflow (1:13): O Google Stitch atua como o "arquiteto", criando o design e o fluxo do aplicativo, enquanto o Antigravity atua como o "engenheiro", construindo o código com base nesse design. A conexão entre as duas ferramentas é feita através do MCP (Model Context Protocol), que permite que o Antigravity leia o design do Stitch em tempo real para gerar um código mais fiel ao layout.
- Google Stitch (3:11): A ferramenta foi atualizada e agora inclui um "Idea Agent" (3:47) que auxilia na ideação do produto, conversando com o usuário e fazendo perguntas para refinar o conceito antes de gerar qualquer design. O vídeo demonstra a criação de um aplicativo de resenhas de livros, o BookTalk, com várias telas e funcionalidades (4:18).
- Antigravity (6:36): O Antigravity é uma IDE gratuita do Google que gera código com IA. O vídeo mostra como conectar o Antigravity ao Stitch via MCP Server (11:00) usando uma chave de API, permitindo que o Antigravity acesse e interprete os projetos do Stitch.
- Construção e Teste do Projeto (12:56): O Antigravity constrói o projeto inteiro, incluindo componentes React e Next.js, rotas, autenticação e banco de dados. O vídeo demonstra a execução do aplicativo, destacando a funcionalidade de login, feed, e páginas de livros (16:09).
- Desafios e Dicas (17:43): O apresentador observa que, embora o projeto seja funcional, o design final do Antigravity nem sempre é 100% fiel ao design do Stitch, especialmente em projetos maiores com muitas telas. Ele recomenda aprimorar os Prompts no Stitch e utilizar a funcionalidade "Annotate" para refinar detalhes. O vídeo também sugere que o MCP mantém a sincronização, permitindo que o Antigravity leia as atualizações do Stitch.
Descrição
Neste vídeo eu mostro o pipeline mais completo de vibe coding que existe hoje: Google Stitch desenhando o app inteiro e Antigravity construindo tudo sozinho lendo o design via MCP. Sem copiar código, sem exportar arquivo. Uma IA desenha, outra constrói.
O app que criei se chama BookTalk, uma plataforma social de resenhas de livros com 7 telas completas: login com design clean, feed principal com cards de resenhas mostrando capa do livro, nota e autor da resenha, página individual do livro com sinopse, rating médio e lista de resenhas, editor de resenha com campo de texto, rating com estrelas e upload de foto, página de resenha completa com seção de comentários, perfil do usuário com bio, lista de resenhas e estatísticas de leitura, e tela de explorar com categorias de livros e barra de busca. Tudo isso funcionando com autenticação, banco de dados e responsividade.
Começo pelo Google Stitch, que é a ferramenta do Google Labs que transforma Prompts em interfaces completas. O Google comprou o Galileo AI e rebatizou como Stitch, e agora roda com Gemini 3. Mostro as novidades mais importantes: o Idea Agent que faz um brainstorming de interfaces antes de gerar qualquer coisa, os Prototypes que conectam telas em fluxos interativos navegáveis, e o MCP Server que permite que outras ferramentas de IA leiam seu design em tempo real. E o Stitch é gratuito com 350 gerações por mês no modo Standard.
Mostro todo o processo de ideação ao vivo. Abro o Idea Agent, descrevo o conceito do BookTalk e ele sugere variações de conceito, paleta de cores e estrutura antes de gerar uma única tela. Depois gero as telas com Prompts específicos usando o Gemini 3, faço ajustes pontuais com o Annotate e conecto todas as telas num protótipo interativo com os Prototypes.
Depois vem a parte mais insana do vídeo: conectar o Stitch no Antigravity via MCP. MCP é o Model Context Protocol, um canal de comunicação entre ferramentas de IA. O Stitch MCP Server expõe todo o Design System para o Antigravity: telas, cores, tipografia, componentes. Mostro a configuração passo a passo e o momento em que o Antigravity começa a ler cada tela do Stitch e construir componente por componente.
O Antigravity constrói o projeto inteiro: estrutura de pastas, componentes React e Next.js seguindo o design, rotas para cada tela, feed de resenhas funcionando com dados, sistema de rating com estrelas, página do livro com resenhas, sistema de comentários, autenticação com login e cadastro, banco de dados para resenhas e comentários, upload de imagem e busca por livros. Faço a comparação lado a lado entre a tela do Stitch e a tela rodando no app real, que é o momento mais forte do vídeo.
No final compartilho dicas práticas: quanto mais detalhado o prompt no Stitch, melhor o resultado no Antigravity. Use o Annotate pra refinar detalhes antes de mandar pro MCP. Planeje suas telas antes de gastar gerações no Stitch. E o MCP mantém tudo sincronizado, se você mudar algo no Stitch o Antigravity pode ler a atualização.
Se você quer criar apps completos sem escrever código, esse pipeline de Google Stitch + Antigravity via MCP é o caminho mais eficiente que existe hoje.
Entre no nosso servidor de Discord e me siga nas redes:
🟣 Discord Hora de Codar: https://discord.gg/Veq4mvsWwk
🔴 Instagram: https://www.instagram.com/horadecodar/
🔷 Telegram: https://t.me/horadecodar
TIMESTAMPS
00:00 Porque Antigravity e Stitch?
01:13 Como funciona o Workflow de Google Stitch + Antigravity
03:11 Acessando o Google Stitch e criando projeto com Ideate
06:36 Conhecendo o Antigravity
07:25 Ajustes finais no projeto no Stitch
11:00 Conectando o Antigravity ao Stitch via MCP
12:56 Criando o projeto no Antigravity baseado no layout do Stitch
16:09 Testando versão inicial do projeto
17:43 Pedindo ajustes ao Antigravity
19:45 Conclusão e próximos passos com Antigravity e Google Stitch