Conception vers code avec Antigravity et Stitch MCP

1. Introduction

Dans cet atelier de programmation, vous allez créer un site Web prêt pour la production en associant une conception basée sur l'IA à un environnement de développement axé sur les agents. Vous utiliserez Google Stitch pour générer une interface utilisateur haute fidélité, puis vous la connecterez à l'IDE Antigravity via le protocole MCP (Model Context Protocol). Enfin, vous utiliserez un agent autonome pour récupérer le "DNA de conception" et implémenter une application React au pixel près.

Objectifs de l'atelier

• Générer une interface utilisateur dans Stitch : utilisez le langage naturel pour créer une conception Web à grande échelle dans Google Stitch.
• Associer à MCP : connectez Antigravity à votre projet Stitch à l'aide du protocole MCP.
• Implémentation autonome : utilisez l'onglet "Agent" d'Antigravity pour récupérer des jetons de conception et créer un projet React/Tailwind.
• Vérifier et affiner : utilisez le navigateur intégré pour vérifier le code par rapport à la conception d'origine.

Points abordés

• Utiliser Google Stitch pour prototyper rapidement des conceptions d'interface utilisateur haute fidélité.
• Configurer des serveurs MCP dans l'IDE Antigravity.
• Utiliser des agents autonomes pour traduire les métadonnées de conception visuelle en code modulaire.

Prérequis

• Navigateur Web Chrome
• IDE Antigravity installé
• Compte Google Stitch
• Clé API Stitch
• Node.js (v18 ou version ultérieure) installé localement

Avant de commencer

1. Dans la console Google Cloud, sur la page du sélecteur de projet, sélectionnez ou créez un projet Google Cloud.
2. Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier si la facturation est activée sur un projet .
3. Accédez à stitch.withgoogle.com et assurez-vous de pouvoir vous connecter.
4. Assurez-vous que l'IDE Antigravity est installé (disponible sur antigravity.google).

2. Créer la conception dans Google Stitch

L'agent a besoin d'une "source de vérité" visuelle à suivre. Avant d'écrire du code, nous devons définir l'esthétique.

1. Accéder à la plate-forme : accédez à stitch.withgoogle.com.
2. Sélectionner le type de projet : sur le tableau de bord principal, recherchez le bouton Start a new design (Démarrer une nouvelle conception). Cliquez sur Web pour vous assurer que votre conception est optimisée pour les mises en page basées sur un navigateur.
3. Choisir votre modèle : cliquez sur le menu déroulant du modèle (actuellement 3.0 Flash) dans la zone de prompt. Assurez-vous que Gemini 3 est sélectionné pour bénéficier de la génération de raisonnement et de mise en page la plus avancée.
4. Décrivez votre vision : dans la zone de texte intitulée "Describe your design" (Décrivez votre conception), saisissez votre prompt :

"Design a modern SaaS landing page for a space-tech startup called LaunchPad. Use a midnight blue and neon purple palette. Include a hero section with a ‘Get Started' button, a 3-column features grid, and a glassmorphism pricing table." 5. Générer : cliquez sur l'icône en forme de flèche (à côté du sélecteur de modèle) pour lancer le processus de génération. 6. Affiner et nommer : une fois l'interface utilisateur générée, donnez un nom à votre projet dans l'en-tête. Nommez-le LaunchPad. Vous pouvez utiliser la barre latérale de chat pour affiner des éléments spécifiques avant de passer à l'IDE.

[!TIP] Vous pouvez également choisir parmi les

"Try these prompts"

si vous souhaitez commencer rapidement..

3. Configurer Antigravity MCP

Pour permettre à l'agent Antigravity de "lire" votre conception, vous devez générer une clé API sécurisée et ajouter le serveur Stitch MCP.

Générer la clé API Stitch

1. Dans Google Stitch, cliquez sur votre photo de profil en haut à droite.
2. Sélectionnez Stitch settings (Paramètres Stitch) dans le menu déroulant.
3. Accédez à la section API key (Clé API).
4. Cliquez sur le bouton Create key (Créer une clé).
5. Copiez la clé : copiez immédiatement la clé générée et stockez-la de manière sécurisée. Vous en aurez besoin pour l'étape suivante.

Configurer Stitch MCP dans Antigravity

1. Ouvrez l'IDE Antigravity.
2. Ouvrez le Gestionnaire d'agents.

À tout moment, vous pouvez basculer entre le Gestionnaire d'agents et l'éditeur en appuyant sur CMD+E (Mac) ou CTRL+E (Windows), ou en cliquant sur les boutons Open Editor (Ouvrir l'éditeur) et Open Agent Manager (Ouvrir le Gestionnaire d'agents) en haut à droite de la barre de menu. .

3. Cliquez sur + Open Workspace (+ Ouvrir l'espace de travail).

Pour démarrer une conversation dans un espace de travail, sélectionnez l'espace de travail souhaité dans l'onglet Start Conversation (Démarrer une conversation) ou cliquez sur le bouton Plus à côté du nom de l'espace de travail dans la barre latérale.

4. Cliquez sur Open New Workspace (Ouvrir un nouvel espace de travail), nommez l'espace de travail LaunchPad-Project et sélectionnez un répertoire local. Cela permet à l'agent de disposer d'un dossier racine spécifique pour créer des fichiers sans encombrer d'autres projets.

Configurer Stitch MCP

1. Dans votre nouvel espace de travail, revenez au Gestionnaire d'agents (CMD+E pour Mac ou CTRL+E pour Windows) et sélectionnez MCP Servers (Serveurs MCP).

Ouvrez le magasin MCP via le menu déroulant "..." en haut du volet de l'agent de l'éditeur.

Antigravity est compatible avec le protocole MCP (Model Context Protocol), une norme qui permet à l'éditeur de se connecter de manière sécurisée à vos outils locaux, bases de données et services externes. Cette intégration fournit à l'IA un contexte en temps réel au-delà des fichiers ouverts dans votre éditeur.

MCP sert de pont entre Antigravity et Google Stitch. Au lieu d'exporter manuellement des jetons de conception ou de copier des codes hexadécimaux et des métadonnées de mise en page dans l'éditeur, MCP permet à Antigravity de récupérer le DNA de conception directement à partir de votre projet Stitch si nécessaire.

2. Recherchez "Stitch" , puis cliquez sur Install (Installer).
3. Lorsque vous y êtes invité, collez votre clé API Stitch dans le champ de configuration.
4. Vérifiez : dans le chat de l'agent, saisissez List my Stitch projects.. Si LaunchPad est renvoyé, vous êtes prêt.

5. Vérifiez : dans le chat de l'agent, saisissez List my Stitch projects.. Si l'agent renvoie LaunchPad, le pont est correctement configuré.

4. Récupérer le contexte de conception

L'agent doit maintenant ingérer les métadonnées de conception pour garantir l'exactitude du code.

1. Dans le chat Antigravity, saisissez : "Use the Stitch MCP to fetch the ‘LaunchPad' project. Extract the color palette and typography, then generate a DESIGN.md file in my root directory."
2. Examinez : ouvrez le fichier DESIGN.md que vous venez de créer pour afficher les codes hexadécimaux et les règles de mise en page extraits par l'agent.

5. Implémentation (compilation)

Utilisez l'agent pour traduire la conception en une application React fonctionnelle.

1. Saisissez le prompt "Build" (Compiler) :

"I want to build this full website now. Use React and Tailwind CSS. Ensure the components are modular. Once finished, run the dev server and show it to me in the integrated browser." 2. Observez l'agent : il crée le projet dans le terminal, écrit les composants dans l'éditeur et ouvre l'aperçu dans le navigateur intégré.

6. Examiner et affiner

Vérifiez le résultat et utilisez l'agent pour corriger les différences visuelles.

1. Comparez le résultat du navigateur intégré à votre conception Stitch d'origine.
2. Si un élément (comme le remplissage des boutons ou l'épaisseur de la police) ne correspond pas, demandez à l'agent : "The ‘Get Started' button padding is slightly off. Refer back to the Stitch design and update the Tailwind classes."
3. L'agent récupère à nouveau le contexte de conception et applique immédiatement le correctif.

7. Récapitulatif et étapes suivantes

Félicitations ! Vous avez réussi à combler le fossé entre une conception haute fidélité et une base de code fonctionnelle à l'aide d'Antigravity et de Stitch MCP.

Récapitulatif de ce que vous avez fait :

• Vous avez conçu une interface utilisateur dans Stitch à l'aide de Gemini 3.
• Vous avez généré une clé API sécurisée et configuré Antigravity MCP.
• Vous avez utilisé un agent autonome pour créer et vérifier un site React + Tailwind.