Ce repo open source vient de cloner le design de Claude (et c'est RÉUSSI)
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Claude Design est sans doute le meilleur outil que j'aie jamais utilisé.
00:00:02C'est en fait complètement inutilisable.
00:00:05Même si je paie 200 dollars par mois à Anthropic pour leur plan 20X.
00:00:10J'atteins les limites d'utilisation hebdomadaires de Claude Design en moins d'une heure.
00:00:14C'est plus que frustrant, mais heureusement pour vous et moi,
00:00:17il y a de l'espoir car un tout nouveau dépôt open source vient d'être
00:00:22publié,
00:00:23qui clone essentiellement Claude Design et le transforme en une compétence que nous pouvons utiliser.
00:00:28Il s'appelle Huashu Design et il est basé sur les mêmes invites système
00:00:32que Claude Design utilise.
00:00:33Et aujourd'hui, nous allons le mettre à l'épreuve face à Claude Design pour
00:00:37voir si ce truc vaut vraiment notre temps. Car si c'est le cas,
00:00:41nous pourrions bien avoir un moyen de sortir de la prison d'utilisation de Claude Design.
00:00:45Huashu Design résout le problème du fait que Claude Design est un outil incroyable,
00:00:50mais que vous ne pouvez vraiment pas utiliser pendant plus d'une heure avant d'atteindre les limites
00:00:54d'utilisation.
00:00:55Ce qu'ils ont fait, c'est qu'ils ont pris toutes les invites système et les philosophies de conception de
00:00:58Claude Design et les ont transformées en un dépôt GitHub open source,
00:01:02qui est essentiellement juste une compétence que nous pouvons charger dans Claude Code ou Codex ou
00:01:07vraiment n'importe quel agent de codage, tout comme Claude Design.
00:01:10Il est capable de créer des prototypes interactifs pour des applications web ou mobiles.
00:01:13Nous pouvons faire des diaporamas, du motion design, des infographies, et ainsi de suite.
00:01:17Et il est capable de faire tout cela avec une seule compétence car il y a vraiment
00:01:21beaucoup de choses sous le capot. Par exemple,
00:01:24il a accès à 20 fichiers Markdown approfondis qui expliquent quoi faire pour les diaporamas,
00:01:28les différents styles de design, les meilleures pratiques d'animation.
00:01:31Donc, bien qu'il s'agisse d'une seule compétence en surface,
00:01:33il a accès à pratiquement 20 mini-compétences.
00:01:35Il a également accès à un certain nombre de composants, de médias et d'actifs qu'il peut utiliser
00:01:40lorsqu'il conçoit des choses pour vous.
00:01:42Et il possède toute une chaîne d'outils exécutable.
00:01:44Cela lui donne la capacité de prendre un fichier HTML et de le transformer en MP4 ou
00:01:50d'utiliser Playwright pour vérifier que ce qu'il a conçu pour vous sur
00:01:53papier fonctionne réellement dans la vraie vie. Et tout comme Claude Design,
00:01:56nous sommes en mesure de voir différentes variantes. Nous avons le système de réglage complet.
00:02:00Et le meilleur, c'est que puisqu'il s'agit d'une compétence, si je suis dans Claude Code,
00:02:05c'est basé sur cette utilisation, que je sois en 5X ou 20X,
00:02:08je ne suis pas contraint par cette limite d'utilisation arbitraire de Claude
00:02:13Design. Mais testons-le vraiment.
00:02:16Donc, ce que nous allons faire, c'est voir à quel point ce truc fonctionne réellement
00:02:18en termes de conception d'une page de destination à partir de zéro.
00:02:22Ensuite, nous regarderons comment il fait à peu près la même chose,
00:02:24mais si nous lui donnons des actifs sur lesquels s'appuyer, similaires au système de design de Claude Design,
00:02:29et enfin, nous verrons comment il s'en sort avec les diaporamas et, en cours de route,
00:02:33nous le comparerons à Claude Design.
00:02:36Nous pourrons ainsi voir si cela en vaut vraiment la peine. Mais avant cela,
00:02:39un mot rapide de la part du sponsor préféré de tout le monde : moi. Le mois dernier,
00:02:43j'ai lancé la masterclass Claude Code et c'est le meilleur moyen de passer
00:02:46de zéro à développeur IA, surtout si vous n'avez pas de bagage technique.
00:02:51Je mets ce cours à jour chaque semaine.
00:02:53Et je viens de sortir les modules d'OS agentique pour Claude Code.
00:02:56Donc, si vous êtes quelqu'un qui veut apprendre à exploiter au mieux cet outil,
00:03:01alors vous devez le consulter. Vous pouvez y accéder dans Chase AI.
00:03:04De plus, il y aura un lien pour cela dans le commentaire épinglé. Alors commençons.
00:03:08L'invite que je donne à Claude Code,
00:03:09et qui utilisera cette compétence Huashu Design, est d'utiliser la
00:03:13compétence de design pour créer une page de destination pour mon produit SaaS fictif Lighthouse,
00:03:17en posant toutes les questions nécessaires avant de commencer. Maintenant,
00:03:21j'ai également donné cette même invite exacte à Claude Design.
00:03:24Huashu revient donc avec six questions demandant ce que fait Lighthouse, la cible,
00:03:29l'ambiance, les sections nécessaires, les variantes. Et vous savez,
00:03:34est-ce qu'il doit juste créer du contenu fictif ou est-ce que j'ai déjà le texte ?
00:03:37Claude Design a posé des questions similaires,
00:03:40bien qu'il soit allé un peu plus loin et, évidemment, en raison de sa nature graphique,
00:03:44il m'a donné des options à choisir en termes de direction visuelle
00:03:48que je pouvais réellement voir. Donc pour Huashu, je lui dis :
00:03:50faisons quelque chose axé sur l'analytique. Nous visons le développeur solo.
00:03:54J'ai dit que je voulais voir plusieurs types d'ambiances et de styles,
00:03:57et de cette façon, je pourrai comparer les variantes.
00:03:59Et je veux aussi qu'il gère le texte tout seul. Et pour Claude Design,
00:04:02j'ai pratiquement dit la même chose et que je voulais aussi trois variantes que
00:04:05je pourrais regarder côte à côte.
00:04:06Voici donc ce que Claude Design a trouvé par rapport à ce que Huashu a trouvé.
00:04:11Et je vais éteindre ma caméra pour que nous puissions mieux voir ça.
00:04:16Jetons un œil à ce que Huashu a mis sur une seule page.
00:04:19Nous aurions pu lui faire faire trois pages séparées,
00:04:22mais cela nous permet de tout voir d'un coup. Enfin, je retire ce que j'ai dit.
00:04:25Nous avons ici en haut à droite la possibilité de parcourir les trois.
00:04:29C'est donc ce que nous avons obtenu avec cette compétence.
00:04:31Ce modèle Ledger a l'air vraiment cool. Vous savez,
00:04:35il nous donne toute la page web. Nous avons les variantes de terminal,
00:04:40le même genre de chose ainsi que la version papier.
00:04:44Et puis je peux voir les trois en même temps. Honnêtement, au premier abord, c'est plutôt bien.
00:04:49C'est bien mieux que si nous utilisions simplement Claude Code tout seul.
00:04:52Même avec la compétence de design front-end, c'était super, vous savez,
00:04:55trois variantes, plutôt solide. Et maintenant regardons Claude Design.
00:04:59Design nous a donné les réglages dès le début. Nous ne regarderons pas ça maintenant,
00:05:03mais voici sa version terminal, vous savez,
00:05:07il passe en revue tout le contenu éditorial,
00:05:11assez similaire à celui sur le côté.
00:05:15Très, très similaire spatialement.
00:05:19C'est très hideux. Cela donne vraiment cette impression,
00:05:24euh, vous savez, de votre ambiance IA typique. Je pense que cela a beaucoup à voir avec le dégradé.
00:05:28Et ensuite je peux comparer les trois. Maintenant,
00:05:32ce que je veux que vous fassiez en ce moment, ce n'est pas de penser que l'un
00:05:34a l'air forcément meilleur que l'autre dans le vide, mais de vraiment voir à quel point
00:05:37cette compétence que nous regardons ici est proche de Design. Très,
00:05:42très similaire, ce qui est un énorme pouce levé pour la compétence de Huashu.
00:05:46Ce que j'aime faire après avoir vu ces macro-variantes, c'est de me concentrer sur une
00:05:51particulière que j'aime, puis de commencer à faire des réglages pour celle-ci.
00:05:54Pour rester un peu similaire et pouvoir comparer et contraster,
00:05:59je vais choisir la version éditoriale sur Design,
00:06:03qui est connue sous le nom de Ledger ici dans la compétence.
00:06:06Et nous verrons à quel point ils font bien les réglages. Pour Claude Design,
00:06:09les réglages sont déjà là. Donc pour l'éditorial,
00:06:11nous pouvons basculer entre clair et sombre. Je peux changer l'accent.
00:06:15Il me donne pratiquement toutes les couleurs auxquelles je peux penser, ce qui est plutôt cool.
00:06:18Je peux changer le titre actuel,
00:06:21mais ensuite il le divise entre spatial et global.
00:06:25Donc ce que je vais faire, c'est lui dire d'étendre les réglages et de les avoir
00:06:29juste pour l'éditorial. Et pendant que ça se produit,
00:06:31j'ai sauté dans Claude Code et j'ai dit :
00:06:33choisissons la variante Ledger et donnons-lui une quantité agressive de réglages.
00:06:36Ainsi nous pourrons comparer sur ce plan.
00:06:38Claude Design a donc ajouté un tas de réglages pour nous. Et il est à noter,
00:06:42à ce stade, juste d'après ce que vous avez vu dans cette vidéo,
00:06:44j'ai déjà consommé environ 15 % de mon utilisation de Claude Design. Eh bien,
00:06:49du côté de la compétence,
00:06:49nous n'avons utilisé que 13 % de la fenêtre contextuelle d'une seule session.
00:06:54Donc 130 000 jetons, c'est-à-dire pas même 1 % de mon utilisation hebdomadaire,
00:06:59certes je suis en 20X, mais la différence est stupéfiante. Bien que nous devrions noter,
00:07:03cela travaille toujours sur les réglages pour cette chose.
00:07:05C'est donc un peu plus lent et les réglages de Claude Design fonctionnent comme prévu.
00:07:10Les réglages, franchement,
00:07:12sont l'une de mes parties préférées de Claude Design en général.
00:07:16Je pense que la puissance de Claude Design n'est pas nécessairement, oh,
00:07:20les designs sont incroyables. Et je pense qu'ils sont un cran au-dessus.
00:07:22Ne me faites pas dire ce que je n'ai pas dit,
00:07:24mais c'est le fait que je peux si rapidement passer en revue un tas de choses différentes,
00:07:28voir à quoi ça ressemble et juste itérer, itérer, itérer très rapidement.
00:07:31Et une chose que nous voulons noter ici, en raison de la nature de Claude Design,
00:07:36la capacité de cliquer sur des choses spécifiques comme ça et de jouer avec
00:07:36la typographie ou de laisser des commentaires spécifiques.
00:07:40Ce n'est pas vraiment quelque chose que nous pouvons faire à l'intérieur de la compétence de design.
00:07:43Je ne peux certainement pas dessiner sur la compétence de design et dire : Hé, regarde ça.
00:07:47Allez, vous savez, jouons avec ça, déplacez ça un peu vers la gauche,
00:07:51déplacez ça un peu vers la droite. Ce genre de choses.
00:07:54Vous avez besoin d'une interface graphique pour ça,
00:07:57ce qui est là où Claude Design va évidemment prendre de l'avance.
00:07:58Comparons cela aux réglages que nous obtenons avec Huashu Design.
00:08:01Il est à noter,
00:08:05les réglages correspondent au même type de style que la page elle-même.
00:08:07Je peux changer les préréglages.
00:08:10Je peux changer le type de famille d'affichage, un peu différent du mode sombre.
00:08:13Je peux changer les accents et il semble que je puisse changer un certain nombre de choses comme
00:08:18la densité de mise en page. Avons-nous la bande de confiance ?
00:08:22Est-ce que la bande de confiance disparaît ? Oui. Ce genre de chose. Donc c'est comparable.
00:08:26Y a-t-il autant de réglages ici qu'il y en avait dans Claude Design ? Non,
00:08:30mais je suis simplement à une invite de distance d'en obtenir plus.
00:08:32Et je pense que le grand point à retenir ici, c'est Claude Code avec cette compétence de design.
00:08:34Il rivalise certainement avec ce que vous pouvez obtenir à l'intérieur de Claude Design nativement et
00:08:38l'utilisation totale des jetons à ce stade est de 170 000, je n'ai pratiquement pas utilisé
00:08:42mon utilisation hebdomadaire et j'ai brûlé 15 % de Claude Design. Donc, pour cet exemple,
00:08:47qui est une invite brute, sans système de design, sans actifs,
00:08:51voir ce qu'il peut proposer. Je pense que la compétence a très bien fonctionné.
00:08:56Passons donc à la démo suivante pour voir comment il peut s'en sortir.
00:08:59Si nous lui donnons réellement quelque chose sur lequel s'appuyer, un système de design,
00:09:02des exemples de design, et mettons la compétence à l'épreuve,
00:09:06car je sais déjà que Claude Design peut très bien faire ça.
00:09:10Quand nous regardons Claude Design et ses systèmes de design,
00:09:13il fait un assez bon travail pour être capable de prendre tout ce que nous lui donnons.
00:09:16Et cela peut être comme une base de code ou quelque chose d'autre et extraire une tonne de
00:09:19informations, tout, de l'espacement aux composants, jauges, boutons, héros,
00:09:23tout ça. Donc, quand je charge ce système de design dans Claude Design,
00:09:27je sais qu'il sera capable de maintenir cela à travers différents types de
00:09:31livrables. Par exemple,
00:09:34ce design d'OS agentique est quelque chose que j'ai transformé en système de design.
00:09:36Et bien que nous le voyions comme un tableau de bord ici à l'intérieur de Claude Design,
00:09:39il est très facile de répliquer ce thème de design.
00:09:42Donc vous voyez ça à l'intérieur d'un diaporama, par exemple,
00:09:45on dirait que tout vient du même endroit et c'est grâce au système de design de Claude
00:09:47Design qui est assez puissant. L'inconvénient est que créer ce genre de
00:09:50système de design consomme environ 30 % de votre utilisation hebdomadaire.
00:09:55Ce que je viens de dire à Claude Design, c'était de recréer cette page de destination Lighthouse
00:10:00en utilisant ce tableau de bord d'OS agentique.
00:10:00J'ai ensuite dit à Claude Code pratiquement la même chose en disant :
00:10:04Je veux utiliser l'esthétique et le système de design qui correspondent à ce tableau de bord.
00:10:07Et puis je lui ai dit où il peut trouver toutes ces informations à l'intérieur d'un répertoire séparé
00:10:11ou une référence. C'est pratiquement ce qu'il utilise comme
00:10:14inspiration, comme esthétique.
00:10:18Donc évidemment le sprite ici devient fou,
00:10:22mais le reste a pas mal de sens. Hum,
00:10:25il a continué et a recréé un tableau de bord ici aussi,
00:10:28qui est très similaire à celui-ci. Je pense que ça a l'air plutôt sympa.
00:10:33Euh, pour les polices, les couleurs,
00:10:37tout ça est très conforme à ce qu'il devrait faire.
00:10:41La seule vraie plainte que j'ai, c'est le petit personnage ici.
00:10:44Je ne sais pas ce qui se passe,
00:10:47mais c'est probablement une correction relativement simple.
00:10:52Maintenant, voyons comment la compétence Huashu a fait pour référence.
00:10:54La compétence a pris 11 minutes et environ 70 000 jetons. Claude Design
00:10:56a pris environ trois minutes, mais cela a consommé 10 % de son utilisation hebdomadaire.
00:10:59Et voici ce que nous avons obtenu. Je vais éteindre ma caméra pour que nous puissions mieux voir.
00:11:04Nous avons eu un petit Claude,
00:11:08un petit logo icône ici. Il est à noter,
00:11:10ce logo est un petit peu différent du sprite ici,
00:11:15mais hé, ça va. Les couleurs et les polices semblent avoir du sens au premier coup d'œil.
00:11:18Et nous avons notre petit sprite en haut ici aussi à côté de Lighthouse.
00:11:22Euh, ça a l'air plutôt cool. C'est comme un petit téléscripteur.
00:11:26Tout cela a l'air assez familier du tableau de bord en termes de design général. Cela semble
00:11:30Euh, ça a l'air plutôt cool. C'est comme un petit téléscripteur.
00:11:35Tout ça semble assez familier par rapport au tableau de bord en termes de
00:11:40design général. Ça semble un peu étrange ici.
00:11:43J'aimerais que cette section terminal soit simplement remontée pour être centrée avec ce
00:11:47que nous avons sur la gauche, mais c'est une correction facile. Et dans l'ensemble,
00:11:51plutôt bon. Je dirais que j'ai un peu mieux aimé les designs de Claude,
00:11:56surtout le fait qu'il ait créé son propre tableau de bord et qu'il l'ait intégré.
00:12:00Mais hé, il a fait le design, non ? Il a rempli les critères.
00:12:04Il a la même police, les mêmes couleurs.
00:12:06On sent vraiment qu'il appartient à la même famille de design. Donc pour ce test,
00:12:11je pense que c'est une autre énorme victoire pour cette compétence, un grand pouce levé. Ouais.
00:12:14Est-ce que ça a pris un peu plus de temps ? Sûrement.
00:12:15Mais il créait essentiellement le système de design par lui-même.
00:12:18Il n'en avait pas de préchargé. Est-ce aussi bon que le design ? Hmm. Peut-être pas,
00:12:22mais c'est assez proche et infiniment moins cher. Donc très, très,
00:12:27très impressionné. Maintenant pour notre dernier test, nous allons regarder les présentations.
00:12:29J'ai déjà demandé à Claude design de le faire.
00:12:31Et vous jetez un œil à sa première version en ce moment.
00:12:33Il utilise le même système de design et il parle de notre faux produit SaaS.
00:12:37Donc en termes de capacité à rester cohérent avec le design,
00:12:41évidemment il a fait un assez bon travail et tout cela semble assez
00:12:46bon. Seul reproche, le petit sprite ici en haut est un peu étiré.
00:12:50Mais encore une fois, ce n'est pas difficile à corriger.
00:12:52Ce qui m'inquiète vraiment ici, c'est est-ce que ça a l'air cool ? Ça c'est plutôt cool.
00:12:56Ça ne correspond pas au système de design quand il s'agit de Claude design. Oui,
00:13:00il a été capable de faire ça en seulement quelques minutes en termes d'utilisation, 6%.
00:13:04Maintenant voyons comment Claude code s'en sort en utilisant cette compétence.
00:13:07Et voici ce que nous avons. Donc dès le début, très similaire au site web.
00:13:11Il a juste été capable de créer, il a mis le même truc de sprite en haut,
00:13:15en haut de page.
00:13:16Et nous avons notre petit logo Claude code ici sur la droite.
00:13:20Donc ça, c'est la page de garde. Numéro deux,
00:13:23on dirait qu'une partie du texte se chevauche ici, mais ce n'est pas un énorme problème.
00:13:27La page trois semble bien. Slide quatre. C'est un peu coupé,
00:13:32mais ça pourrait totalement être un choix de design.
00:13:34Il y a du texte défilant, ça semble bien. Et sur la dernière diapositive,
00:13:38nous avons encore un peu de chevauchement ici,
00:13:40mais ce sont de petits problèmes que nous pourrions facilement corriger avec une seule instruction.
00:13:44Donc dans l'ensemble, quand nous comparons ces deux designs avec ce que nous avons obtenu avec la compétence,
00:13:49très similaire encore,
00:13:50c'est vraiment trois choses d'affilée que nous avons testées où la compétence est capable de
00:13:54rivaliser avec ce que nous obtenons dans le design.
00:13:56Et je pense que c'est le grand enseignement de cette vidéo.
00:13:58Nous avons maintenant une option pour obtenir des résultats de Claude design sans être asservis
00:14:03à ces limites d'utilisation folles, ce qui est génial pour l'utilisateur moyen.
00:14:07Maintenant, dans l'absolu, est-ce que je pense toujours que Claude design est meilleur ? Oui, bien sûr.
00:14:12La compétence ne fait que copier tout ce que Claude design fait.
00:14:15Et Claude design a l'avantage de certaines choses comme dessiner, modifier, commenter,
00:14:19pouvoir faire en sorte que toute une équipe utilise cet outil.
00:14:21Donc, par nature de son interface graphique,
00:14:24il peut faire des choses que la compétence ne sera jamais capable de faire. Mais pour beaucoup de gens,
00:14:29ce que vous venez de voir ici est plus que suffisant. Et c'est un énorme bond en avant par rapport,
00:14:34vous savez, à l'utilisation de la compétence de design front-end, par exemple. Et n'oubliez pas,
00:14:37la compétence peut faire plus que de simples pages web et des présentations.
00:14:40Elle peut faire des choses comme le motion design, des infographies, toutes sortes de choses.
00:14:43Donc vérifiez vraiment cette chose. Vous n'avez vraiment rien à perdre.
00:14:46Donc c'est là que je vais vous laisser pour aujourd'hui. J'espère qu'avec cette vidéo,
00:14:50j'ai pu ajouter un outil de plus à votre boîte à outils en constante expansion. Comme toujours,
00:14:54faites-moi savoir ce que vous en pensez.
00:14:55Assurez-vous de consulter Chase AI plus si vous voulez mettre la main sur la
00:14:58masterclass Claude et je vous verrai bientôt.