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 combinant la conception basée sur l'IA et un environnement de développement axé sur les agents. Vous allez utiliser Google Stitch pour générer une UI haute fidélité, puis la connecter à l'IDE Antigravity via le protocole MCP (Model Context Protocol). Enfin, vous utiliserez un agent autonome pour récupérer l'ADN de conception et implémenter une application React au pixel près.

Objectifs de l'atelier

• Générez une UI dans Stitch : utilisez le langage naturel pour créer une conception Web à grande échelle dans Google Stitch.
• Faites le pont avec MCP : connectez Antigravity à votre projet Stitch à l'aide du protocole Model Context Protocol.
• Implémentation autonome : utilisez l'onglet "Agent" d'Antigravity pour récupérer les jetons de conception et échafauder un projet React/Tailwind.
• Vérifier et affiner : utilisez le navigateur intégré pour vérifier que le code correspond à la conception d'origine.

Points abordés

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

Prérequis

• Navigateur Web Chrome
• Un IDE Antigravity installé
• Un compte Google Stitch
• Une clé API Stitch
• Node.js (v18+) 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 .

Pour les crédits Google Cloud : pour vous aider à utiliser Antigravity avec les projets Google Cloud, utilisez ce lien pour profiter de vos crédits Google Cloud sans frais. Pour activer le crédit et créer un projet, suivez ces instructions.

3. Accédez à stitch.withgoogle.com et assurez-vous de pouvoir vous connecter.
4. Assurez-vous d'avoir installé l'IDE Antigravity (disponible sur antigravity.google).

2. Créer le design 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électionnez le type de projet : sur le tableau de bord principal, recherchez le bouton 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 le navigateur.
3. Choisissez votre modèle : cliquez sur le menu déroulant des modèles (qui affiche actuellement 3.0 Flash) dans la zone de requête. Assurez-vous que Gemini 3 est sélectionné pour bénéficier du raisonnement et de la génération de mise en page les plus avancés.
4. Décrivez votre vision : dans la zone de texte intitulée Décrivez votre conception, saisissez votre requête :

"Conçois une page de destination SaaS moderne pour une start-up de technologie spatiale appelée LaunchPad. Utilise une palette bleu nuit et violet néon. Incluez une section principale avec un bouton "Commencer", une grille de fonctionnalités à trois colonnes et un tableau des tarifs en glassmorphism." 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'UI générée, attribuez 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.

[!ASTUCE] Vous pouvez également choisir parmi les

"Essayez ces requêtes"

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 Paramètres de Stitch dans le menu déroulant.
3. Accédez à la section Clé API.
4. Cliquez sur le bouton 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 à l'étape suivante.

Configurer le MCP Stitch 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 "Ouvrir l'éditeur" et "Ouvrir le Gestionnaire d'agents" en haut à droite de la barre de menu. .

3. Cliquez sur + 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 "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 échafauder les fichiers sans encombrer les autres projets.

Configurer le Stitch MCP

1. Dans votre nouvel espace de travail, revenez au Gestionnaire d'agents (CMD+E sur Mac ou CTRL+E sur Windows), puis sélectionnez 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, bases de données et services externes locaux. Cette intégration fournit à l'IA un contexte en temps réel qui va au-delà des fichiers ouverts dans votre éditeur.

MCP sert de passerelle entre Antigravity et Google Stitch. Au lieu d'exporter manuellement les jetons de conception ou de copier les codes hexadécimaux et les métadonnées de mise en page dans l'éditeur, MCP permet à Antigravity d'extraire l'ADN de conception directement de votre projet Stitch en cas de besoin.

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

5. Vérification : 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. Extrais la palette de couleurs et la typographie, puis génère un fichier DESIGN.md dans mon répertoire racine."
2. Examiner : ouvrez le 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 (création)

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

1. Donnez l'invite "Créer" :

"Je veux créer ce site Web complet maintenant. Utilise React et Tailwind CSS. Assurez-vous que les composants sont modulaires. Une fois terminé, exécute le serveur de développement et montre-le moi dans le navigateur intégré." 2. Observer l'agent : il échafaudera le projet dans le terminal, écrira les composants dans l'éditeur et ouvrira l'aperçu dans le navigateur intégré.

6. Examiner et affiner

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

1. Comparez le résultat du navigateur intégré à votre conception Stitch d'origine.
2. Si un élément (comme la marge intérieure du bouton ou l'épaisseur de la police) ne correspond pas, demandez à l'agent : "La marge intérieure du bouton "Commencer" est légèrement décalée. Reportez-vous à la conception Stitch et mettez à jour les classes Tailwind."
3. L'agent récupérera à nouveau le contexte de conception et appliquera le correctif instantanément.

7. Récapitulatif et étapes suivantes

Félicitations ! Vous avez réussi à combler le fossé entre une conception haute fidélité et un codebase fonctionnel à l'aide d'Antigravity et du Stitch MCP.

Résumé de ce que vous avez fait :

• Conception d'une UI dans Stitch à l'aide de Gemini 3.
• Générez une clé API sécurisée et configurez Antigravity MCP.
• Utilisé un agent autonome pour créer et valider un site React + Tailwind.