● Journal du Net 📅 06/05/2026 à 10:00

Intelligence Artificielle 👤 Evann Hislers

🏷️ Tags : anthropic cert gemini rte stoc

Google Stitch est la nouvelle arme IA de Google contre Figma. L'outil génère maquettes et codes à partir d'instructions textuelles ou vocales. Stitch est un outil IA gratuit de Google Labs qui permet de créer des interfaces UX/UI en quelques minutes. Il génère maquettes, prototypes interactifs et code fonctionnel à partir d'instructions textuelles ou vocales en français ou en anglais. De la capture d'écran au prototype L’interface minimaliste de Stitch. © Capture d'écran / JDN L’interface de Stitch est similaire à de nombreux outils IA. Sur le panneau de gauche, vous trouverez l'ensemble de vos projets en cours ainsi que divers exemples pour vous inspirer. Dans l’espace central, le chatbot dispose de nombreuses options permettant de bien configurer votre demande. Vous devez d'abord déterminer le support de votre conception en choisissant entre une application mobile et une interface web. Pour enrichir votre requête, il est possible d'importer des fichiers et des captures d'écran, ou encore de renseigner directement l'URL d'un site existant que vous souhaitez repenser. Vous pouvez également perfectionner votre prompt en cliquant sur le bouton "+" et "Améliorer le prompt". Vous pouvez aussi affiner l'esthétique de votre projet dès le départ, avec la possibilité de sélectionner des thèmes de couleurs prédéfinis. Choisir le bon modèle selon l'usage Comme tous les outils d’IA, Stitch propose plusieurs modèles qui ont des capacités différentes selon les cas d’usage. Gemini Flash Gemini 3.0 Flash propose des designs en HTML, permettant ainsi de les exporter directement dans des logiciels de codage. Voici un prompt afin de tester ses capacités : Crée une landing page minimaliste et moderne pour un nouveau produit d'investissement FinTech. Inclus un titre accrocheur, une brève description des avantages clés (ex: 'Investissez intelligemment, gagnez plus'), un appel à l'action clair pour 'S'inscrire à la liste d'attente' avec un champ d'e-mail, et un pied de page discret. Le design doit être épuré, avec une palette de couleurs bleues et blanches, et optimisé pour une exportation HTML rapide. L’agent va d’abord générer un système de design qui guide ensuite la conception d'un produit avec des palettes de couleurs, des boutons… Puis générer l’interface. © Capture d'écran / JDN Si vous souhaitez modifier les couleurs ou tout autre élément de la page, il suffit d’utiliser le chatbot ou la barre qui s’affiche en haut de votre écran lorsque vous sélectionnez une page. Dans celle-ci, vous pouvez trouver un outil afin d’annoter la page, et corriger ce qui ne vous convient pas. Il est possible de sélectionner un élément afin de le modifier plus efficacement. © Capture d'écran / JDN Toujours dans cette barre, vous pouvez cliquer sur “Generate” puis “modifier”, ce qui vous permettra directement de modifier le texte disponible sur le design. Si vous n’êtes pas convaincu par le premier écran généré, vous pouvez demander des variantes en cliquant sur “Generate” puis “Variantes”. Un écran s'affiche sur la droite de votre écran, et vous pourrez préciser ce que vous souhaitez. Ici, nous allons générer 3 variantes en demandant de changer le layout et les couleurs. Stitch génère plusieurs variantes. © Capture d'écran / JDN Gemini Thinking Gemini Thinking 3.1 Pro permet de renforcer la qualité et le raisonnement, ce qui peut prendre plus de temps mais aussi donner des résultats plus qualitatifs. Conçois un tableau de bord de suivi des livraisons pour une application interne de logistique. Le dashboard doit afficher des indicateurs clés tels que 'Livraisons en cours', 'Livraisons terminées', 'Retards', et 'Performance des transporteurs' sous forme de graphiques (barres, lignes) et de cartes. Assure une précision parfaite pour l'alignement des éléments, des espacements cohérents et une typographie claire. Intègre la charte graphique de l'entreprise (couleurs primaires : vert foncé, gris anthracite ; police : Open Sans). L'interface doit être optimisée pour un écran de bureau de 1920x1080 pixels. © Capture d'écran / JDN Ici, le prompt avait précisé l’ajout de cartes, ce que Stitch n’a pas fait. Il le propose cependant dans les suggestions au-dessus du chatbot. L’interface d’un dashboard généré par Stitch. © Capture d'écran / JDN Redesign Redesign permet de repenser des sites ou applications qui existent déjà, en utilisant Nano Banana Pro, il faut donc joindre une capture d’écran ou l’URL du site. En utilisant ce mode, les designs générés seront en format JPEG. Si vous souhaitez obtenir le code, il faudra copier-coller l’image dans une autre conversation et demander un écran à partir de celui-ci. Dans ce test, nous avons utilisé le site du Journal du Net. Crée trois concepts de refonte distincts pour un site web média, chacun explorant un style visuel différent : le premier, moderne et minimaliste, mettant l’accent sur de grandes images et une typographie claire ; le deuxième, audacieux et dynamique, utilisant des éléments graphiques marqués et des couleurs d’accent vibrantes ; le troisième, classique et sophistiqué, reposant sur une grille structurée et une typographie raffinée. Incluez les sections clés suivantes : une bannière principale (hero banner), des actualités mises en avant, une exploration par catégories et des aperçus d’articles. Pensez également à un design responsive, avec des schémas de navigation distincts pour la version bureau et la version mobile. Plusieurs modèles sont générés par Stitch, qui sont modifiables individuellement. © Capture d'écran / JDN Ideate Contrairement aux modes classiques de Stitch visant la production d’interfaces, le mode Ideate est, selon Google, un agent de “Deep Design”. Il est capable d’effectuer des recherches sur le web pour identifier les meilleures pratiques UX, d’analyser des tendances et de transformer une problématique en un plan avant de proposer des interfaces générées. OmniRetail SaaS propose une plateforme centralisée permettant aux grandes marques de gérer leurs stocks, leurs ventes en ligne et leurs données clients. Leurs clients ont accès à un immense portail de documentation interne (guides d'utilisation, documentation API, procédures de configuration). Voici des comptes-rendus d’entretiens utilisateurs. Ces retours indiquent un besoin d’une recherche conversationnelle IA. Aide-moi à brainstormer des fonctionnalités à implémenter selon les demandes clients. Stitch a généré trois documents d'exigences produit (PRD), puis a généré 3 écrans pour chaque document. Les résultats sont assez pertinents sur les remarques clients. © Capture d'écran / JDN Les fonctionnalités clés La prévisualisation instantanée Le principal atout de Stitch est de pouvoir générer des prototypes instantanés. En sélectionnant un design, puis en cliquant sur “Generate” puis “Prototype instantané”, Stitch va générer une interface interactive, qui vous permettra de modifier le texte et de prévisualiser le modèle sur différents écrans. En cliquant sur “Add screen”, sur l’écran de gauche, vous allez pouvoir ajouter un écran que vous avez déjà créé, mais aussi en générer de nouveaux. En cliquant sur “Imaginer un nouvel écran”, Stitch va vous proposer de créer de nouveaux écrans en lien avec votre design. Dans cet exemple, Stitch a généré une page d’inscription, qui est connectée au bouton de la première page. Cependant, sur ce test, Stitch n’a pas bien récupéré les couleurs de la première page générée. © © Capture d'écran / JDN Les différents modes d’export Stitch permet aussi d’exporter les écrans dans des formats facilement utilisables dans des interfaces métiers. Stitch se connecte également aux outils de génération de code par IA, notamment Claude Code d'Anthropic, grâce à l'implémentation du Model Context Protocol (MCP). Ce protocole ouvre une communication sécurisée entre les sources de données et les outils d'IA. Le code est aussi disponible directement dans un fichier zip et votre projet est également exportable directement sur AI Studio de Google, pour passer du design à une application fonctionnelle. Plusieurs modes d’export sont disponibles sur Stitch. © Capture d'écran / JDN Pour Figma, il suffit de cliquer sur un bouton, et en collant le presse-papier dans Figma, le design devient interactif et vous pouvez le modifier comme si vous l’aviez directement créé dans le logiciel. Les designs créés par Stitch s’exportent très facilement dans Figma. © Capture d'écran / JDN Le DESIGN.md Si vous êtes dans une entreprise qui a déjà une charte graphique bien développée, vous pouvez la fournir à Stitch. Pour cela, il suffit de cliquer sur la petite bulle colorée dans le chatbot, et de cliquer sur “Design Systems”. Vous pourrez modifier les couleurs, les polices d’écriture et même les arrondis d’angles. Le plus intéressant reste l’onglet DESIGN.md. Ce fichier markdown est lu par un agent IA et permet de le cadrer. Vous pouvez y détailler tous les éléments d’une identité visuelle comme les couleurs, polices, espacements, styles de composants… Globalement, Stitch est un très bon outil pour les personnes qui ne sont pas à l’aise avec l’UX/UI. Les quelques problèmes perçus lors des tests sont surtout une rupture de style. Lors de la génération de nouveaux écrans pour un prototype, Stitch peut parfois s'écarter de la charte graphique définie sur le premier écran (couleurs légèrement différentes, arrondis de boutons incohérents). L’IA peut aussi ignorer certaines instructions spécifiques (comme l'ajout de cartes dans un de nos exemples) si le prompt est trop dense. Stitch se concentre donc sur la surface, la logique backend reste à construire en plus. L’IA privilégie aussi le design à l’accessibilité et a tendance à utiliser excessivement les balises dans le code, ce qui rend par exemple la navigation par lecteur d'écran difficile. L’outil reste cependant très intéressant, en particulier lors de phases de prototypage rapide.

🔗 Lire l'article original 👁️ 1 lecture