00:00:00Je vais vous proposer, ainsi qu'à des centaines d'autres designers, une expérience vraiment géniale.
00:00:06Je veux voir jusqu'où on peut pousser le design par l'IA, et cette fois, c'est spécifique à Claude Code,
00:00:13pour produire une section “hero” basée sur la même idée d'entreprise fictive.
00:00:19Actuellement, un défi de design UI de 30 jours est en cours sur designcourse.com.
00:00:24C'est 100 % gratuit.
00:00:25On a déjà eu un premier défi avec plus de 200 participations, et voici maintenant le
00:00:30deuxième défi.
00:00:31Je vais vous montrer comment utiliser Claude Code en l'équipant d'une compétence spéciale en design
00:00:37afin de produire des créations de très haute qualité.
00:00:40Le but de ce défi est de vous donner à tous la même idée d'entreprise fictive,
00:00:44mais nous allons voir si vos talents en “prompting” permettent de créer la meilleure interface
00:00:50possible pour cette tâche.
00:00:52Dans un instant, je vous montrerai exactement comment participer à ce défi aujourd'hui.
00:00:56Peu importe quand vous regardez ceci, même si c'est dans plusieurs mois,
00:00:58vous pourrez toujours participer pour voir ce que les autres ont réalisé.
00:01:01Mais d'abord, je vais vous montrer comment tout configurer.
00:01:04Alors, premièrement, vous aurez évidemment besoin de Claude Code.
00:01:07Voici la page pour l'installation.
00:01:10Il existe différents environnements.
00:01:11Je ne vais pas tout détailler, je vais simplement mettre le lien de la page d'installation.
00:01:15Vous pourrez trouver comment l'installer si ce n'est pas déjà fait.
00:01:17Une fois prêt, il vous suffit de taper “Claude” et l'interface devrait se charger
00:01:22juste ici.
00:01:23D'accord.
00:01:24L'étape suivante consiste à l'équiper d'une compétence spéciale.
00:01:26Une compétence, c'est en fait juste un ensemble d'instructions injectées dans le contexte de
00:01:30l'IA.
00:01:31Et il existe plein de compétences différentes.
00:01:32Avant de vous montrer la compétence, voici comment en installer sur votre système.
00:01:37Vous devez trouver le dossier Claude Code en fonction de votre OS et de l'environnement
00:01:43que vous utilisez.
00:01:44Ensuite, vous prenez simplement ce fichier Markdown, qui est la compétence, et vous le placez
00:01:49dans ce dossier.
00:01:50La compétence en question s'appelle “Front End Design”, juste ici.
00:01:55Je mettrai le lien dans la description pour que vous puissiez y accéder.
00:01:58Ce qu'il faut faire, c'est cliquer sur Skills, Front End Skills, Skill.md, puis ici,
00:02:03télécharger le fichier brut (“Download Raw File”).
00:02:06Une fois que vous avez ce fichier de compétence, vous le prenez et cherchez votre dossier Claude Code
00:02:12à l'emplacement que je viens de vous montrer.
00:02:14Sur mon Windows 11, le dossier se trouve dans C:, Utilisateurs, Gary, puis .claud.
00:02:21À l'intérieur, il se peut que vous n'ayez pas de dossier “skills”.
00:02:24Si c'est le cas, créez-le.
00:02:25Le mien est déjà là.
00:02:26Double-cliquez dessus, puis créez un dossier nommé “Designer”.
00:02:31C'est là que vous collerez le fichier de compétence, Skill.md.
00:02:35Si Claude est déjà lancé, assurez-vous de le fermer d'abord en faisant
00:02:39plusieurs fois Ctrl+C.
00:02:41Tapez à nouveau “Claude”, puis tapez /skills pour lister toutes les compétences disponibles.
00:02:47Pour l'instant, j'en ai trois.
00:02:48On voit ici “Front End Design”.
00:02:51Et pour y accéder, il faudra utiliser /frontend-design.
00:02:56Ensuite, vous collez votre prompt.
00:02:58Laissez-moi vous montrer cela en action.
00:03:00Si j'écris /frontenddesigner, crée la section hero d'une page de destination pour un service de
00:03:06vérification d'identité par IA.
00:03:07Elle doit avoir un fond beige clair avec deux colonnes, un titre percutant et un
00:03:11texte à gauche avec un appel à l'action.
00:03:13À droite, il devrait y avoir une animation UI fictive mais simple qui illustre
00:03:16le concept de vérification d'identité.
00:03:20Place cela dans un fichier HTML avec du CSS et utilise des variables.
00:03:23C'est tout pour mon prompt, et voici ce que ça a produit.
00:03:28Je ne sais pas pour vous, mais c'est vraiment solide, et il a réussi du premier coup.
00:03:33Et vous avez vu le prompt.
00:03:35Il est très court.
00:03:36Maintenant, je vais vous présenter le défi et l'idée d'entreprise pour le prompt que je veux
00:03:41que vous utilisiez, et j'ai hâte de voir ce que vous allez produire.
00:03:46L'idée est d'enrichir le prompt avec vos propres préférences de design pour créer quelque chose
00:03:51d'unique et même d'animé si vous le souhaitez.
00:03:53La première étape est d'aller sur [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) challenge.
00:03:58Le lien se trouve quelque part en dessous.
00:04:00En arrivant ici, vous verrez cette page : 613 étudiants inscrits et 197 participations
00:04:06pour le premier défi que nous avons déjà terminé.
00:04:08Ceci concerne le deuxième défi.
00:04:09Cliquez ici pour obtenir le modèle Figma UI/UX 2026.
00:04:16Le défi numéro deux s'y trouve, et c'est celui-là que je veux que vous releviez.
00:04:20Voici à quoi cela ressemble.
00:04:23C'est le défi numéro deux, et voici les instructions.
00:04:27C'est une partie du prompt que vous devez inclure.
00:04:29C'est l'idée d'entreprise fictive.
00:04:31Je ne veux pas que vous utilisiez une autre idée.
00:04:32On doit tous utiliser la même : une entreprise d'inspection de maison par IA.
00:04:37Elle utilise la vision par ordinateur pour analyser les vides sanitaires, les toits ou les fondations
00:04:42afin de détecter des défauts et générer des rapports d'inspection standardisés.
00:04:45Notre objectif est de guider l'IA avec ce prompt initial
00:04:50pour créer une section hero de niveau supérieur grâce à notre compétence Claude Code Designer.
00:04:56Et voici les instructions.
00:04:58Utilisez Claude Code pour générer une section hero pour l'entreprise fictive présentée
00:05:03à droite de ce cadre.
00:05:05Assurez-vous de copier-coller cela dans votre prompt.
00:05:08Incluez l'idée d'entreprise, mais ajoutez aussi vos propres préférences de style et de design.
00:05:13C'est comme ça que j'ai orienté l'IA pour créer la petite carte animée
00:05:17que nous venons de voir.
00:05:18Vous pouvez utiliser autant de prompts que nécessaire pour affiner le résultat.
00:05:22Vous pouvez intégrer des animations si vous en avez envie.
00:05:24Lors de l'envoi, indiquez d'abord le nombre de prompts qu'il a fallu pour arriver au résultat,
00:05:29car je veux que vous peaufiniez le rendu final.
00:05:32Incluez également le prompt lui-même dans la section commentaire.
00:05:36Vous pouvez aussi utiliser le plugin Claude Code to Figma pour partager un prototype Figma
00:05:42de votre design, mais ce n'est pas obligatoire.
00:05:44Une capture d'écran fera très bien l'affaire.
00:05:47Le plugin Claude Code to Figma vous permet de prendre le résultat final de votre interface
00:05:53et de l'envoyer vers Figma.
00:05:54Je ne vais pas montrer comment faire ici car j'ai publié une vidéo hier
00:05:58qui explique précisément cela.
00:06:00Encore une fois, ce n'est pas une obligation.
00:06:01Une capture d'écran suffit pour votre participation.
00:06:04Ensuite, pour soumettre votre projet, la procédure est indiquée ici.
00:06:09Si par exemple vous décidez de partager un document Figma de votre travail,
00:06:14ce qui me permettrait de faire des révisions si je choisis de passer le vôtre en revue, cliquez sur
00:06:18partager (“Share”) en haut à droite.
00:06:20Copiez le lien du prototype, assurez-vous qu'il est accessible à tous, et soumettez-le
00:06:25avec votre projet.
00:06:26Ce défi va être vraiment sympa car on va voir si les résultats
00:06:30vont se ressembler ou non.
00:06:32Ils le seront si vous ne donnez pas assez de directives, mais pas si vous y mettez du vôtre
00:06:37en infusant vos propres idées créatives et styles.
00:06:40Si vous jouez le jeu, je pense qu'on verra beaucoup de variations et de concepts
00:06:47très intéressants.
00:06:48Alors, précisez bien la palette de couleurs et les types d'illustrations
00:06:53ou d'animations que vous voulez.
00:06:55Le but est d'essayer de maximiser ce que l'IA peut produire.
00:06:58J'espère que vous serez nombreux à participer.
00:07:01C'est un défi vraiment passionnant.