00:00:00Vos agents IA sont devenus plutôt doués pour le design maintenant.
00:00:02Ils n'ont plus vraiment ces problèmes où les sites créés comportaient des éléments cassés.
00:00:06Mais comme les modèles ont tous été entraînés sur les mêmes données, les designs sont toujours trop
00:00:10similaires et génériques.
00:00:11Même les modèles de Claude ont besoin d'un prompt spécial pour éviter cette erreur.
00:00:15Google Stitch est un outil conçu spécifiquement pour le design, et il peut s'intégrer directement
00:00:19dans votre flux de travail Claude Code.
00:00:21Dans cette vidéo, nous allons voir 4 façons d'utiliser Stitch avec Claude Code pour garantir
00:00:26que vos applications ne ressemblent pas à tous les autres sites générés par l'IA.
00:00:30La nouvelle mise à jour de Stitch utilise un système de design pour construire votre interface,
00:00:34et ces systèmes s'appuient sur toutes les fonctionnalités du guide UI des sites web, incluant
00:00:38différents champs comme les couleurs, les thèmes, les polices, et plus encore.
00:00:41Ces caractéristiques sont en fait définies via le fichier design.md.
00:00:45Ce fichier est aussi ce qui rend le design transférable d'un agent à un autre.
00:00:49Vous pouvez transférer ce fichier design.md à n'importe quel agent avec lequel vous implémentez ce design,
00:00:54et il adaptera parfaitement tout le thème stylistique.
00:00:56Si cela fonctionne, c'est parce que le fichier est spécialisé pour les agents.
00:00:59Il contient un langage plus ciblé pour qu'ils saisissent facilement l'intention du design.
00:01:04Il visualise également tous les systèmes de design à l'écran, vous n'avez donc pas qu'à
00:01:08interpréter le style uniquement par du texte.
00:01:10Vous pouvez avoir un aperçu du rendu final de l'application une fois implémentée,
00:01:14en visualisant concrètement les couleurs et les polices côte à côte.
00:01:16Dès que vous construisez quelque chose avec Stitch, la première étape consiste à créer un design.md
00:01:21et un système de design.
00:01:22Même si vous ne lui demandez pas explicitement dans votre prompt.
00:01:25Une fois le système de design fixé, chaque fois qu'il crée un site, il peut assurer la cohérence
00:01:30sur plusieurs pages et lors des régénérations.
00:01:32Cela corrige le plus gros problème que nous avions avec Stitch, car il n'arrivait pas à
00:01:36maintenir la cohérence du design aussi bien qu'il le fait maintenant.
00:01:39Mais au lieu de compter sur le système de design que Stitch crée seul, vous pouvez aussi
00:01:43créer vos propres systèmes de design.
00:01:45Vous pouvez définir le thème selon vos besoins, ou si vous avez un fichier de design, vous pouvez
00:01:49simplement le télécharger : il l'incorporera automatiquement comme système de design et le
00:01:53visualisera pour vous.
00:01:54L'important est de s'assurer que le fichier design.md que vous utilisez suit une
00:01:58structure appropriée.
00:01:59Cette structure est reconnue pour être optimisée pour les agents, spécifiquement Stitch, et les aide
00:02:04à comprendre les intentions efficacement.
00:02:06Souvent, nous brainstormons nos idées d'applications avec Claude ou d'autres agents.
00:02:09Si vous voulez créer des designs à partir de ces sessions dans Stitch, vous pouvez importer
00:02:13le style de design vers Stitch sous la forme d'un fichier design.md.
00:02:17Vous pouvez donner à Claude une structure de fichier de design que vous trouverez sur le dépôt
00:02:21officiel des skills de Google contenant tous les outils liés à Stitch.
00:02:25Parmi les exemples, vous trouverez un modèle de fichier de design optimisé pour Stitch.
00:02:29Ainsi, quel que soit l'agent utilisé, vous pouvez lui fournir le style du site que vous voulez créer
00:02:33avec le modèle, pour qu'il génère le design.md basé sur ce modèle en respectant
00:02:38correctement le guide de style.
00:02:39Une fois que votre agent a généré le fichier design.md détaillé, vous pouvez l'apporter dans Stitch et
00:02:44le coller dans la section design.md lors de la création d'un nouveau système de design.
00:02:48Dès que vous cliquez sur "Save design", il crée une visualisation pour ce design.
00:02:52Une fois visualisé, vous pouvez l'utiliser et demander à Stitch d'implémenter l'interface en utilisant
00:02:56le nouveau système de design comme base.
00:02:59Stitch implémente ensuite le design, qui reflète le système que vous avez créé, capturant
00:03:03exactement le style défini dans le design.md.
00:03:05Grâce à ces systèmes de design, vous pouvez créer autant de pages que vous voulez par itération,
00:03:10et chacune suivra le même style visuel.
00:03:12Si vous avez déjà créé des projets sur Stitch et que vous voulez en extraire le design.md,
00:03:16vous pouvez le faire en utilisant les skills créés par Google.
00:03:19Dans ces skills, l'outil design.md convertit les projets Stitch en un fichier design.md
00:03:25selon le modèle, optimisé pour le flux de travail de Stitch.
00:03:28Aussi, si vous appréciez notre contenu, n'hésitez pas à cliquer sur le bouton "Hype",
00:03:32car cela nous aide à produire plus de vidéos de ce genre et à toucher plus de monde.
00:03:35Les capacités de Stitch sont impressionnantes, mais il reste des lacunes dans l'implémentation
00:03:39d'une bonne UX pour la niche spécifique du site que vous construisez.
00:03:42Il n'est pas toujours préférable de concevoir de zéro.
00:03:44Les sites existants reposent sur des modèles qui fonctionnent réellement pour leur niche
00:03:48spécifique ; imiter ces modèles vous aide donc à créer un site qui fonctionne
00:03:53vraiment pour vos utilisateurs.
00:03:54Auparavant, avec l'IA, nous fournissions une capture d'écran puis demandions à l'outil
00:03:58de copier ce design.
00:04:00Il essayait de répliquer la mise en page, les composants, tout à l'identique.
00:04:04Mais la nouvelle mise à jour de Stitch a changé la donne.
00:04:06Avec la fonction de redesign de Stitch, vous donnez toujours une capture d'écran, mais il
00:04:10ne se contente plus de la copier.
00:04:11Il utilise cette capture d'écran comme un guide de style.
00:04:12Il extrait les modèles, le placement des composants et le langage visuel de cette référence
00:04:17pour les appliquer à votre propre site.
00:04:18Vous construisez donc quelque chose d'original sur la base d'un modèle existant.
00:04:22Pour utiliser la fonction de redesign, vous avez besoin d'une capture d'écran.
00:04:25Mais faire des captures section par section est fastidieux.
00:04:28Utilisez plutôt une extension comme GoFullPage pour une capture de page complète afin de
00:04:33fournir la référence de style en une seule fois.
00:04:35Une fois la capture d'écran du site cible fournie, il l'utilise comme référence de style et
00:04:39de placement des composants pour créer une interface similaire à celle de l'image.
00:04:44C'est très ressemblant.
00:04:45Il utilise les capacités de génération d'images de Nano Banana pour créer des images pour
00:04:50différentes sections correspondant au style de l'interface.
00:04:51Il existe d'autres moyens de copier le style d'un autre site web.
00:04:54Vous pouvez imiter tout le style d'un site en copiant son lien, puis, depuis les systèmes de design,
00:04:59importer le design de n'importe quel site sous forme de fichier design.md.
00:05:03Fournissez simplement le lien et il importera le système de design du site en le parcourant
00:05:06pour en extraire le style et la typographie.
00:05:09Mais parfois, Stitch ne saisit pas exactement le style que vous aviez en tête.
00:05:12Dans ce cas, vous pouvez simplement télécharger un croquis rapide ou un wireframe avec
00:05:17le style que vous souhaitez réellement.
00:05:18Vous pouvez aussi spécifier le thème de design que vous voulez pour votre site.
00:05:21Avec ces références et spécifications, l'interface générée par Stitch correspondra exactement
00:05:26au wireframe et au guide de style, alignant le site avec vos exigences.
00:05:31Et s'il y a un élément spécifique que vous souhaitez modifier, vous pouvez le faire en
00:05:34utilisant les fonctions d'annotation et d'édition de Stitch.
00:05:36Annotez la partie qui ne vous plaît pas avec le rendu souhaité, cliquez sur appliquer, et il
00:05:40implémentera le style demandé.
00:05:42Mais avant de poursuivre, un mot de notre sponsor.
00:05:45Uptime Robot.
00:05:46Vous construisez avec des API d'IA, OpenAI, Anthropic, peu importe.
00:05:49Tout semble correct, code 200 OK, mais la réponse est médiocre.
00:05:52Votre application plante et vous ne l'apprenez que lorsque les utilisateurs se plaignent.
00:05:56C'est là qu'intervient Uptime Robot.
00:05:57Il détecte le problème avant eux.
00:05:59Il interroge vos API, vérifie la réponse réelle, pas seulement le code d'état, et vous alerte
00:06:04instantanément sur Slack, par email ou là où vous travaillez.
00:06:06Surveillez les points d'accès IA, suivez vos crédits API avant d'atteindre les limites, et
00:06:10détectez les erreurs avant qu'elles ne deviennent des tickets de support.
00:06:12Vous obtenez même des pages de statut publiques montrant le temps de disponibilité en direct.
00:06:16La configuration ne prend que quelques secondes.
00:06:18Ajoutez votre endpoint, définissez la réponse attendue, choisissez vos alertes, et c'est parti.
00:06:21Il existe une version gratuite avec 50 moniteurs pour essayer.
00:06:24Le suivi d'API est inclus pour seulement 7 $ par mois, moins cher que de l'héberger soi-même.
00:06:28Utilisez le code "AI Labs" pour 10 % de réduction, valable jusqu'à la fin de l'année.
00:06:32Cliquez sur le lien dans le commentaire épinglé et commencez à construire dès aujourd'hui.
00:06:35Une autre façon de construire est de connecter les capacités de Stitch avec celles de vos
00:06:40agents existants comme Claude Code ou tout autre agent supportant les skills d'agent.
00:06:44Google a développé plusieurs skills à cet effet, offrant des capacités
00:06:48supplémentaires à l'agent pour travailler avec Stitch.
00:06:51Vous pouvez installer n'importe quel skill en suivant les étapes sur le dépôt.
00:06:54Le plus important à intégrer dans votre flux de travail est le skill Enhance Prompt.
00:06:58Il transforme vos prompts vagues en prompts optimisés pour Stitch, les rendant
00:07:02parfaitement adaptés à la manière dont Stitch fonctionne.
00:07:05Il contient des références pour les mots-clés courants car Stitch s'appuie sur les adjectifs
00:07:09pour identifier une ambiance plutôt que sur des descriptions précises du design.
00:07:12À part ça, il y a un skill pour construire des sites complets appelé Stitch Loop.
00:07:16Il permet à l'agent d'utiliser les outils de développement Chrome et de construire le site de manière
00:07:20itérative depuis Stitch en utilisant un modèle de boucle autonome.
00:07:23L'idée est de maintenir un suivi correct des prompts d'une étape à l'autre.
00:07:28Comme ces skills gèrent tout d'eux-mêmes, c'est le flux de travail le plus proche
00:07:32de la création d'une application d'un seul coup.
00:07:33Mais avant d'utiliser ces skills, assurez-vous que Stitch MCP est connecté,
00:07:38car c'est ce que Stitch utilise en coulisses pour construire et récupérer les designs.
00:07:41Une vidéo sur la chaîne détaille le processus d'installation de MCP et la résolution des
00:07:46problèmes courants, n'hésitez pas à la consulter.
00:07:49Maintenant, quand vous exportez un design de Stitch, via MCP ou par code, il génère
00:07:53généralement un énorme fichier HTML où tout est regroupé.
00:07:56Comme la plupart des applications sont basées sur React avec une structure en composants,
00:08:01cela devient une charge supplémentaire pour les agents de convertir le HTML en React.
00:08:03Pour simplifier cela, vous pouvez utiliser le skill React component.
00:08:06Il convertit le design Stitch en composants modulaires avec des métriques de validation appropriées.
00:08:10Il utilise des scripts pour valider et récupérer les designs afin de mapper facilement les composants.
00:08:15Avec ce flux, vous pouvez créer un fichier Clod.md listant le flux de travail souhaité.
00:08:20Il doit suivre cet ordre précis.
00:08:21D'abord, vous utilisez le skill Enhance prompt pour transformer vos prompts vagues en prompts Stitch,
00:08:26garantissant que Stitch reçoive les bonnes instructions.
00:08:28Ensuite, il doit construire le design en utilisant Stitch loop.
00:08:31Une fois la construction terminée, il doit implémenter le design dans l'application via les composants React.
00:08:35Lorsque vous donnez le prompt pour la page de destination souhaitée, il suivra les instructions
00:08:39définies dans Clod.md.
00:08:41Il charge d'abord le skill Enhance prompt, qui génère ensuite le prompt amélioré en utilisant
00:08:45les outils et skills disponibles.
00:08:47Une fois le prompt prêt, il demande votre permission pour passer à l'étape suivante.
00:08:50Après approbation, il charge le skill Stitch loop et utilise les outils Stitch MCP pour créer le projet.
00:08:56Une fois le projet créé, il envoie le prompt généré par Enhance prompt à Stitch,
00:09:00qui génère d'abord le système de design puis le design lui-même.
00:09:04Pour les images, il utilise la génération d'images intégrée au processus de design.
00:09:08Le design fini, il passe à l'étape suivante avec le skill React component pour créer
00:09:12une structure en composants et implémenter l'application, optimisée pour votre framework.
00:09:17Quel que soit celui que vous utilisez.
00:09:18Si vous lancez le serveur de développement, vous verrez que l'application reproduit exactement
00:09:22le design de Stitch, incluant les effets de survol, rendant ce flux bien plus rapide
00:09:26pour bâtir des applications fonctionnelles.
00:09:28Le fichier Clod.md utilisé ici, ainsi que toutes les ressources créées, sont disponibles dans
00:09:33AI Labs Pro.
00:09:34Cela inclut les ressources de cette vidéo ainsi que celles des précédentes, que vous pouvez
00:09:38télécharger pour vos propres projets.
00:09:40Si vous appréciez notre travail et souhaitez soutenir la chaîne, c'est le meilleur moyen
00:09:43de le faire.
00:09:44Le lien est dans la description.
00:09:46Construire de zéro n'est pas toujours idéal, et cela vaut aussi pour les composants.
00:09:50L'interface générée par de simples composants React est trop statique et centrée sur l'aspect,
00:09:54nécessitant un effort supplémentaire pour ajouter des interactions et des animations.
00:09:58Au lieu de partir de zéro, vous devriez utiliser des bibliothèques UI dans vos applications car
00:10:02elles facilitent la création grâce à des fonctionnalités d'interaction intégrées
00:10:07qui rendront votre interface plus vivante.
00:10:08Pour simplifier cela, Google propose un skill ShadCN UI, qui guide la conversion
00:10:13d'une application Stitch vers des composants ShadCN.
00:10:16Ce skill est essentiellement un guide détaillé sur la manière d'implémenter correctement
00:10:21ces composants dans toute l'application.
00:10:22Comme ShadCN permet de se connecter à plusieurs registres, vous pouvez étendre ses
00:10:26capacités en les intégrant et en exploitant aussi leurs fonctionnalités.
00:10:30Mais il est recommandé de configurer le MCP ShadCN avant de construire pour que le flux
00:10:35reste fluide.
00:10:36Pour l'utiliser efficacement, configurez aussi un fichier Clod.md avec des instructions
00:10:41pour que, dès que vous utilisez Stitch MCP, il utilise automatiquement le skill ShadCN
00:10:47pour convertir le design en composants.
00:10:48Puisque vous pouvez ajouter des registres, spécifiez ceux que vous voulez utiliser.
00:10:52Par exemple, pour notre site, nous avons choisi Glassmorphism et Motion Primitives
00:10:57car ils proposent des composants au ressenti premium.
00:11:00Vous pouvez choisir ceux qui conviennent le mieux aux besoins de votre projet.
00:11:03Si vous avez déjà créé une interface dans Stitch, vous pouvez la convertir en application
00:11:07avec des composants ShadCN.
00:11:08Spécifiez simplement le nom du projet à implémenter et demandez-lui de l'intégrer
00:11:12dans l'application.
00:11:13Il récupérera d'abord le projet, chargera le skill ShadCN UI et utilisera les outils
00:11:18ShadCN MCP ainsi que les registres spécifiés pour implémenter toute
00:11:23l'application.
00:11:24Une fois terminé, l'application reflétera exactement ce que vous voyez dans Stitch,
00:11:27mais construite avec des composants ShadCN UI.
00:11:29Cela fait une grande différence car l'application générée d'un coup devient bien plus
00:11:34interactive grâce à cette facilité d'implémentation.
00:11:36Cela nous amène à la fin de cette vidéo.
00:11:38Si vous voulez soutenir la chaîne et nous aider à continuer ces vidéos, vous pouvez
00:11:42le faire via le bouton "Super Thanks" ci-dessous.
00:11:44Comme toujours, merci d'avoir regardé et à la prochaine !