Design para código com Antigravity e Stitch MCP

1. Introdução

Neste codelab, você vai criar um site pronto para produção combinando design orientado por IA com um ambiente de desenvolvimento que prioriza o agente. Você vai usar o Google Stitch para gerar uma interface de alta fidelidade e conectá-la ao Antigravity IDE usando o Protocolo de Contexto de Modelo (MCP). Por fim, você vai usar um agente autônomo para buscar o "DNA de design" e implementar um aplicativo React perfeito em pixels.

O que você aprenderá

• Gerar interface no Stitch:use linguagem natural para criar um web design completo no Google Stitch.
• Ponte com o MCP:conecte o Antigravity ao seu projeto do Stitch usando o Protocolo de Contexto de Modelo.
• Implementação autônoma:use a "Guia do agente" do Antigravity para buscar tokens de design e criar um projeto React/Tailwind.
• Verificar e refinar:use o navegador integrado para fazer uma "verificação de vibe" do código em relação ao design original.

O que você vai aprender

• Como usar o Google Stitch para criar protótipos rapidamente de designs de interface de alta fidelidade.
• Como configurar servidores MCP no ambiente de desenvolvimento integrado do Antigravity.
• Como usar agentes autônomos para traduzir metadados de design visual em código modular.

O que é necessário

• Navegador da Web Google Chrome
• Um ambiente de desenvolvimento integrado do Antigravity instalado
• Uma conta do Google Stitch
• Uma chave de API do Stitch
• Node.js (v18 ou mais recente) instalado localmente

Antes de começar

1. No console do Google Cloud, na página de seletor de projetos, selecione ou crie um projeto do Google Cloud.
2. Verifique se o faturamento está ativado para seu projeto do Cloud. Saiba como verificar se o faturamento está ativado em um projeto .

Para créditos do Google Cloud: para ajudar você a usar o Antigravity com projetos do Google Cloud, resgate seus créditos sem custo financeiro do Google Cloud usando este link. Siga as instruções neste link para ativar o crédito e criar um projeto.

3. Acesse stitch.withgoogle.com e verifique se você consegue fazer login.
4. Confira se o Antigravity IDE está instalado (disponível em antigravity.google).

2. Criar o design no Google Stitch

O agente precisa de uma "fonte de dados" visual para seguir. Antes de escrever o código, precisamos definir a estética.

1. Acessar a plataforma:acesse stitch.withgoogle.com.
2. Selecione o tipo de projeto:no painel principal, localize a opção Iniciar um novo design. Clique em Web para garantir que seu design esteja otimizado para layouts baseados em navegador.
3. Escolha seu modelo:clique no menu suspenso de modelos (atualmente mostrando 3.0 Flash) dentro da caixa de comando. Verifique se a opção Gemini 3 está selecionada para ter o raciocínio e a geração de layout mais avançados.
4. Descreva sua visão:na área de texto "Descreva seu design", insira o comando:

"Crie uma página de destino moderna de SaaS para uma startup de tecnologia espacial chamada LaunchPad. Use uma paleta azul meia-noite e roxo neon. Inclua uma seção principal com um botão "Começar", uma grade de recursos de três colunas e uma tabela de preços de glassmorphism." 5. Gerar:clique no ícone de seta (ao lado do seletor de modelos) para iniciar o processo de geração. 6. Refinar e nomear:depois que a interface for gerada, dê um nome ao projeto no cabeçalho superior. Dê o nome LaunchPad a ele. Você pode usar a barra lateral de chat para refinar elementos específicos antes de passar para o IDE.

[!TIP] Você também pode escolher entre as opções do

"Teste estes comandos"

seção se quiser um início rápido.

3. Configurar o MCP do Antigravity

Para permitir que o agente antigravidade "leia" seu design, gere uma chave de API segura e adicione o servidor MCP do Stitch.

Gerar a chave de API do Stitch

1. No Google Stitch, clique na sua foto do perfil no canto superior direito.
2. Selecione Configurações de junção no menu suspenso.
3. Acesse a seção Chave de API.
4. Clique no botão Criar chave.
5. Copie a chave:copie a chave gerada imediatamente e armazene-a com segurança. Você vai precisar dele na próxima etapa.

Configurar o MCP do Stitch no Antigravity

1. Abra o IDE do Antigravity.
2. Abra o Agent Manager.

A qualquer momento, você pode alternar entre o Gerenciador de agentes e o editor pressionando CMD+E (Mac) ou CTRL+E (Windows) ou usando os botões "Abrir editor" e "Abrir Gerenciador de agentes" no canto superior direito da barra de menus. .

3. Clique em + Abrir espaço de trabalho.

Para iniciar uma nova conversa em um espaço de trabalho, selecione o espaço desejado na guia "Iniciar conversa" ou clique no botão de adição ao lado do nome do espaço na barra lateral.

4. Clique em "Abrir novo espaço de trabalho", nomeie o espaço de trabalho como LaunchPad-Project e selecione um diretório local. Isso garante que o agente tenha uma pasta raiz específica para criar arquivos sem bagunçar outros projetos.

Configurar o MCP do Stitch

1. No novo espaço de trabalho, volte ao Gerenciador de agentes (CMD+E no Mac ou CTRL+E no Windows) e selecione Servidores MCP.

Abra a loja do MCP no menu suspenso "..." na parte de cima do painel do agente do editor.

O Antigravity é compatível com o Protocolo de Contexto de Modelo (MCP), um padrão que permite que o editor se conecte com segurança às suas ferramentas locais, bancos de dados e serviços externos. Essa integração fornece à IA contexto em tempo real além dos arquivos abertos no editor.

O MCP atua como uma ponte entre o Antigravity e o Google Stitch. Em vez de exportar manualmente tokens de design ou copiar códigos hexadecimais e metadados de layout para o editor, o MCP permite que o Antigravity busque o DNA de design diretamente do seu projeto do Stitch quando necessário.

2. Pesquise "Stitch" e clique em Instalar.
3. Quando solicitado, cole sua chave de API do Stitch no campo de configuração.
4. Verifique: no chat do agente, digite List my Stitch projects.. Se o retorno for LaunchPad, você está pronto.

5. Verifique:no chat do agente, digite: List my Stitch projects.. Se o agente retornar LaunchPad, a ponte foi configurada com sucesso.

4. Buscar o contexto de design

Agora, o agente precisa ingerir os metadados de design para garantir a precisão do código.

1. No chat do Antigravity, digite: "Use o MCP do Stitch para buscar o projeto "LaunchPad". Extraia a paleta de cores e a tipografia e gere um arquivo DESIGN.md no meu diretório raiz."
2. Revisão:abra o DESIGN.md recém-criado para conferir os códigos hexadecimais e as regras de layout extraídos pelo agente.

5. Implementação (The Build)

Use o agente para traduzir o design em um aplicativo React funcional.

1. Dê o comando "Build":

"Quero criar este site completo agora. Use React e Tailwind CSS. Verifique se os componentes são modulares. Quando terminar, execute o servidor de desenvolvimento e mostre no navegador integrado." 2. Observe o agente:ele vai criar a estrutura do projeto no terminal, escrever os componentes no editor e abrir a prévia no navegador integrado.

6. Revisar e refinar

Verifique a saída e use o agente para corrigir discrepâncias visuais.

1. Compare a saída do navegador integrado com o design original do Stitch.
2. Se algum elemento (como padding do botão ou peso da fonte) não corresponder, peça ao agente: "O padding do botão "Começar" está um pouco errado. Consulte o design do Stitch e atualize as classes do Tailwind".
3. O agente vai buscar novamente o contexto de design e aplicar a correção instantaneamente.

7. Resumo e próximas etapas

Parabéns! Você conseguiu diminuir a distância entre um design de alta fidelidade e uma base de código funcional usando o Antigravity e o MCP do Stitch.

Resumo do que você fez:

• Criou uma interface no Stitch usando o Gemini 3.
• Gerou uma chave de API segura e configurou o MCP Antigravity.
• Usamos um agente autônomo para criar e verificar um site React + Tailwind.