Transcript
00:00:00Claude Design est arrivé et a tout changé en matière de design, mais en réalité, c'est beaucoup
00:00:04plus de battage médiatique que ce que la plupart des gens pensent.
00:00:05Et c'est exactement pour cela que ce que vous voyez sur X n'est pas toute l'histoire.
00:00:09Si vous pensez que Claude Design fait quelque chose de révolutionnaire ou que ces démos insensées qui circulent
00:00:13sont la preuve que vous devez passer à cet outil, vous vous trompez.
00:00:17L'outil lui-même n'est même pas la raison pour laquelle ces designs sont si beaux, et la façon dont les gens
00:00:21l'utilisent se retourne discrètement contre eux d'une manière que la plupart n'ont pas encore remarquée.
00:00:25Claude Design a été commercialisé comme un produit révolutionnaire pour l'industrie du design dès l'instant
00:00:29où il a été lancé.
00:00:30Les gens ont commencé à l'appeler un tueur de Figma ou la fin des designers, et l'impact a été assez grand
00:00:34pour que l'action de Figma baisse et que sa valorisation en pâtisse.
00:00:38C'est un outil pour créer des prototypes réalistes, des wireframes, des designs, des présentations commerciales et d'autres
00:00:43types de designs différents.
00:00:44Mais la réalité est que c'est plus du battage médiatique qu'autre chose.
00:00:47C'est littéralement Claude Code reconditionné en un autre outil et vendu comme tel, car Claude Code peut
00:00:52faire la même chose, et peut-être même plus.
00:00:54Il y a des fonctionnalités comme l'édition et les commentaires dans Claude Design, mais rien ici n'est quelque chose
00:00:58que Claude Code ne puisse pas faire si vous lui donnez les bons outils.
00:01:01Et quand nous disons que c'est Claude Code reconditionné, ce n'est pas parce que nous ne l'avons pas testé.
00:01:05Nous lui avons donné une consigne simple, lui demandant de créer un site web communautaire, et nous avons répondu aux questions
00:01:09qu'il avait.
00:01:10Il a créé deux designs qui étaient impressionnants par eux-mêmes et bien meilleurs que la façon dont Claude
00:01:14générait les pages d'accueil auparavant, mais ils avaient encore beaucoup de problèmes.
00:01:18Une version était coupée au niveau de la section tarifaire et il n'y avait pas de pied de page du tout, nous avons donc testé
00:01:23comment Claude Code se comporterait avec une consigne similaire.
00:01:25Nous avons utilisé Opus 4.7 avec un effort élevé pour comparer les deux, et le design produit était
00:01:30à la hauteur des capacités de Claude Design.
00:01:32Il y avait quelques problèmes, comme la couleur de la police du bouton d'inscription qui n'était pas bien choisie,
00:01:37mais dans l'ensemble, c'était un design vraiment bien construit.
00:01:39Et ce, malgré l'absence du harnais de design et sans aucune consigne spéciale que
00:01:43Claude Design possède, purement par lui-même, sans que nous ne lui fournissions presque rien.
00:01:48Mais les démos que vous avez dû voir ici et là semblent impressionnantes, et il y a quelque chose de caché derrière
00:01:52elles.
00:01:53Ce qui circule sur les réseaux sociaux est basé sur le battage médiatique plutôt que sur ce que l'outil fait
00:01:57réellement par lui-même.
00:01:58Les gens génèrent des designs en suivant des flux de travail complexes et les présentent comme si Claude
00:02:03Design avait tout construit en une seule fois.
00:02:05Mais ces mêmes flux de travail peuvent être exécutés directement dans Claude Code sans avoir besoin de Claude Design
00:02:09du tout.
00:02:10Donc, même si ce produit est conçu pour les designers, ils devraient simplement utiliser Claude Code au lieu de
00:02:14Claude Design, car de cette façon, ils pourront essayer différentes variantes, expérimenter
00:02:19davantage et obtenir les mêmes résultats, voire de meilleurs, que Claude Design.
00:02:22Ils peuvent itérer plus de fois avec Claude Code au lieu d'être interrompus, juste au moment où
00:02:26le design commence à prendre forme.
00:02:28Construire sur ce que le site est déjà au lieu de recommencer à zéro à chaque fois leur donne
00:02:32un meilleur contrôle sur la direction de chaque design.
00:02:35Et parce que tout ce que produit Claude Code est du code réel, ce qu'ils obtiennent n'est pas
00:02:39un prototype jetable, mais quelque chose qui peut être expédié directement dans le produit sans
00:02:43avoir à être reconstruit par quelqu'un d'autre par la suite.
00:02:45Et en plus de tout cela, il y a un problème de coût avec Claude Design.
00:02:48Claude Code peut faire les mêmes choses à un coût bien inférieur, alors que Claude Design est construit séparément
00:02:53et comptabilisé selon des limites hebdomadaires, et cela ne compte pas dans vos autres limites,
00:02:57mais il consomme l'utilisation à un rythme beaucoup plus rapide que ce à quoi vous vous attendriez normalement avec des modèles
00:03:02via d'autres applications Claude.
00:03:03Cela frappe le plus durement les designers, car le quota est si bas qu'ils ne peuvent pas vraiment expérimenter
00:03:08comme ils le devraient et leur limite est atteinte après seulement quelques itérations de design.
00:03:12Et c'est exactement ce dont beaucoup de gens se plaignent.
00:03:15Lorsqu'une personne travaillait avec, elle a atteint sa limite de design rapidement après environ
00:03:1920 itérations de design, même en étant sur le forfait maximum le plus élevé.
00:03:23Et beaucoup d'autres disent qu'ils atteignent la limite en seulement une heure et finissent quand même avec un design simple
00:03:27facilement implémentable avec Claude Code en une seule fois.
00:03:31Donc ce n'est pas vraiment utilisable en pratique puisqu'ils atteignent les limites avant de pouvoir
00:03:35même terminer le flux de travail sur lequel ils travaillent, ce qui le rend bien pire que les limites de Claude Code.
00:03:39limites.
00:03:40La raison pour laquelle le travail de Claude Design semble si impressionnant est en fait le lancement du modèle Opus 4.7, pas l'outil
00:03:45lui-même.
00:03:46Opus 4.7 est encore une fois le modèle de pointe avec des capacités étonnantes et il est plus performant
00:03:50sur tous les benchmarks.
00:03:52Mais l'amélioration qui compte vraiment ici est la vision.
00:03:54Ce modèle a une vision nettement meilleure et peut voir les images à une résolution beaucoup plus grande
00:03:59qu'il ne pouvait le faire auparavant.
00:04:00Claude Opus 4.6 était capable d'analyser des images à une résolution de 1,15 mégapixel alors que le
00:04:074.7 est capable d'en analyser 3,75 mégapixels.
00:04:10Cela implique donc qu'il est capable de bien mieux comprendre le design à partir d'une référence.
00:04:14Si vous lui donnez un design de référence, il traite cette référence avec beaucoup plus de clarté et
00:04:18détecte des choses qu'il aurait manquées auparavant.
00:04:20Avec cette mise à jour du modèle, Anthropic a comblé la seule lacune où les modèles Claude faisaient défaut et
00:04:25nécessitaient un travail extensif, qui était le design front-end.
00:04:27Ce modèle est plus élégant et créatif lorsqu'il termine une tâche, et par lui-même, il produit
00:04:31des interfaces et des designs de plus haute qualité.
00:04:34Donc, quand Claude Design est sorti, il a été présenté avec beaucoup de battage médiatique à cause de ses designs insensés,
00:04:38mais en réalité, c'était le modèle qui s'est amélioré.
00:04:41Ce n'est pas l'outil qui est devenu si incroyablement bon qu'il a abouti aux différents visuels que
00:04:45vous voyez.
00:04:46Claude Design était une autre façon intelligente de vendre quelque chose et de créer du battage médiatique autour par Anthropic.
00:04:50Maintenant, vous pouvez obtenir les mêmes avantages que dans Claude Design avec Claude Code 2, ou peut-être
00:04:55mieux.
00:04:56Vous pouvez reproduire le flux de questions de Claude Design dans Claude Code en créant une compétence simple.
00:05:00Lorsque vous créez un projet dans Claude Design, vous donnez une consigne et il pose beaucoup de questions
00:05:04afin de pouvoir correctement déterminer la direction du design.
00:05:07Il en demande bien plus que le mode de planification de Claude Code, mais une compétence peut faire exactement la même chose.
00:05:11La compétence contient des instructions sur la façon d'exécuter une session de questions tout comme Claude Design
00:05:16en utilisant des questions pour combler les lacunes créées par la consigne et en posant des questions sur ce qui doit être construit.
00:05:21Elle définit quand déclencher des questions de suivi et comment le flux doit réellement fonctionner.
00:05:25Elle inclut également des exemples de questions pour exécuter la session, une bibliothèque de questions et même
00:05:30des mises en page ASCII de sites afin de pouvoir déterminer le positionnement des éléments dans la page
00:05:34d'accueil.
00:05:35Lorsque vous lui donnez une consigne, il utilise la compétence et pose des questions liées aux lacunes qu'il identifie
00:05:39tout comme Claude Design.
00:05:41Il pose plusieurs questions dans différents domaines et une fois qu'il a toutes les informations
00:05:45nécessaires à l'implémentation, il commence à construire.
00:05:47La meilleure partie est qu'il génère directement du code, il n'y a donc pas de transfert design vers code.
00:05:51Et avec cette approche, vous pouvez itérer autant que vous le souhaitez sans vous soucier d'atteindre
00:05:55les limites en seulement une heure.
00:05:57La génération d'UI à partir du même type de consigne, ainsi que le flux de questions similaire dans
00:06:01Claude Code, étaient plus ou moins similaires à ce que Claude Design générait.
00:06:05La principale différence est que Claude Design avait un avantage sur certains aspects où il rendait le
00:06:09site web plus immersif en ajoutant de petites animations pour le rendre plus engageant.
00:06:13Mais avant d'aller plus loin, écoutons un mot de notre sponsor.
00:06:16HeyGen. Vous avez probablement essayé de faire une vidéo avec
00:06:18un outil IA.
00:06:1920 minutes plus tard, vous jonglez avec les chronologies, réenregistrez les voix off et combattez une synchronisation labiale qui ressemble
00:06:24à un mauvais doublage.
00:06:25HeyGen évite tout cela.
00:06:26HeyGen est le générateur de vidéo IA qui vient de lancer une toute nouvelle CLI, ce qui signifie qu'une vidéo
00:06:31avec un avatar numérique complet peut être générée avec une seule commande.
00:06:34Pas de chronologie, pas de caméra, pas d'équipe.
00:06:36Enregistrez votre jumeau numérique une fois et HeyGen vous permet de publier de manière cohérente sans refilmer,
00:06:40en transformant des newsletters, des PDF, des PowerPoint en vidéos.
00:06:44Générez des vidéos multi-scènes entièrement éditées à partir d'une seule consigne avec l'agent vidéo, puis traduisez
00:06:48pour un public mondial avec une synchronisation labiale complète.
00:06:51Construisez avec des avatars, des voix, un agent vidéo, la traduction et plus encore sur developers.heygen.com.
00:06:56Les jumeaux numériques nécessitent un consentement vérifié.
00:06:59Votre contenu n'est jamais utilisé pour entraîner des modèles publics et toute la plateforme est conçue pour la sécurité
00:07:03de niveau entreprise.
00:07:04Commencez à expédier des vidéos de qualité studio sans toucher à une caméra.
00:07:07Cliquez sur le lien dans le commentaire épinglé et essayez HeyGen aujourd'hui.
00:07:11La plupart des designs interactifs au défilement que vous avez pu voir sur X quand les gens montraient
00:07:15Claude Design ne sont que des sites utilisant des arrière-plans vidéo, ce qui les rend beaucoup plus
00:07:20premium et donne l'impression qu'ils sont plus impressionnants qu'ils ne le sont réellement.
00:07:24La plupart des démos sont souvent juste des consignes copiées depuis des sites qui fournissent des modèles de consignes
00:07:28prêts à l'emploi.
00:07:29Les consignes incluent un lien vers une vidéo qui est destinée à être utilisée comme arrière-plan avec
00:07:33des directives détaillées sur la façon de l'implémenter.
00:07:36Donc n'importe quel agent est capable d'implémenter ce genre de site web, pas seulement Claude Design tant
00:07:40qu'il reçoit des consignes similaires.
00:07:42Mais ce ne sont que des exemples de consignes pour des sites de démonstration.
00:07:45En réalité, les applications de qualité production sont construites en utilisant des bibliothèques comme Lenis, qui est
00:07:49utilisée dans de nombreuses applications de production, ainsi que GSAP, qui est l'une des bibliothèques les plus populaires
00:07:54pour implémenter des animations fluides qui rendent l'expérience du site web beaucoup plus immersive qu'auparavant.
00:07:59auparavant.
00:08:00Pour tester cela, nous avons réellement téléchargé une vidéo et dans notre consigne, nous avons simplement dit à Claude Code de
00:08:04utiliser la vidéo comme section principale avec les thèmes de couleurs que nous voulions, et il a implémenté
00:08:08le reste du site web par lui-même.
00:08:10Nous n'avons eu à le corriger qu'une seule fois, où nous avons dû expliquer ce que la vidéo racontait.
00:08:14Et il a incorporé le style parfaitement dans la page d'accueil, le rendant bien meilleur que
00:08:18la version précédente.
00:08:19Le site web a été très bien implémenté, ce qui est assez puissant étant donné la simplicité de la consigne
00:08:23et il incluait différentes animations et interactions qui ont rendu cette partie du site
00:08:28beaucoup plus puissante et interactive qu'auparavant avec les capacités de Claude.
00:08:32Maintenant, dans Claude Code, vous pouvez également le compléter avec plus d'outils facilement par rapport à Claude
00:08:36Design, parce que Claude Code est plus techniquement capable et peut implémenter les choses plus de manière transparente.
00:08:42Vous pouvez même utiliser une compétence open source comme "scrollytelling", qui permet essentiellement des animations
00:08:46de narration au défilement dans votre projet.
00:08:48Donc, avec cette compétence, Claude peut facilement implémenter une narration multiniveaux à partir d'une simple consigne
00:08:53et travailler à créer des animations qui vont beaucoup plus en profondeur que ce que Claude Design serait
00:08:57capable de faire par lui-même.
00:08:59Aussi, si vous appréciez notre contenu, envisagez d'appuyer sur le bouton "hype" car cela nous aide à
00:09:03créer plus de contenu comme celui-ci et à atteindre plus de personnes.
00:09:07Utiliser Claude Code au lieu de Claude Design facilite l'implémentation des UI car avec
00:09:11Claude Code, vous pouvez facilement intégrer des systèmes de design intégrés en incorporant des composants
00:09:16de Shadcn, Aceternity ou Hero UI, qui incluent déjà beaucoup d'animations pré-construites.
00:09:22Cela réduit le besoin pour le modèle de comprendre à quoi chaque composant doit ressembler et comment il doit se comporter,
00:09:27et le laisse plutôt se concentrer sur l'amélioration du design global.
00:09:30Donc, le résultat est beaucoup plus facile à atteindre par rapport au travail direct dans Claude Design par défaut.
00:09:35Vous pouvez également utiliser des compétences de design front-end ou d'autres compétences spécialisées adaptées à votre projet
00:09:39construites en utilisant un créateur de compétences qui analyse l'état actuel du projet.
00:09:43Cela l'aide à implémenter les fonctionnalités plus efficacement sans perdre de temps.
00:09:47Claude Code est aussi plus flexible car vous pouvez y connecter des serveurs MCP.
00:09:51Par exemple, vous pouvez utiliser un serveur MCP Shadcn pour que l'agent puisse installer les bons composants
00:09:56par lui-même au lieu qu'on lui dise explicitement quoi utiliser et où.
00:09:59De même, vous pouvez utiliser divers MCP qui aident à construire des UI plus efficacement plutôt que de compter
00:10:04sur un design purement généré.
00:10:06Même avec des modèles comme Opus 4.7 et des outils comme Claude Design, les designs générés directement
00:10:11révèlent souvent qu'ils ont été produits par un modèle car ils ont tendance à suivre des modèles similaires.
00:10:16Mais l'utilisation de bibliothèques établies aide à réduire ce problème et rend le résultat plus naturel
00:10:20et moins prévisible.
00:10:22Le plus grand avantage de l'utilisation de Claude Code au lieu de Claude Design est que vous pouvez le connecter
00:10:26à Git.
00:10:27Maintenant, même si vous pouvez aussi connecter GitHub à Claude Design, il y a une énorme différence
00:10:30dans la façon dont ils fonctionnent tous les deux.
00:10:31L'intégration Git de Claude Design est assez basique.
00:10:34Elle lui permet principalement de récupérer des fichiers depuis un dépôt GitHub connecté et de les utiliser pour
00:10:38comprendre les designs.
00:10:39Mais son but est surtout limité à la lecture et à la référence.
00:10:42Il n'apporte pas vraiment de modifications au dépôt.
00:10:45Claude Code, par contre, est très différent.
00:10:47Il peut effectuer des opérations Git complètes comme des commits, des branches et plus encore.
00:10:51Donc, si quelque chose ne va pas dans votre implémentation ou si vous préférez une version antérieure après avoir fait
00:10:55des changements, vous pouvez facilement revenir à une version précédente en utilisant Git.
00:10:59C'est quelque chose que vous ne pourriez pas faire avec Claude Design pendant que vous l'utilisez, ce qui fait de
00:11:02Claude Code une approche bien plus solide.
00:11:04Pour concevoir différents prototypes au lieu d'aller sur Claude Design ou d'utiliser Figma, il
00:11:09est plus efficace de faire des maquettes directement en HTML.
00:11:12Pour essayer différentes variantes, vous pouvez également utiliser des agents parallèles et des arborescences de travail
00:11:16pour diviser les tâches, similaire à la façon dont Claude Design explore les designs, mais de manière gérée par Git,
00:11:21afin de pouvoir garder la meilleure version et écarter le reste facilement.
00:11:24Vous pouvez simplement lui donner une consigne d'utiliser des sous-agents dans des arborescences de travail séparées et demander à chaque agent de
00:11:29implémenter une variation différente du même design.
00:11:31Avec cela, Claude va engendrer des agents dans des espaces de travail séparés.
00:11:35L'utilisation d'agents parallèles vous aide à économiser à la fois du temps et des efforts tout en explorant plusieurs directions
00:11:39à la fois.
00:11:40Maintenant, une fois que chaque agent a terminé son travail, vous obtenez plusieurs variations que vous pouvez examiner
00:11:44à tout moment et choisir celle qui correspond le mieux à vos besoins.
00:11:47À partir de là, vous pouvez apporter des modifications et continuer à construire l'application basée sur le style exact que
00:11:51vous préférez le plus.
00:11:52Et malgré le fait qu'ils ne soient pas générés par Claude Design, chacun des designs générés a toujours un
00:11:57look esthétique avec des SVG appropriés créés entièrement par du code pour représenter les éléments et un bien
00:12:02meilleur équilibre global.
00:12:04Vous pouvez ensuite fusionner votre version préférée dans la branche principale et supprimer les arborescences de travail qui contiennent
00:12:08les designs que vous n'avez pas aimés.
00:12:09Les compétences utilisées ici, ainsi que d'autres ressources, sont disponibles dans AI Labs Pro pour cette vidéo
00:12:15et pour toutes nos vidéos précédentes, d'où vous pouvez les télécharger et les utiliser pour vos propres projets.
00:12:19Si vous avez trouvé de la valeur dans ce que nous faisons et souhaitez soutenir la chaîne, c'est la meilleure façon
00:12:23de le faire.
00:12:24Le lien est dans la description.
00:12:25Ceci nous amène à la fin de cette vidéo.
00:12:26Si vous souhaitez soutenir la chaîne et nous aider à continuer à faire des vidéos comme celle-ci, vous pouvez le
00:12:30faire en utilisant le bouton "super merci" ci-dessous.
00:12:33Comme toujours, merci de nous avoir regardés et je vous verrai dans la prochaine.