Google Stitch + Antigravity: do design ao código
passo a passo atualizado para combinar Stitch, o agente de design do Google, com Antigravity. Veja como ativar as novas 6 Power Skills, destravar automação criativa e criar
Por que isso é importante
Google Stitch Antigravity: crie UI no Stitch → exporte (zip/AI Studio) → gere código no Antigravity (React/Tailwind/shadcn) → ligue MCP com API key do Stitch → verifique com “List my Stitch projects”. Acelera protótipo design→código; não autoriza pular review, a11y nem design system. Diferente da review do Antigravity: aqui o foco é a ponte Stitch↔código.
O que essa integração resolve
Stitch Antigravity resolve o buraco entre mock de UI e app navegável: Stitch gera/itera telas; Antigravity implementa e fecha o loop via MCP. É acelerador de MVP visual — não licença para merge sem revisão.
Atenção
Só é possível acessar o novo poder através das chamadas Power Skills. Sem elas, você estará limitado ao básico e não destravará o verdadeiro potencial.
O que é Google Stitch (design com IA)
Google Stitch é o agente de design da Google (Gemini) para UI/UX multi-página: gera telas, temas e variantes a partir de prompt/referência. Exporta estrutura para handoff — não substitui Figma em marca rígida de time.
Dica Pro
Com Stitch, é possível “clonar” identidades visuais de imagens ou sites, importar estilos e aplicar soluções 3x (três versões ao mesmo tempo) para acelerar criação.
O que é Antigravity neste fluxo
Antigravity, neste fluxo, é a IDE/agente que transforma o pacote Stitch em código (React etc.) e mantém o loop via MCP. Para review geral da IDE (cotas, vs Cursor), use o artigo de review — aqui só a integração.
Atenção ao workflow
O segredo está em exportar corretamente do Stitch e importar direto no Antigravity. Uma configuração errada impede automações e pode travar seu projeto.
Power Skills do Stitch (o que conferir na doc)
Com a recente atualização, Stitch e Antigravity desbloquearam 6 habilidades: análise de projeto ilimitada, construção de sistemas de componentes React, loops automáticos (Stitch Loops), aprimoramento de prompts, geração de walkthroughs em vídeo, export e compartilhamento colaborativo imediato.
Não esqueça
Só ao ativar as Power Skills é possível aproveitar a integração máxima e iterar projetos usando o loop contínuo entre Stitch e Antigravity.
Loop Stitch ↔ código: criar, exportar, iterar
Ao conectar Stitch e Antigravity, nasce um ciclo infinito: desenhe, exporte, gere código, reimporte, interaja e recomece. Modifique estilos, insira feedbacks na interface, ajuste flows de app em segundos e veja tudo integrado direto na sua stack.
Experiência Real
Ao criar uma UI com três páginas de onboarding e checkout, a automação fez três versões simultâneas e permitiu editar cada elemento isoladamente, em menos de dois minutos.
Pré-requisitos e primeiras ações
Pré-requisitos: conta Stitch + Antigravity, API key Stitch para MCP, e referências de marca (cor/fonte) se quiser design DNA. Sem key/MCP, o loop “List my Stitch projects” falha.
Atenção inicial
Algumas funções avançadas podem exigir permissões específicas ou assinatura para uso enterprise. Confira as permissões.
Passo 1: criar o design no Stitch
Crie um novo projeto, adicione múltiplos componentes ou referências de URLs e imagens. Gere 3 opções de página a cada prompt, edite fontes, cores e temas, e dê feedbacks clicando em cada versão.
Passo 2: exportar do Stitch sem perder estrutura
Sempre selecione exportar como .zip ou para o AI Studio do Antigravity. Escolha comandos, componentes e imagens que deseja transferir. O export correto cria um pacote limpo para uso automatizado.
Problema comum
Esquecer de selecionar componentes ou exportar apenas um preview gráfico gera erro ou impede o Antigravity de reconhecer seu layout.
Passo 3: importar no Antigravity e gerar app
Abra o pacote exportado no Antigravity, peça para transformar o design em aplicativo funcionando (ex: React, Next.js, app web) e hospedagem local. O agente AI fará a transição de visual para código, abrindo o aplicativo final.
Stitch → React, Tailwind e shadcn
Peça implementação alinhada ao stack CrazyStack — React + Tailwind + componentes shadcn — em vez de dump HTML genérico.
- Exporte/apoute o projeto Stitch e confirme DESIGN.md / tokens se existirem no fluxo atual.
- No Antigravity: “Implemente esta tela em React + Tailwind; reutilize padrões shadcn (Button, Card, Input); sem inventar componente morto.”
- Mapeie cores/spacing para CSS variables do seu design system antes de aceitar magic numbers.
- Rode a11y básica (foco, contraste, labels) — o export não é licença para pular acessibilidade.
- Abra PR pequeno por tela; não engula o app inteiro num único diff gerado.
Trate o output como rascunho estruturado. Tokens e ownership do design system ainda são seus.
Passo 4: conectar via MCP
A conexão utiliza protocolo MCP. Cole o API Key do Stitch na configuração do Antigravity (menu servers MCP), importando o config auto-gerado. Cheque status: se conectar, 6 skills são ativadas ao lado.
Verificar MCP: List my Stitch projects
Depois de autenticar o MCP do Stitch, faça o verify step estilo Codelab: peça ao agente para listar seus projetos Stitch (“List my Stitch projects”).
- Sucesso: você vê nomes/IDs — MCP e credencial ok; avance para puxar a tela alvo.
- Falha/vazio: pare. Revise API key, escopos, servidor MCP no Antigravity e login Google.
- Não peça codegen enquanto o list falhar — você só vai alucinar UI.
Doc muda
Nomes de tools e Power Skills mudam na UI Google. Confirme o passo no Codelab/docs atuais: design-to-code with Antigravity + Stitch.
Colaboração e compartilhamento do projeto
Após exportar do Stitch, use a função Share para trabalhar em equipe ou apresentar iterações ao cliente em tempo real. Feedback rápido otimiza o loop criativo.
Boas práticas
Sempre revise o projeto juntos antes de exportar. Validar com times evita retrabalho e explora diferentes abordagens visuais.
Erros críticos na integração (e como evitar)
Não pule o passo de inserir o API Key e config correto. Se as skills aparecerem “em branco”, revise senhas e permissões. Toda etapa deve ser conferida antes do loop.
Problema resolvido
Se o Antigravity não reconhecer o Stitch, atualize o MCP, gere nova API Key e relogue.
Quando passar pelo Figma antes do código
Solo builder: Stitch → Antigravity pode bastar para MVP. Time com marca rígida: Figma ainda é ponte útil.
- Passe pelo Figma quando precisar de design system compartilhado, handoff multi-pessoa ou polimento que o Stitch ainda não fecha.
- Fique no Stitch quando a meta é velocidade de protótipo e uma pessoa decide visual + código.
- Nunca use Figma como desculpa para nunca shippar — se o arquivo vira museo, volte ao loop Stitch↔código.
Avançado: loops, prompts e walkthroughs
Aproveite as skills de loop para aprimorar designs a partir de feedbacks ou gerar vídeos explicativos automáticos. Cada etapa pode ser iterada mil vezes, sempre mais rápida e personalizada pela inteligência artificial.
Mais engajamento
Use walkthroughs para documentar entregas a clientes, gerar material de suporte ou até para treinamento de times.
Personalização: design DNA e identidade visual
Traga cores, fontes e elementos do seu branding, gere variantes e aplique ajuste por página. Simule concorrentes para benchmarking e molde seu projeto ao gosto do cliente.
Para onde vai design-to-code com Google
Para onde vai: design-to-code Google fica mais curto, mas produção ainda exige tokens de design, testes e acessibilidade. Use o loop para velocidade de rascunho; feche qualidade no PR.
Explore mais
No canal Dev Doido no Youtube, mergulhe em vídeos com códigos abertos, demonstrações práticas de loops, tutoriais e hacks de automação para ir além do comum.
Checklist do fluxo no dia a dia
Rotina mínima para não perder o fio entre design e código:
Antes de chamar “pronto”
- Ative as Power Skills relevantes na doc atual do Stitch
- Importe/exporte de novo após cada ajuste estrutural
- Use o loop criativo para versões e feedback curto
- Colabore e acione walkthroughs quando o time precisar de contexto
- Corrija erros de integração no MCP antes de gerar app
- Adapte prompts para o stack real (React/Tailwind/shadcn) — não “surpreenda” no escuro
Fontes
Revisão em agosto de 2026. Stitch, skills e cotas do Antigravity mudam na UI Google — trate “Power Skills” e velocidades como snapshot, não benchmark eterno.
Google AI / Stitch (documentação do produto na conta Google): ai.google.dev. Antigravity: antigravity.google.
Perguntas frequentes
O que é Google Stitch com Antigravity?
Fluxo design-to-code: Stitch gera UI; Antigravity consome via MCP para implementar. Skills aceleram — ainda revise o código.
Como conectar Stitch ao Antigravity?
Gere API key no Stitch, instale o servidor MCP no Antigravity e valide com “List my Stitch projects”. Siga o Codelab/docs atuais — UI muda.
Stitch + Antigravity substitui designer e front?
Acelera protótipo e handoff. Design system, a11y e performance continuam trabalho humano.
É estável para time em produção?
Avalie cotas, qualidade do diff e vendor lock-in. Spike de 48h no seu stack (ex.: React/Tailwind) decide melhor que thread.
Continue explorando
Perguntas frequentes
O que é Google Stitch com Antigravity?
Fluxo design-to-code: Stitch gera UI; Antigravity consome via MCP para implementar. Skills aceleram — ainda revise o código.
Como conectar Stitch ao Antigravity?
Gere API key no Stitch, instale o servidor MCP no Antigravity e valide com “List my Stitch projects”. Siga o Codelab/docs atuais — UI muda.
Stitch + Antigravity substitui designer e front?
Acelera protótipo e handoff. Design system, a11y e performance continuam trabalho humano.
É estável para time em produção?
Avalie cotas, qualidade do diff e vendor lock-in. Spike de 48h no seu stack (ex.: React/Tailwind) decide melhor que thread.
O que essa integração resolve
Stitch Antigravity resolve o buraco entre mock de UI e app navegável: Stitch gera/itera telas; Antigravity implementa e fecha o loop via MCP. É acelerador de MVP visual — não licença para merge sem revisão.
O que é Google Stitch (design com IA)
Google Stitch é o agente de design da Google (Gemini) para UI/UX multi-página: gera telas, temas e variantes a partir de prompt/referência. Exporta estrutura para handoff — não substitui Figma em marca rígida de time.
O que é Antigravity neste fluxo
Antigravity, neste fluxo, é a IDE/agente que transforma o pacote Stitch em código (React etc.) e mantém o loop via MCP. Para review geral da IDE (cotas, vs Cursor), use o artigo de review — aqui só a integração.
Quando passar pelo Figma antes do código
Solo builder: Stitch → Antigravity pode bastar para MVP. Time com marca rígida: Figma ainda é ponte útil.