00:00:00Le design par l'IA s'améliore sans cesse avec chaque nouvel outil et mise à jour de modèle,
00:00:04mais un bon design ne s'obtient pas en comptant sur un seul outil en espérant que le rendu soit superbe.
00:00:09C'est toujours la combinaison d'outils et de ressources qui permet de sublimer les designs,
00:00:12mais surtout, il s'agit d'utiliser le bon outil pour le bon usage.
00:00:16Stitch, l'outil de design IA de Google, vient de recevoir une mise à jour géniale qui facilite grandement la création d'interfaces.
00:00:21Vercel a aussi récemment sorti une nouveauté qui surpasse l'extension Chrome de Claude
00:00:26et qui est devenue mon outil de prédilection pour les tests sur navigateur.
00:00:29On a beaucoup de choses à voir aujourd'hui, car je ne m'attendais pas à ce que
00:00:32cette combinaison produise un design aussi solide.
00:00:34Google Stitch est désormais disponible en tant que MCP pour connecter l'agent IA,
00:00:39lui permettant de créer et gérer des projets, ainsi que de concevoir des designs directement.
00:00:43Grâce à cette mise à jour, je n'ai plus besoin de donner moi-même des prompts précis à Stitch : je laisse Claude s'en charger.
00:00:48Il offre plusieurs fonctionnalités comme la gestion de projets et la possibilité d'en créer de nouveaux
00:00:53ou de récupérer tous vos projets actifs. Il peut gérer les projets via des listes d'écrans
00:00:57et en accédant aux projets et écrans. Il permet aussi à l'agent de créer de nouveaux designs via un prompt textuel.
00:01:02Le processus d'installation est expliqué étape par étape dans leur documentation.
00:01:06Il nécessite l'installation du SDK Google Cloud via curl, mais comme je suis sur Mac,
00:01:11je l'ai installé avec brew pour télécharger la CLI Google Cloud.
00:01:14Vous devez vous connecter deux fois, en tant qu'utilisateur puis en tant qu'application, car il faut
00:01:19le lier à un projet Google Cloud pour activer l'API Stitch à l'intérieur de ce projet,
00:01:24puisqu'il utilise les ressources de ce projet pour générer les designs.
00:01:27Une fois ce processus terminé, vous pouvez connecter Stitch à n'importe quel éditeur.
00:01:31Utilisant Claude Code, je l'ai configuré à l'intérieur et tous les outils étaient prêts à l'emploi.
00:01:35Quelqu'un a simplifié toute cette longue configuration en créant un MCP Stitch
00:01:41qui gère tout lui-même. De l'installation de Google Cloud à la configuration du projet,
00:01:45il s'occupe de tout. C'est officieux et expérimental, mais pour l'instant,
00:01:50cela fonctionne parfaitement. Peu importe ce que l'on construit,
00:01:54la planification est essentielle. Je travaillais sur une application de simulation d'entretien technique
00:01:59qui couvre aussi d'autres types d'entretiens liés aux métiers de la tech.
00:02:03Au fil de la vidéo, j'ai repéré plusieurs points à améliorer dans le fonctionnement
00:02:08du MCP Stitch et la façon de l'exploiter au mieux pour mon processus de design.
00:02:13J'ai regroupé toutes ces règles dans un fichier Claude.md avec le code source de l'app sur
00:02:18AI Labs Pro. Pour ceux qui ne connaissent pas, c'est notre communauté récemment lancée où nous mettons
00:02:23à disposition toutes les ressources de nos vidéos au même endroit : prompts,
00:02:28commandes réutilisables, compétences pour vos projets et bien plus encore. Si vous appréciez
00:02:33notre travail et voulez nous soutenir, c'est le meilleur moyen. Liens en description.
00:02:38Je préfère planifier mes apps avec le mode “plan” de Claude Code car il itère sur chaque aspect
00:02:43de mon idée de départ pour rédiger un document détaillé, mais libre à vous d'utiliser votre IDE préféré.
00:02:48J'ai soumis mon idée d'app à Claude Code en mode planification pour qu'il crée un guide d'interface,
00:02:53en veillant à ce que le design ne ressemble pas aux visuels génériques habituels de l'IA.
00:02:58Même si c'était chronophage, j'ai suivi tout le processus de planification. Il est
00:03:03crucial de tout relire attentivement ; j'ai dû affiner le plan à plusieurs reprises pour qu'il me convienne.
00:03:09J'ai continué à peaufiner jusqu'à être totalement satisfait
00:03:14et, au final, j'ai obtenu exactement le plan que je voulais. Une fois le design validé,
00:03:19il était temps de passer à l'implémentation. Honnêtement, je préfère les capacités
00:03:24de design de Gemini à celles de Claude. J'ai donc demandé à Claude d'utiliser le plan généré
00:03:29pour créer un design fidèle en lançant un nouveau projet via le MCP Stitch. L'outil a servi
00:03:35à créer le projet, puis a commencé à générer les sections. Il a identifié le projet par
00:03:40son ID et a envoyé un prompt détaillé à Stitch, qui a alors lancé la génération des écrans.
00:03:45C'est Gemini 3 Flash qui a généré la première section. Un bémol cependant :
00:03:50il envoyait des prompts séparés pour chaque section de la page d'accueil au lieu de créer
00:03:55une seule page longue, comme on le fait habituellement. Cela peut compliquer l'intégration finale.
00:04:00J'ai donc demandé à Claude de concevoir une seule page complète plutôt que des composants isolés.
00:04:05Claude a produit un prompt très précis, reçu par Stitch, pour générer toute la page
00:04:10tout en conservant les idées initiales de l'approche par sections. Dans ce design,
00:04:15j'ai adoré l'utilisation de références comme des commentaires et des commandes de terminal
00:04:20pour donner une touche très “développeur” à l'ensemble.
00:04:25J'ai utilisé la prévisualisation de Stitch pour vérifier le rendu sur différentes plateformes ;
00:04:30les effets de survol étaient fluides. Le design était réactif,
00:04:34s'adaptant parfaitement au mobile comme au bureau. Une fois satisfait du résultat,
00:04:40je voulais l'intégrer dans mon projet Next.js développé avec Claude Code.
00:04:45J'ai demandé à Claude d'utiliser le MCP Stitch pour récupérer le code de la page d'accueil
00:04:51et l'implémenter dans mon nouveau projet Next.js. Il a utilisé l'outil “get screen”
00:04:56pour extraire les écrans. Cet outil a fourni des liens de téléchargement pour le code,
00:05:01et Claude a utilisé des commandes curl pour l'extraire. Avec le HTML en main,
00:05:06l'intégration est devenue simple. Il a commencé à injecter le design dans l'app,
00:05:11mais il a tout mis dans le fichier page.tsx principal, sans respecter
00:05:17la structure en composants recommandée pour les applications React.
00:05:22J'ai lancé le serveur de dev pour voir le résultat. Le design implémenté
00:05:26était quasi identique à celui de Stitch, hormis le placement du texte dans la section Hero.
00:05:31Les effets de survol, les animations des bento grids et le parallaxe en arrière-plan étaient là.
00:05:36Pour corriger ce bloc de code unique, j'ai demandé à Claude d'utiliser une structure
00:05:41en composants plus modulaire. Il a refactorisé et réorganisé le code en un ensemble
00:05:46propre de composants UI et de pages, facilitant la navigation. Grâce à Claude Code et Stitch,
00:05:51j'ai créé une application complète avec une esthétique “terminal” très appréciée des devs.
00:05:57Cependant, il restait des soucis d'interface. Par exemple, le panneau de code
00:06:02devrait être éditable pour que les utilisateurs puissent taper leur code pendant l'entretien.
00:06:08De plus, la question devrait être en haut car son emplacement actuel nuit à l'expérience utilisateur.
00:06:14Pour tester l'application, j'ai utilisé Agent Browser de Vercel. C'est un outil CLI pour agents IA
00:06:19basé sur Rust et Node.js, ce qui le rend bien plus rapide que les outils d'automatisation classiques.
00:06:24L'installation est simple : une commande suffit pour l'installer globalement sur votre système.
00:06:29Il est limité à Chromium pour l'instant et n'est pas disponible sur Firefox ou Safari.
00:06:34Agent Browser surpasse l'extension Chrome de Claude, Playwright ou Puppeteer.
00:06:40En effet, l'extension Chrome doit lancer un navigateur complet, prendre des captures,
00:06:44analyser les pixels puis naviguer. À l'inverse,
00:06:50Agent Browser est un outil CLI fonctionnant via des commandes bash et des instantanés (snapshots).
00:06:55Concrètement, un snapshot est un arbre d'accessibilité de toute la page avec des sélecteurs
00:07:00pour identifier chaque composant. L'agent les utilise pour naviguer efficacement.
00:07:05Il ne partage pas la session de votre navigateur actuel et tourne à part ;
00:07:10il ne pourra donc pas effectuer d'actions nécessitant vos sessions actives, contrairement
00:07:14à l'extension de Claude qui agit en votre nom dans votre propre navigateur.
00:07:19Pour voir les commandes disponibles, consultez le dépôt GitHub qui liste toutes les fonctions clés.
00:07:24Cela inclut la navigation, l'usage des sélecteurs, le contrôle de la souris, les cookies ou le réseau.
00:07:30Pour mon app, j'ai ajouté un fichier Claude.md lui ordonnant d'utiliser Agent Browser
00:07:35pour tous les tests. Je lui ai aussi dit d'utiliser la commande “help” en cas de doute.
00:07:40Ces règles et le workflow complet sont également disponibles sur AI Labs Pro.
00:07:45Même s'il s'agit d'un outil de navigation sans interface (headless), on peut l'activer
00:07:50en mode visible (headed) pour voir le navigateur à l'œuvre.
00:07:55J'ai demandé à Claude d'utiliser ce mode pour tester l'interface de l'application.
00:07:59Il a d'abord consulté l'aide pour voir les commandes, puis a ouvert le navigateur.
00:08:05Il a adopté une approche proche de celle suggérée pour l'usage du navigateur par Claude :
00:08:09prendre un snapshot de la page entière plutôt que des captures par morceaux comme l'extension Claude,
00:08:14ce qui a grandement accéléré les tests tout en restant très précis.
00:08:19L'agent a parcouru toute l'application, testant plusieurs fonctionnalités
00:08:24en naviguant entre les interfaces et en vérifiant la mise en page. Il a tout bouclé
00:08:29en seulement quatre minutes, là où d'autres outils auraient mis bien plus de temps,
00:08:34car il s'appuie sur l'arbre d'accessibilité et non sur l'analyse d'images.
00:08:39Il a aussi remarqué que l'éditeur de code devait être modifiable et a corrigé cela aussitôt.
00:08:43Il a ensuite vérifié via un snapshot, trouvé le sélecteur de l'éditeur
00:08:48et utilisé les fonctions de clic et de saisie d'Agent Browser pour valider la correction.
00:08:53Nous voici à la fin de cette vidéo. Pour soutenir la chaîne et nous aider
00:08:57à continuer ce type de contenu, vous pouvez rejoindre AI Labs Pro.
00:09:02Comme toujours, merci d'avoir regardé et à la prochaine !