Design para código com Antigravity e Stitch MCP

1. Introdução

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

O que você aprenderá

• Gerar a interface no Stitch:use a linguagem natural para criar um design da Web completo no Google Stitch.
• Fazer a 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 verificar o código em relação ao design original.

O que você 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 na nuvem. Saiba como verificar se o faturamento está ativado em um projeto .
3. Acesse stitch.withgoogle.com e verifique se você consegue fazer login.
4. Verifique se o ambiente de desenvolvimento integrado do Antigravity está instalado (disponível em antigravity.google).

2. Criar o design no Google Stitch

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

1. Acessar a plataforma: acesse stitch.withgoogle.com.
2. Selecionar o tipo de projeto:no painel principal, localize a opção Iniciar um novo design. Clique em Web para garantir que o design esteja otimizado para layouts baseados em navegador.
3. Escolher o modelo:clique no menu suspenso de modelos (atualmente mostrando 3.0 Flash) dentro da caixa de comando. Verifique se o Gemini 3 está selecionado para o raciocínio avançado e a geração de layout mais avançados.
4. Descreva sua visão: na área de texto com o rótulo "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-marinho e roxa 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 vidro." 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. Você pode usar a barra lateral de chat para refinar elementos específicos antes de passar para o ambiente de desenvolvimento integrado.

[!TIP] Você também pode escolher na seção

"Experimente estes comandos"

se quiser um início rápido..

3. Configurar o MCP do Antigravity

Para permitir que o agente do Antigravity "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 do Stitch no menu suspenso.
3. Navegue até 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 dela para a próxima etapa.

Configurar o MCP do Stitch no Antigravity

1. Abra o ambiente de desenvolvimento integrado do Antigravity.
2. Abra o Gerenciador de agentes.

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 de trabalho 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 para Mac ou CTRL+E para 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 oferece suporte ao 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 um 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 do 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. Verificar:no chat do agente, digite: List my Stitch projects. Se ele retornar LaunchPad, você estará pronto.

5. Verificar:no chat do agente, digite: List my Stitch projects. Se o agente retornar LaunchPad, a ponte será configurada.

4. Buscar o contexto do design

O agente agora 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. Analisar:abra o arquivo DESIGN.md recém-criado para conferir os códigos hexadecimais e as regras de layout que o agente extraiu.

5. Implementação (a 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-o no navegador integrado." 2. Observe o agente:ele vai criar o projeto no terminal, escrever os componentes no editor e abrir a visualização 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 ao design original do Stitch.
2. Se algum elemento (como preenchimento de botão ou peso da fonte) não corresponder, peça ao agente: "O preenchimento 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 do design e aplicar a correção instantaneamente.

7. Resumo e próximas etapas

Parabéns! Você conseguiu unir 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 do Antigravity.
• Usou um agente autônomo para criar e verificar um site React + Tailwind.