C'est de la folie... Le débat sur le design entre Google Stitch et Claude est enfin tranché
AAI LABS
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00Gemini a été le modèle de référence en matière de design, bien qu'en retrait dans d'autres domaines,
00:00:05notamment avec son outil de design Stitch, que nous avons utilisé à maintes reprises.
00:00:09Cela s'est encore amélioré lors de la sortie de la version 2.0 de Stitch avec plusieurs nouvelles fonctionnalités,
00:00:14accentuant encore son avance. Mais Anthropic a aussi réagi en entrant dans l'espace du design avec la
00:00:19sortie d'Opus 4.7 et de Claude design, qui a eu un tel impact que les gens ont commencé à parler de
00:00:24la fin de Figma. Mais la vraie question est : lequel est réellement le meilleur ? Pour trancher,
00:00:30nous les testons dans plusieurs catégories et, à la fin, vous saurez lequel
00:00:34mérite sa place dans votre flux de travail. Claude design et Google Stitch ont tous deux de nombreuses fonctionnalités
00:00:39qui les distinguent. Claude design est sorti aux côtés d'Opus 4.7 et a rapidement
00:00:45gagné en popularité en tant que “Figma killer” grâce à ses fonctions interactives. Le modèle
00:00:49lui-même est devenu bien meilleur en design et, avec leur outil dédié, leurs créations ont beaucoup progressé.
00:00:54Google Stitch, en revanche, existe depuis un certain temps mais n'était pas si performant jusqu'à ce que Google
00:00:58sorte Gemini 3, un modèle incroyablement plus doué pour le design que tous les autres. Ainsi,
00:01:04combinées à Stitch, les créations se sont nettement améliorées. Voyons maintenant où chacun
00:01:08prend réellement l'avantage. Claude design possède une fonction permettant de créer une présentation
00:01:13et d'y rédiger également des notes de l'orateur. Mais Stitch ne propose rien de tel,
00:01:17car Stitch est limité à l'UI et ne fournit aucune fonctionnalité pour d'autres types de designs que les interfaces web et mobiles.
00:01:23Dans Claude design, vous pouvez aussi référencer d'autres projets dont vous voulez suivre le style
00:01:28en connectant votre dépôt GitHub, ce qui permet à Claude d'importer les styles de design
00:01:32et de créer les designs suivants sur cette base. Stitch gère cela différemment. Il utilise des
00:01:37systèmes de design pour la même tâche, où vous pouvez copier le système de design d'autres sites web
00:01:42hébergés en fournissant simplement leur lien dans Stitch ; à partir de là, il importe le style exact et
00:01:46crée un système utilisé pour les designs ultérieurs. Pour les modifications, Claude design vous permet
00:01:51de reformuler votre demande, mais vous pouvez aussi cliquer directement sur la zone à modifier pour que cela se reflète
00:01:56sur votre design. Il suffit de commenter directement ce que vous voulez changer et il
00:02:00commence à appliquer les modifications. Vous pouvez accumuler les commentaires et les envoyer à Claude
00:02:04tous ensemble. Stitch adopte une approche différente. Vous ne pouvez pas faire de changements directs, sauf pour le
00:02:09texte. Ainsi, si vous voulez changer une couleur ou une taille de police, vous devez ajouter un commentaire sur la zone
00:02:14sélectionnée ou l'annoter, puis envoyer le commentaire à Gemini pour qu'il intègre vos modifications.
00:02:19L'entrée vocale est un autre point de divergence. Claude design permet d'utiliser votre voix pour dicter le prompt
00:02:24au lieu de le taper. Mais c'est là que Stitch gagne, car sa fonction de canevas vocal est
00:02:28essentiellement une conversation en direct avec le modèle où vous lui décrivez le design souhaité,
00:02:33il pose des questions relatives au projet et crée le design pour vous,
00:02:37le tout de manière conversationnelle. Stitch dispose aussi d'une fonction d'aperçu en direct dans un volet séparé
00:02:42pour voir votre design sur ordinateur, mobile et tablette, et interagir directement avec lui.
00:02:47Claude design n'a pas cet aperçu séparé. À la place, il affiche l'UI dans le
00:02:52même volet où vous pouvez interagir directement avec les éléments sans passer par un autre écran,
00:02:57mais vous ne pouvez pas vérifier la réactivité comme avec Google Stitch. Claude design est
00:03:01également conçu pour le travail d'équipe, il permet donc de partager un projet avec plusieurs niveaux de permissions,
00:03:06comme l'édition et le commentaire séparément, ce que Stitch ne propose pas. Dans Stitch, vous partagez
00:03:11simplement le projet et laissez tout le monde travailler dessus sans permissions distinctes.
00:03:15Bien que Stitch soit un projet beaucoup plus mature et que Claude design vienne tout juste
00:03:20de sortir, nous donnerions l'avantage à Claude design sur les fonctionnalités. Claude
00:03:24design est un produit récent uniquement disponible dans les forfaits Claude Pro, Max, Team et Enterprise.
00:03:30Stitch, lui, est disponible gratuitement quel que soit le forfait et utilise simplement un système
00:03:35de crédits pour suivre l'utilisation. En termes d'accessibilité, Stitch offre bien plus de crédits.
00:03:40Il alloue 400 crédits de design quotidiens et 15 crédits de redesign, ce qui est énorme
00:03:46pour une seule journée, et les crédits mensuels sont encore plus élevés. Normalement, un design simple coûte trois
00:03:51crédits et peut varier selon la complexité et le nombre de générations, donc vous pourrez créer beaucoup de choses.
00:03:56Claude design a des limites distinctes qui s'étalent sur une semaine. Cette limite
00:04:00n'impacte pas vos autres limites de Claude code, vous pouvez donc utiliser les autres fonctions de Claude même si la
00:04:05limite de design est atteinte. Mais comme nous l'avons dit dans la vidéo précédente, cette limite est quasi inutilisable
00:04:10car elle ne permet pas d'expérimenter librement et s'épuise avant d'avoir pu construire quelque chose
00:04:15de substantiel, surtout avec le forfait Pro qui ne permet que quelques essais avant
00:04:20de s'arrêter. Donc, si vous voulez vraiment tirer profit de Claude design, vous devrez
00:04:24passer au forfait Max. En comparant les coûts, Stitch l'emporte haut la main
00:04:29car il permet au moins l'expérimentation, contrairement à Claude design. Nous avons testé les deux
00:04:34outils avec le même prompt détaillant le style du site et les sections souhaitées. Claude design
00:04:39a créé les tâches comme Claude code le fait habituellement et s'est mis au travail. Pendant que Claude design
00:04:44prenait son temps, nous avons donné exactement le même prompt à Google Stitch.
00:04:49La première chose faite par Stitch fut de créer le système de design, visualisant tout, des couleurs
00:04:54à la typographie, en passant par les icônes et boutons. Avant même que Claude design n'ait fini, Stitch était prêt.
00:04:59Il a bâti une page d'accueil en respectant le style de son système de design avec un équilibre parfait entre
00:05:04les couleurs principales et d'accentuation. Claude design a pris beaucoup plus de temps et, une fois terminé, a entamé
00:05:09les étapes de vérification. Chaque partie du travail de Claude design était interactive, contrairement à la page statique de Stitch.
00:05:15Dès le premier jet, il nous a proposé de choisir entre les couleurs d'accent et le thème principal,
00:05:20nous permettant de faire de petits ajustements nous-mêmes sans reformuler de prompt. Sur la qualité du design,
00:05:25nous donnerions le point à Google Stitch car son design était bien supérieur. Stitch a utilisé
00:05:30la palette de couleurs de manière créative pour correspondre au style et à l'ambiance de l'appli, alors que Claude
00:05:34proposait un choix générique manquant de profondeur. Côté rapidité, Stitch gagne aussi
00:05:39car Claude design est bien trop lent pour chaque design. Dès qu'il doit ajouter des images, Claude design crée des SVGs
00:05:45et les intègre. À moins de fournir vos propres ressources, il se repose entièrement sur
00:05:50la génération de SVGs. Google, de son côté, dispose de Nano Banana, son propre modèle de génération d'images.
00:05:55Stitch l'intègre directement et, même sans demande explicite, l'utilise pour toutes les sections
00:06:00du design, ce qui améliore grandement les résultats. Quelle que soit la qualité des SVGs,
00:06:05ils ne peuvent rivaliser avec un modèle d'image. Dans cette situation, Google Stitch
00:06:10est le grand gagnant. Stitch n'est pas réputé pour les animations car il se focalise sur le design,
00:06:16mais nous avons tout de même voulu voir comment il les gérait. Il a essayé d'en ajouter,
00:06:21mais elles n'étaient pas visibles directement et ne pouvaient être prévisualisées que dans un onglet séparé sur une seule section.
00:06:26Mais avec la même tâche, Claude design a ajouté de multiples animations, comme un bandeau défilant sous l'en-tête.
00:06:32L'apparition au défilement a aussi été ajoutée, de manière bien plus coordonnée et appliquée
00:06:37à chaque composant. Claude design est bien meilleur que Stitch pour les animations car il utilise des
00:06:43bibliothèques populaires comme les shaders et parvient à créer des animations interactives
00:06:48qui réagissent aux mouvements de la souris et aux clics. Pour les animations, Claude design est donc le vainqueur.
00:06:54Au passage, si vous appréciez notre contenu, n'hésitez pas à cliquer sur le bouton “hype”
00:06:59car cela nous aide à produire plus de vidéos et à toucher plus de monde. Pour tester la compréhension
00:07:04de l'appli et la gestion des changements, nous leur avons demandé de créer des pages d'inscription et de connexion.
00:07:09Stitch a fini en premier, a utilisé le même système de design pour chaque page et a implémenté
00:07:14le même en-tête et pied de page. Nous avons pu voir le flux avec la fonction prototype
00:07:19et vérifier comment chaque bouton était relié aux autres. L'implémentation de Claude design
00:07:24correspondait mieux à l'idée de l'application et il a mieux saisi les besoins.
00:07:28Il a créé la page de connexion avec créativité et est même allé plus loin sur la page d'inscription
00:07:33en proposant plusieurs styles de comptes. Nous voulions aussi voir l'intégration des modifications.
00:07:38Dans Claude design, nous avons groupé nos commentaires et il a commencé à les appliquer.
00:07:44Sur Stitch, il a fallu annoter les zones à modifier, mais le résultat n'était pas
00:07:49exactement ce qu'on attendait. Il a ajouté un pied de page au mauvais endroit, juste après les citations.
00:07:54Globalement, itérer avec Stitch n'est pas simple car chaque changement crée un nouvel écran,
00:07:59rendant l'espace de travail encombré. Claude design offre une bien meilleure expérience
00:08:04car les changements sont directs et, comme il comprend l'appli, il les applique correctement
00:08:09sans s'écarter du style. Pour l'itération, Claude design est donc nettement supérieur.
00:08:14Chaque outil possède son propre système de design. Pour Claude design, il sert à identifier votre
00:08:20marque, car l'outil est destiné aux équipes gérant des chartes graphiques. On peut y ajouter une description,
00:08:25des polices, logos et ressources pour créer un système complet représentatif de votre style.
00:08:30Pour Stitch, le système de design est un fichier qui représente un design spécifique plutôt qu'une marque.
00:08:36Ce fichier n'est pas limité à Stitch. On peut l'exporter et l'utiliser avec n'importe quel agent
00:08:41qui le comprendra et l'appliquera. Comme mentionné, on peut importer des systèmes de design
00:08:46depuis d'autres sites. Stitch a rendu open source le fichier design.md,
00:08:52qui contient des commandes npm pour l'installation et le formatage. Chaque système a son utilité,
00:08:57mais nous préférons celui de Google car il facilite le changement de plateforme et ne vous enferme pas.
00:09:02Maintenant que nous avons testé les designs, parlons du passage du design au code.
00:09:07Comme dit plus haut, Claude design offre plus d'options d'exportation avec contrôle des permissions.
00:09:13Il permet d'exporter en pdf, en diapositives et même vers le canevas pour poursuivre le travail.
00:09:18Mais la méthode que nous utilisons le plus est le transfert vers Claude code pour développer nos applis.
00:09:23En copiant-collant un seul prompt dans Claude code, celui-ci récupère le design et l'implémente.
00:09:28Google Stitch, en revanche, propose de bien meilleurs modèles de transfert.
00:09:33Stitch possède un MCP qui permet de le connecter à votre agent de codage
00:09:39pour que ce dernier envoie des prompts à Stitch et en extraie les designs pour les intégrer.
00:09:44Claude design n'a pas d'intégration MCP ; nous préférons celle de Stitch car elle permet
00:09:49aux agents de codage de prompter dans un langage adapté à Stitch, évitant de se soucier
00:09:53de la formulation tout en obtenant le résultat voulu. Stitch permet aussi l'export
00:09:58en code compressé (zip), mais d'autres options existent, comme l'export vers Google AI Studio
00:10:04pour continuer avec les ressources du studio et Firebase déjà intégré,
00:10:09ou directement vers Figma pour collaborer. Nous utilisons surtout l'export MCP
00:10:14car avec cette intégration, nous n'avons plus à gérer le transfert, les agents de codage s'en chargent.
00:10:19Il permet aussi d'exporter un PRD (document d'exigences produit) pour que d'autres personnes
00:10:25ou agents implémentent l'appli sans souci. Pour le style de transfert, Stitch est donc le gagnant.
00:10:30Cela nous amène à la fin de cette vidéo. Si vous souhaitez soutenir la chaîne
00:10:35et nous aider à continuer, vous pouvez le faire via le bouton “super thanks” ci-dessous.
00:10:40Comme toujours, merci d'avoir regardé et à la prochaine.