00:00:00il y a un monstre à l'intérieur de Claude Code et il s'appelle l'IA Slop.
00:00:03Des dégradés violets, la police Inter pour tout et la même disposition de cartes
00:00:09sur chaque site web. Vous savez de quel genre d'IA Slop je parle,
00:00:12mais aujourd'hui, je vais vous donner 10 outils différents pour vous aider à terrasser cette bête
00:00:16et non, aucun d'entre eux n'est une compétence de design front-end. En fait,
00:00:20beaucoup de ces outils sont relativement nouveaux.
00:00:22Donc, même si vous êtes dans l'espace de conception Claude Code depuis un certain temps,
00:00:26je vous promets que vous allez apprendre quelque chose aujourd'hui.
00:00:28Tous ces outils que nous allons passer en revue aujourd'hui servent essentiellement le même but,
00:00:31celui de vous donner une chance de créer un design web front-end de haute qualité
00:00:35avec Claude Code car, aussi bon que soit Claude Code,
00:00:39c'est un domaine où il est extrêmement déficient.
00:00:42Et le premier outil sur la liste est Impeccable.
00:00:44C'est une compétence unique qui comprend 18 commandes.
00:00:46Et je mettrai le lien dans la description ainsi que pour tous les autres outils
00:00:50que nous couvrirons aujourd'hui.
00:00:51J'aime vraiment Impeccable parce que ce qu'il est capable de faire est extrêmement varié.
00:00:55C'est une seule compétence, mais elle contient 18 commandes.
00:00:58Et si nous suivons le lien GitHub vers impeccable.style,
00:01:01nous pouvons voir toutes leurs commandes en action. Et mieux encore,
00:01:05nous pouvons voir la sortie générique de l'IA, du genre police Inter, dégradés violets,
00:01:09et l'image d'après en utilisant les différentes commandes. Par exemple,
00:01:15nous avons quelque chose comme « clarify »,
00:01:16qui concerne les erreurs d'UX et les messages d'erreur.
00:01:19Et vous pouvez voir la différence entre les deux ici.
00:01:21Il possède également une extension Chrome,
00:01:23qui mettra en évidence l'esthétique IA Slop directement sur votre page web,
00:01:28comme dans cet exemple. Et j'aime beaucoup la façon dont cette compétence utilise des anti-modèles.
00:01:32Elle enseigne essentiellement aux grands modèles de langage
00:01:34à quoi ressemble réellement l'IA Slop : ces accents de bordure,
00:01:38ces bordures d'onglets latéraux que l'on voit partout, vous savez,
00:01:42les graphiques sparkline, le glassmorphisme, n'est-ce pas ?
00:01:45On voit ces choses encore et encore et encore.
00:01:47Alors pourquoi ne pas utiliser une compétence qui dit aux LLM : « Ceci est de l'IA Slop » ?
00:01:52Au lieu d'utiliser une compétence de design front-end qui dirait :
00:01:54« S'il vous plaît, ne faites pas d'IA Slop », car ça ne marche pas. Et comme vous pouvez l'imaginer,
00:01:58cette compétence est assez dense, comme nous le voyons ici. Et je continue de faire défiler.
00:02:03C'est parce qu'elle contient plusieurs références pour chaque domaine
00:02:07de design spécifique.
00:02:08On peut presque les considérer comme des sous-compétences avec les 18 commandes mentionnées.
00:02:13Maintenant,
00:02:14le moyen le plus simple de voir toutes ces commandes en action est d'aller sur la doc d'Impeccable.
00:02:17Et tout comme sur la page d'accueil,
00:02:21vous pouvez voir les exemples avant/après.
00:02:25Voir visuellement ce que tout cela peut faire est bien mieux que de juste
00:02:29lire la description en espérant que Claude Code fasse ce que vous attendez.
00:02:33Et ce n'est pas seulement une question purement visuelle.
00:02:35Quand on regarde des compétences comme « adapt »,
00:02:37cela garantit que ça fonctionne sur différentes plateformes comme le mobile ou la tablette
00:02:41plutôt que seulement sur ordinateur. Je vous suggère fortement d'y jeter un œil.
00:02:45C'est sorti il y a seulement un mois. Maintenant, avant de passer à l'outil numéro deux,
00:02:48une petite parenthèse pour ma masterclass Claude Code, que j'ai sortie le mois dernier.
00:02:52Et j'ai déjà publié une tonne de mises à jour.
00:02:54C'est l'endroit numéro un pour passer de zéro à développeur IA.
00:02:57Et le prix va augmenter dans quelques jours seulement.
00:03:01Donc si vous voulez mettre la main dessus, n'oubliez pas d'aller voir.
00:03:04Il y a un lien dans le commentaire épinglé. Parlons maintenant de l'outil numéro deux,
00:03:06qui est Skill UI. C'est un outil que j'ai découvert ce matin même.
00:03:12Il n'est pas en ligne depuis 24 heures. Il a sept étoiles.
00:03:15Nous sommes aux prémices. Je ne l'ai pas créé. Je ne connais pas ce gars.
00:03:18Je l'ai juste vu poster à ce sujet sur Twitter.
00:03:21Je faisais défiler machinalement et je me suis dit : « Ça a l'air d'être une super compétence ».
00:03:24Elle nous permet de rétro-concevoir n'importe quel système de design en compétence prête pour Claude.
00:03:29Qu'est-ce que ça veut dire ? Ça veut dire qu'on prend cette compétence,
00:03:31on la pointe vers un site web qui existe déjà,
00:03:34et elle analyse essentiellement comment ce site a été construit pour en faire
00:03:39un modèle, une compétence. Laissez-moi vous montrer ça en action. Ici,
00:03:45nous avons le site de Stripe, un site très cool avec beaucoup de choses.
00:03:49Évidemment, il contient beaucoup de graphismes personnalisés et ce genre de choses.
00:03:52Il est impossible pour Claude Code de le recréer sans ces visuels.
00:03:56Pas encore. Mais disons que j'aime le design général,
00:04:00juste la façon dont les cartes et les mises en page sont organisées.
00:04:03Et je voulais utiliser cela comme base pour mon propre site. Eh bien,
00:04:06nous avons parlé dans des vidéos précédentes des façons de faire.
00:04:08Comme regarder le HTML, etc., mais vous savez,
00:04:11on finit avec une solution à 60 ou 70 %. J'ai donc pris Skill UI.
00:04:15Je l'ai pointé vers Stripe et j'ai dit : « Hé,
00:04:17fais-moi un faux site Stripe dans ce style ».
00:04:21Et voici ce qu'il a proposé en une seule tentative. C'est tout ce que je lui ai dit.
00:04:25Je n'ai pas donné plus d'informations et il a créé ceci.
00:04:27Il y a vraiment une ambiance Stripe. Encore une fois,
00:04:32ce sont des graphismes personnalisés sur Stripe.
00:04:34Il ne pourra pas les recréer juste avec un prompt, mais vous savez,
00:04:39c'est plutôt pas mal. En fait, si vous me demandez, vous voyez,
00:04:44il y a encore quelques éléments classiques de l'IA.
00:04:47La façon dont les choses sont disposées et les icônes,
00:04:50mais il n'a pas juste fait une grille bento 2x2 avec des cartes.
00:04:55J'aime bien les couleurs et le graphisme, mais là,
00:04:59honnêtement, c'est vraiment bien pour m'être contenté de dire : « Regarde le site
00:05:03de Stripe et construis-moi une base ». Et comme il en a fait une compétence,
00:05:06j'ai maintenant une compétence de design Stripe, qui est juste au niveau du projet,
00:05:10mais je pourrais la ressortir à tout moment.
00:05:12Disons que je veuille faire un autre site qui utilise aussi le style Stripe.
00:05:16Je peux le faire, mais je peux pointer Skill UI sur n'importe quoi.
00:05:18Vous pouvez le voir en action dans la vidéo d'exemple sur son GitHub,
00:05:22où il a pointé cet outil vers Notion.
00:05:24Ensuite, il a dit à Claude Code : « Fais-moi essentiellement un clone de Notion ».
00:05:27Et c'est ce que vous voyez juste là. Pour utiliser cette compétence,
00:05:30il suffit de suivre les commandes d'installation sur la page GitHub.
00:05:33Il y a deux modes différents. Si vous voulez quelque chose qui,
00:05:38en gros, prend tout, comme les captures d'écran de défilement et les interactions,
00:05:41quand la souris passe sur les éléments, il utilise Playwright
00:05:45pour comprendre tout ça. Il ne regarde pas seulement le HTML,
00:05:48comme ce que font les outils classiques ou ma compétence personnalisée de décomposition de site.
00:05:52Si vous utilisez le mode « ultra », il intègre Playwright.
00:05:55Il y a donc un certain niveau de sophistication. Dans l'ensemble,
00:05:58c'est une compétence très astucieuse, vous êtes là dès le début. Si vous l'utilisez,
00:06:00vous devenez un utilisateur de repo GitHub avant-gardiste.
00:06:03Je vous suggère fortement de faire cela si vous commencez un nouveau site et que vous
00:06:07ne savez pas par où commencer, car encore une fois,
00:06:10c'est un excellent point de départ. Je peux modifier tout ce que je veux ensuite.
00:06:13L'outil numéro trois est un peu en dehors de mon domaine
00:06:17de prédilection, je l'avoue, mais je le trouve super intéressant.
00:06:19J'essaie d'en apprendre plus et de l'utiliser moi-même.
00:06:21Il s'agit d'une compétence WebGPU.
00:06:23Les WebGPU sont essentiellement des composants de design web où
00:06:28la page interagit directement avec votre carte graphique.
00:06:30Cela permet de créer des animations super cool. Comme vous le voyez ici,
00:06:34ce genre de choses par exemple.
00:06:36Si vous avez regardé mes sept niveaux de design web avec Claude Code,
00:06:40et même quand on a regardé le site Igloo au niveau sept,
00:06:44ils utilisaient des choses comme WebGL et des shaders personnalisés.
00:06:47C'est de ce domaine dont je parle.
00:06:49Et cette compétence apprend à Claude Code
00:06:52comment écrire du code qui fait cela.
00:06:54Elle lui dit comment configurer le rendu, comment faire des shaders,
00:06:58comment créer des matériaux basés sur des nœuds. En utilisant la compétence,
00:07:00j'ai juste donné quelques instructions textuelles et il a pu créer ceci.
00:07:06Est-ce aussi cool que celui-là ? Non,
00:07:08mais je l'ai fait en deux minutes, enfin ça a pris 10 minutes avec le
00:07:13GPU, mais avec quelques prompts et sans savoir ce que je faisais.
00:07:16Si ce genre de choses vous intéresse, et parmi tous les outils dont je parle,
00:07:19c'est sans doute celui qui est le plus « perché »,
00:07:22mais je l'ai aimé. Si ça vous intéresse,
00:07:26c'est une compétence à découvrir car elle vous emmène dans cette
00:07:28direction.
00:07:29Mais c'est évidemment quelque chose de bien plus avancé que de simplement changer
00:07:32l'apparence de nos cartes ou la typographie d'un site,
00:07:35mais c'est bon à savoir.
00:07:37L'outil numéro quatre est l'un des repos IA les plus populaires du mois dernier.
00:07:41C'est awesome-design.md. Il en est à plus de 50 000 étoiles à ce stade.
00:07:46Il cartonne littéralement.
00:07:48C'est similaire à Skill UI dont nous avons parlé car
00:07:52c'est une compétence qui nous permet de regarder d'autres sites existants et de
00:07:57les utiliser comme modèle pour un site que nous allons construire. Cependant,
00:08:01Awesome Design est fortement influencé par Stitched.
00:08:04Et nous parlerons de Stitched un peu plus tard.
00:08:06Stitched a ce concept de fichiers design.md, des fichiers markdown de design,
00:08:11qui sont juste des prompts décrivant comment vous devriez construire votre site.
00:08:14La différence, c'est que Google a fait un excellent travail sur ces prompts.
00:08:18Comme vous le voyez ici. C'est très spécifique sur la vue d'ensemble,
00:08:22la ligne directrice, les couleurs... Ça apporte une structure géniale.
00:08:26Au lieu d'utiliser la compétence de design front-end de Claude Code,
00:08:29qui est plutôt vague, du genre : « Faisons les choses comme ça ».
00:08:32Ici, c'est beaucoup plus concret sur ce qu'il faut faire.
00:08:34Ils ont donc repris l'idée de ces prompts système de design très spécifiques
00:08:39pour les créer pour une multitude de sites web dans plein de
00:08:43domaines différents. Par exemple, pour ElevenLabs,
00:08:47je clique dessus ici.
00:08:50Je peux voir l'intégralité du concept de design d'ElevenLabs
00:08:55décortiqué : éléments de formulaires, exemples de cartes, boutons, titres,
00:09:00typographie, couleurs, tout ça. Et ce n'est pas juste un aperçu.
00:09:04C'est le prompt réel que nous pouvons donner à Claude Code. Et encore une fois,
00:09:07ils ont des tonnes de sites, y compris des choses qui ne sont pas textuelles,
00:09:10comme Bugatti, n'est-ce pas ? En gros,
00:09:15cela vous donne les briques de base d'un site que vous aimez pour que vous puissiez
00:09:19construire le vôtre avec ces mêmes briques.
00:09:21Alors que Skill UI regarde n'importe quel site
00:09:25pour le construire pour vous.
00:09:26Ici, il s'agit de séparer les composants.
00:09:29Et c'est ensuite à nous de le construire. Après avoir vanté Awesome Design,
00:09:33il est juste que pour l'outil numéro cinq,
00:09:35nous parlions de l'application qui l'a inspiré.
00:09:38Il s'agit de Stitched, par Google. Stitched est génial
00:09:41si vous voulez commencer par une approche visuelle avant même
00:09:46de commencer à coder votre page.
00:09:48Vous allez dans Stitched et vous lui donnez un prompt sur ce que
00:09:50vous essayez de construire. Vous pouvez inclure des captures d'écran d'inspiration.
00:09:53Ce qu'il va faire, c'est créer le même genre de fichier design.md
00:09:57que vous avez vu tout à l'heure, mais dans son habitat naturel.
00:09:59Il nous donne le détail des couleurs, de la typographie, des labels,
00:10:04des boutons, et on voit ici tout le système de design,
00:10:08le même design.md qu'avant,
00:10:11mais personnalisé selon votre prompt. Une fois qu'il a fait cela,
00:10:14il vous propose plusieurs variantes du type de site que vous allez
00:10:18créer. Ce n'est pas juste la section d'accueil, c'est tout.
00:10:20Et une fois la maquette créée, je peux la modifier à ma guise.
00:10:25Je peux cliquer dessus, faire un clic droit et obtenir des variantes spécifiques.
00:10:28Je peux personnaliser les variantes, changer le nombre de propositions,
00:10:31passer de trois à cinq variantes. Je peux définir une plage créative,
00:10:34donner des instructions, etc.
00:10:35J'ai tout un tas de façons de générer des visuels pour mon
00:10:40futur site. Et c'est super car c'est difficile
00:10:43quand on est dans Claude Code et qu'à chaque changement visuel,
00:10:46il faut réécrire le code et relancer le serveur de dev.
00:10:48Il faut vérifier sur la page web. Et souvent, quand on fait ça,
00:10:52surtout sous l'angle du design front-end,
00:10:56je veux voir les options devant moi, d'accord ?
00:10:58C'est plus facile de voir ces trois options et de dire : « Je déteste ça »,
00:11:02« Je déteste ça », « J'aime bien ça », plutôt que de dire : « Non Claude, réessaie ».
00:11:06C'est aussi gratuit,
00:11:11ce qui est génial. Et peu importe ce que je construis ici,
00:11:13c'est très facile à transférer vers Claude Code parce que si je clique sur celui
00:11:16qui me plaît, je vais dans "plus", et je peux voir le code.
00:11:19Je peux ensuite copier le code et l'importer dans Claude Code.
00:11:23On peut même faire des choses comme copier vers Figma.
00:11:25On peut aussi l'importer dans AI Studio,
00:11:27mais le chemin le plus simple vers Claude Code est d'exporter puis de copier dans le presse-papiers.
00:11:31Il existe un MCP. On peut donc tout faire via le terminal de Claude Code.
00:11:35Mais pour être honnête, je ne vois pas trop ce que cela apporte vraiment.
00:11:39Je pense qu'avoir cette approche visuelle concrète en vaut la peine.
00:11:43En fait, j'ai une analyse complète sur Stitched et Claude Code, je mettrai le lien
00:11:46ci-dessus si vous voulez voir ça en action. Maintenant,
00:11:49j'ai hésité à inclure la compétence numéro six dans cette vidéo car je trouve qu'elle devient
00:11:52tellement omniprésente. Presque tout le monde sait qu'elle existe, mais on ne sait jamais.
00:11:55C'est peut-être la première fois que quelqu'un la voit. C'est la compétence UI UX Pro Max.
00:12:00C'est, je pense, le successeur spirituel ou ce que
00:12:05la compétence de design front-end d'Anthropic devrait être. Imaginez un outil de design
00:12:09front-end d'Anthropic qui serait réellement entraîné sur différentes sortes de,
00:12:14vous savez, conventions pour différents types de sites web dans différents domaines car
00:12:19chaque site n'a pas besoin de ressembler à un énième SaaS de seconde zone.
00:12:23Et c'est tout l'intérêt de cette compétence.
00:12:25C'est un générateur de systèmes de design intelligent.
00:12:27Il va donc vous poser des questions.
00:12:29Il va chercher à comprendre de quoi traite votre site,
00:12:31quel est votre service, puis le concevoir en fonction de sa fonction.
00:12:35Il possède 161 règles de raisonnement spécifiques à l'industrie.
00:12:39Ils ont vraiment poussé le développement de cet outil.
00:12:43Vous n'allez pas obtenir de la bouillie générée par IA sans talent,
00:12:47et vous n'aurez pas ce qui devient doucement la version Claude Code de la
00:12:51bouillie IA avec la compétence de design front-end de base.
00:12:52Il est aussi doté de nombreux conseils spécifiques à la stack technique.
00:12:55On ne vous pousse pas uniquement vers React par exemple, et au final c'est une excellente
00:13:00compétence. Surtout si vous n'avez aucune idée de la direction à prendre.
00:13:04Beaucoup de choses dont nous avons déjà parlé nécessitent d'avoir une idée de
00:13:09ce que vous voulez, surtout si vous avez un exemple de site web, n'est-ce pas ?
00:13:12Avec Skill UI, si j'ai un exemple,
00:13:15je peux pratiquement le copier, et c'est la même chose avec Awesome Design.
00:13:19C'est-à-dire que je choisis parmi ces sites web qui existent déjà.
00:13:21Si vous ne voulez pas passer par là,
00:13:22mais que vous ne savez toujours pas trop où aller, utilisez cette compétence.
00:13:26C'est un excellent point de départ.
00:13:28Maintenant, l'outil numéro sept concerne les composants et la précision des détails de
00:13:33notre page web. Et c'est là qu'intervient 21st.dev,
00:13:36qui est un site avec un million de composants différents à choisir et
00:13:40à intégrer directement dans notre site. Par exemple,
00:13:43disons que je cherche quelque chose pour notre page d'accueil.
00:13:46Je vais simplement dans la section "Héros" de 21st.dev et j'en cherche une.
00:13:51Disons que j'aime celle-ci, cette section héros qui utilise Spline.
00:13:56Il y a ce robot qui suit réellement ma souris. Eh bien,
00:14:00au lieu de chercher comment utiliser Spline et d'écrire tout ce code,
00:14:04je vais simplement sur 21st.dev.
00:14:06Je copie le prompt en cliquant sur le bouton "copier le prompt" en haut.
00:14:09Je vais dans Claude Code et je le colle. Et voilà, j'ai ma section héros.
00:14:14Maintenant,
00:14:15évidemment, les sections héros sont probablement les éléments les plus lourds à importer
00:14:19sur notre page, car si on a une section héros avec un robot qui regarde partout,
00:14:22tout le site doit s'adapter à cette esthétique. Heureusement,
00:14:26je pense que 21st.dev apporte le plus de valeur pour
00:14:29les petits composants et les fioritures comme les boutons, n'est-ce pas ?
00:14:33Rien que le fait que ce bouton ait cette petite lumière
00:14:36quand je le survole, par rapport à un bouton standard, c'est ce qui rendra
00:14:39votre site plus beau, ou des cartes qui ont cette,
00:14:43sorte d'animation lumineuse qui suit ma souris ou autre. Encore une fois,
00:14:46ce sont ces petits détails mineurs, ces ombres rougeoyantes.
00:14:49C'est ce genre de chose qui rehausse votre page web,
00:14:52lui donne un aspect plus premium et montre simplement que vous y avez accordé de l'importance.
00:14:56Et que vous avez vraiment essayé. Et au minimum,
00:14:59cela devrait simplement vous donner de l'inspiration car
00:15:03rien ne vous empêche de copier un prompt pour n'importe lequel de ces composants,
00:15:07que ce soit des bordures, des héros ou autre,
00:15:09puis de le peaufiner à votre guise avec Claude Code.
00:15:12Ce n'est pas tout ou rien.
00:15:14Et je pense que, surtout pour ceux d'entre nous qui ne viennent pas du monde du
00:15:17web design, ce qui est mon cas, vous savez,
00:15:19on ne sait pas ce qu'on ne sait pas, et être exposé à toutes ces différentes
00:15:23façons de créer un bouton permet de stimuler l'imagination dans d'autres
00:15:26directions. Et cela vous aide au fil du temps.
00:15:29Plus vous y êtes exposé, plus vous développez votre propre goût et comprenez
00:15:32ce que vous aimez. Mais tant que vous n'avez pas vu ces choses,
00:15:34vous ne savez même pas ce que vous aimez.
00:15:36Tout ce que vous avez vu, c'est ce que Claude Code vous donne.
00:15:39Je vous suggère donc vivement d'aller voir, presque tout est gratuit et
00:15:43vous devriez intégrer au moins quelques-uns des petits éléments,
00:15:46comme leurs façons de faire des boutons et des cartes, dans votre prochain site.
00:15:49Maintenant, la phrase que l'on entend sans cesse ces jours-ci est : l'IA n'a pas de
00:15:53goût. Eh bien, et si on lui donnait du goût via une compétence ? C'est
00:15:56ce que nous essayons de faire avec l'outil numéro huit.
00:15:59Il s'agit du repo "Taste Skill" (compétence du goût).
00:16:01C'est une collection de compétences qui tente de donner à Claude
00:16:06Code une certaine mesure de goût, c'est-à-dire s'éloigner des trucs génériques d'IA,
00:16:11ce qui est le thème récurrent que vous voyez partout.
00:16:13Cette compétence de goût inclut plusieurs sous-compétences comme vous le voyez ici,
00:16:17et possède différents réglages. Vous pouvez donc ajuster, vous savez,
00:16:21le niveau d'abstraction par rapport à une génération IA normale.
00:16:24Et ce que vous voyez ici est un exemple de sites web qui ont été
00:16:28créés en utilisant cette compétence. Et tout de suite,
00:16:31on remarque que c'est un peu différent, non ? Je veux dire, ce n'est pas renversant,
00:16:36mais c'est immédiatement différent, et la différence est une bonne chose.
00:16:38Moins ça ressemble à tous les templates SaaS habituels, mieux c'est.
00:16:41Et beaucoup incluent des choses comme des animations au défilement et, vous savez,
00:16:46on ne voit pas des "bento boxes" à répétition.
00:16:47C'est donc une compétence intéressante, un peu de niche, que vous pourriez au
00:16:52moins essayer pour comparer avec vos générations habituelles de Claude Code.
00:16:56L'outil numéro neuf semblera très simple à beaucoup d'entre vous,
00:16:59mais vous seriez bluffés par le nombre de personnes qui ignorent que
00:17:03Google Fonts existe.
00:17:05Google Fonts est un immense répertoire gratuit de milliards
00:17:10de polices différentes que vous pouvez utiliser dans absolument tous vos projets de code.
00:17:14Vous n'avez pas besoin d'être l'esclave d'Inter ou de n'importe quelle autre police
00:17:18que Claude Code utilise pour tout.
00:17:20Vous pouvez simplement aller sur Google Fonts, c'est classé par apparence,
00:17:24par sensation, par famille, et dire à Claude Code : utilise ceci,
00:17:29utilise cela. Claude Code y a également accès.
00:17:31Parce que la typographie joue un rôle énorme,
00:17:34vraiment énorme, dans l'aspect et le ressenti de votre design. De plus,
00:17:38vous pouvez utiliser Claude Code pour vous aider à chercher dans Google Fonts.
00:17:42Dites simplement à Claude Code le type de site que vous construisez,
00:17:45le type d'ambiance que vous recherchez.
00:17:47Et il devrait vous donner un ou cinq exemples de polices à regarder.
00:17:50Vous pouvez le voir en temps réel ici. Encore une fois,
00:17:53vous ne voulez pas tout laisser au hasard ou dépendre de l'humeur
00:17:57de Claude ce jour-là pour savoir quelle police il va vous donner, parce que
00:18:01ce sera toujours du Inter, toujours. Et enfin,
00:18:05l'outil numéro 10, Playwright CLI.
00:18:06Maintenant, Playwright CLI n'est pas un outil de design en soi,
00:18:10bien que ce soit quelque chose dont nous avons déjà parlé avec Skill UI et
00:18:13sa capacité à aller prendre des captures d'écran de pages web.
00:18:15On peut donc l'utiliser comme outil de recherche et d'idéation.
00:18:19Mais ce sur quoi je veux vraiment me concentrer,
00:18:21c'est l'idée de forme et de fonction. Quand on construit des choses en front-end,
00:18:25pensez à quelque chose d'aussi simple qu'une page de soumission de formulaire,
00:18:27nous allons devoir la tester.
00:18:29Nous devons nous assurer que ces choses fonctionnent réellement.
00:18:32Et le moyen le plus simple de le faire à grande échelle est Playwright CLI, pas le MCP.
00:18:36Le CLI est bien plus efficace.
00:18:38Et la façon de faire, une fois que vous avez créé votre design front-end,
00:18:41est simplement, une fois l'outil CLI installé, de dire à Claude Code :
00:18:44"Je veux que tu testes chaque interaction sur cette page avec Playwright CLI."
00:18:49Il va créer un tas d'instances Chrome différentes.
00:18:52Vous pouvez choisir le mode "visible" ou le mode "invisible" (headless).
00:18:55Et il testera tout par lui-même.
00:18:57Cela accélère considérablement tout le processus de design front-end parce que,
00:19:02je pense qu'on a tous connu ça : on ajoute quelque chose, on veut le voir,
00:19:05puis on veut le tester, et ça prend une éternité,
00:19:06surtout pour des choses comme les envois de formulaires,
00:19:08où il y a des tonnes de cas particuliers selon la façon dont un utilisateur bizarre
00:19:13va entrer ses informations.
00:19:15Voilà donc mes 10 compétences, plugins et outils CLI
00:19:20préférés pour le design avec Claude Code. J'espère que certains d'entre eux étaient nouveaux pour vous.
00:19:24Skill UI, par exemple, je parie que seulement trois personnes connaissent ce truc.
00:19:29Mais oui, le domaine du design front-end,
00:19:31je le trouve super intéressant avec Claude Code car il est vraiment mauvais d'un
00:19:36point de vue esthétique, du point de vue du goût.
00:19:37Même si je déteste utiliser le mot "goût" ces jours-ci car tout le monde
00:19:40ne parle que de ça, mais comme Claude Code n'en a pas beaucoup,
00:19:42cela devrait être une bonne chose pour vous, en tant qu'individu, n'est-ce pas ?
00:19:46Car c'est un espace où vous pouvez maintenant vous différencier de la masse.
00:19:50Et chaque fois que vous pouvez vous différencier de tous les autres qui se jettent
00:19:55sur Claude Code ces temps-ci, c'est une bonne chose.
00:19:57Et ces compétences et outils peuvent vous y aider. Comme toujours,
00:20:00dites-moi ce que vous en avez pensé.
00:20:01N'oubliez pas d'aller voir Chase AI Plus si vous voulez accéder à la masterclass,
00:20:04et je vous dis à bientôt.