Claude Code vient de connaître sa plus grande refonte de design de l'année (et voici comment la maîtriser)
CChase AI
Computing/SoftwareInternet Technology
Transcript
00:00:00Claude Code vient de recevoir sa plus grande mise à jour de ses capacités de design front-end depuis longtemps avec la toute nouvelle compétence Slash Design.
00:00:07Désormais, la compétence Slash Design reprend essentiellement le meilleur de l'application web autonome Claude Design, que vous voyez ici, et l'intègre directement dans Claude Code.
00:00:16Au lieu de devoir jongler entre deux applications distinctes ou de transférer maladroitement vos designs de Claude Design vers Claude Code, nous avons maintenant le meilleur des deux mondes.
00:00:25De plus, nous bénéficions de la fonctionnalité supplémentaire de toutes les compétences que nous utilisons déjà au sein de Claude Code.
00:00:30Nous pouvons donc associer cette nouvelle fonctionnalité Slash Design à des éléments comme Impeccable ou la compétence Taste, ce qui donne des résultats bien meilleurs.
00:00:36Aujourd'hui, je vais non seulement vous montrer comment fonctionne Slash Design, mais aussi vous donner le meilleur flux de travail pour en tirer le maximum.
00:00:42Donc, si vous faites le moindre travail de design front-end avec Claude Code, vous voudrez rester pour celui-ci.
00:00:46L'intérêt de la compétence Ford Slash Design est exactement ce que vous voyez ici.
00:00:49Je suis dans l'application de bureau Claude, mais la même chose s'applique si vous utilisez le terminal.
00:00:53C'est l'idée que lorsque je tape Slash Design et que je lui demande de créer quelque chose pour moi, il va générer un plan de travail très similaire à l'application web Claude Design.
00:01:02J'ai plusieurs options parmi lesquelles choisir, et lorsque je regarde ces options, je peux entrer dans les détails de ce qui change.
00:01:09Comme vous pouvez le voir sur la droite, en cliquant sur les différents composants du design front-end qu'il a créé, je peux pratiquement tout modifier.
00:01:17En plus de cela, je peux très facilement demander plusieurs versions du même type de rendu, et une fois qu'une version me plaît, je peux demander à Claude Code de se mettre au travail et de coder la chose.
00:01:27Cela me fait gagner un temps précieux par rapport au fait d'être dans l'application web Claude Design, de tout faire, de dire que je veux le transférer, de le mettre dans un zip, de le déposer dans le dossier, de l'indiquer à Claude Code, et de faire tout ce tracas ennuyeux.
00:01:38Et bien plus que de la simple commodité, comme je l'ai mentionné plus tôt, nous pouvons maintenant cumuler les compétences.
00:01:43Quand je suis dans l'application web Claude Design, je ne peux pas nécessairement utiliser ou invoquer quelque chose comme la compétence Impeccable ou Tay.
00:01:49Je peux le faire ici.
00:01:50En fin de compte, mes résultats seront donc bien meilleurs, en plus d'être plus pratiques.
00:01:54Utiliser la compétence de design est très simple.
00:01:56Tout ce que je vais faire, c'est taper slash design, puis je vais lui indiquer ce que je cherche à créer.
00:02:01Disons que je veux créer une publication sur les réseaux sociaux, ou quelque chose comme un post Instagram, détaillant ce que fait la nouvelle compétence slash design.
00:02:10Et disons que je veux en créer trois variations dans trois styles de design très différents, et que je veux utiliser la compétence Impeccable.
00:02:19Je vais simplement ouvrir mon micro et dire exactement cela.
00:02:22Alors, est-ce qu'on peut créer une maquette pour une publication sur les réseaux sociaux ?
00:02:27Pensez à quelque chose comme un post Instagram détaillant ce que fait la nouvelle compétence slash design de Claude Code.
00:02:34Je veux trois variations extrêmement différentes, donc des styles de design et des styles esthétiques très variés.
00:02:41Et lorsque vous faites cela, je veux que vous invoquiez la compétence Impeccable pour vous aider à créer ceci.
00:02:45Maintenant, si je faisais exactement la même chose dans l'application de bureau Claude, cela s'afficherait dans ce type de panneau latéral, ce qui explique pourquoi j'aime faire cela sur l'application de bureau, car tout est regroupé au même endroit.
00:02:57Dans le terminal, vous verrez que cela va créer un artefact, ce qui signifie que cela va essentiellement s'ouvrir dans mon navigateur.
00:03:02Donc, bien que ce soit un peu moins pratique qu'une application de bureau, cela reste assez facile à utiliser.
00:03:06Avant de regarder l'artefact, un petit mot du sponsor d'aujourd'hui : moi-même.
00:03:10Je viens de sortir une version mise à jour de ma Claude Code Masterclass, et c'est le meilleur moyen de passer de zéro à développeur IA, surtout si vous n'avez pas un profil technique.
00:03:19Nous nous concentrons sur des cas d'usage réels et pratiques, et je mets cela à jour chaque semaine.
00:03:24Donc, si vous essayez de comprendre comment utiliser réellement cet outil de fou, c'est fait pour vous.
00:03:32Vous pouvez le trouver dans Chase AI+.
00:03:33Il y a un lien dans le commentaire épinglé.
00:03:35Et voici un aperçu de l'artefact créé.
00:03:37Nous avons donc trois styles de design différents pour nos posts Instagram, tout comme nous l'avons vu dans l'application de bureau.
00:03:44Nous avons cette barre de propriétés ici sur la droite.
00:03:46Je peux zoomer, cliquer sur un élément et obtenir beaucoup plus de détails sur ce que je suis en train d'ajuster.
00:03:52Vous remarquerez également en haut à droite une section de réglages, qui est vide pour l'instant.
00:03:57À tout moment, je peux demander à Claude Code d'afficher un panneau de réglages, exactement comme dans l'application web Claude Design.
00:04:03Et je peux ajuster encore plus de choses que ce que vous voyez ici.
00:04:07Donc, en termes d'utilisation, c'est relativement simple.
00:04:10Il suffit de taper slash design et de demander ce que vous voulez.
00:04:12Maintenant, à quoi devrait ressembler notre flux de travail ?
00:04:14Comment en tirer le meilleur parti ?
00:04:16Eh bien, il y a un flux de travail simple en trois étapes que vous devriez utiliser chaque fois que vous faites du design front-end avec Claude Code.
00:04:22La première étape est l'inspiration, car ce que je veux donner à Claude, ce n'est pas seulement un prompt disant hé, je veux trois trucs différents.
00:04:30Idéalement, je veux fournir à Claude Code quelques exemples.
00:04:33Je veux prendre des captures d'écran de posters que j'aime.
00:04:35Je veux prendre des captures d'écran de styles de design que j'apprécie.
00:04:39Les donner à Claude Code et lui dire : hé, est-ce que tu peux créer quelque chose dans le même esprit ?
00:04:43En ce moment, nous travaillons sur un simple poster, mais cela s'appliquerait aussi si vous créiez une landing page, une section héro ou quoi que ce soit d'autre.
00:04:50Votre prochaine question devrait être : où puis-je trouver de l'inspiration ?
00:04:52Heureusement, il y a une tonne d'endroits pour trouver des idées.
00:04:55Un bon site web est Pinterest.
00:04:57J'ai simplement cherché infographie Instagram et je vois tous ces designs potentiels.
00:05:01Un autre bon site est Landbook, qui est vraiment bien pour le web design et les sections héro.
00:05:06Nous avons aussi des plateformes comme Dribbble, et c'est Dribbble avec trois b.
00:05:11L'idée est simplement d'aller sur place et de commencer à créer une bibliothèque de designs que vous pourrez toujours consulter et apporter à Claude Code quand vous voulez concevoir quelque chose.
00:05:21Vous n'avez ainsi pas besoin de répéter ce processus d'inspiration à chaque fois.
00:05:24Je vais donc prendre quelques captures d'écran de ceux qui me plaisent.
00:05:27Celui-ci me plaît.
00:05:29Je trouve que ça a l'air plutôt intéressant.
00:05:31Et rappelez-vous, vous cherchez simplement une esthétique générale que vous voulez que Claude reproduise.
00:05:36Je trouve que celui-ci a l'air plutôt intéressant aussi.
00:05:39Je vais donc déposer ces trois captures d'écran dans la fenêtre de prompt.
00:05:43Et maintenant, je vais essentiellement lui donner le même prompt qu'avant, du genre : hé, je veux ce type de post Instagram.
00:05:48Je veux trois versions différentes.
00:05:49Sauf que cette fois, je vais dire : référez-vous à ces captures d'écran.
00:05:52Je veux qu'elles servent d'inspiration.
00:05:54Vous pouvez avoir un design différent pour chaque capture d'écran.
00:05:59Je vais aussi lui dire d'utiliser impérativement la compétence Impeccable.
00:06:02Et je vais lui préciser que, s'il a besoin de générer des éléments externes, il peut utiliser quelque chose comme le champ MCP Higgs que j'ai.
00:06:09Vous pourriez utiliser d'autres outils, comme file.ai pour d'autres types de générateurs d'images.
00:06:14L'idée est que, puisque nous sommes maintenant dans Claude Code, nous pouvons intégrer tout ce que nous voulons dans ce processus de conception.
00:06:19Encore une fois, vous n'êtes pas obligé d'utiliser des images externes si vous ne le souhaitez pas.
00:06:23Mais voici à quoi va ressembler mon prompt.
00:06:25Recréons donc ces trois publications que nous avons faites.
00:06:29Encore une fois, nous utilisons la compétence slash design.
00:06:31Mais j'ai déposé trois captures d'écran ici.
00:06:33Et j'aimerais les utiliser comme inspiration pour notre processus de design.
00:06:37Je veux donc trois nouvelles générations.
00:06:39Faites une génération qui s'inspire de chacune de ces captures d'écran appropriées.
00:06:43Encore une fois, utilisez la compétence de design Impeccable.
00:06:45Et rappelez-vous, vous avez accès au champ MCP Higgs.
00:06:48Donc, si vous pensez avoir besoin de générer des éléments externes pour nos posters, faites-le également.
00:06:55Je vous laisse seul juge.
00:06:56Et c'est vraiment la première et la deuxième étape de ce processus.
00:06:59La première étape consiste à trouver l'inspiration.
00:07:00Et la deuxième étape consiste à utiliser ces compétences supplémentaires qu'on ne peut pas vraiment utiliser dans l'application web Claude Design.
00:07:08Et si vous vous dites : tu n'arrêtes pas de mentionner Impeccable, je ne sais pas ce que c'est.
00:07:11C'est juste une compétence open source gratuite que vous pouvez ajouter à Claude Code.
00:07:16Et c'est entièrement axé sur le design front-end.
00:07:18En gros, son rôle principal est de reconnaître ce à quoi ressemble la bouillie visuelle générée par l'IA, de s'en débarrasser et d'ajouter de meilleurs principes de design à ce que vous créez.
00:07:26Et si vous voulez approfondir le sujet, j'ai des vidéos qui détaillent la meilleure façon d'utiliser Impeccable.
00:07:31Voici maintenant un aperçu des nouveaux posters créés par Claude en utilisant Slash Design.
00:07:35Et vous pouvez voir qu'ils s'inspirent clairement de l'inspiration que nous lui avons fournie.
00:07:39À tout moment, comme avant, je peux zoomer ici.
00:07:43Je peux jeter un œil aux propriétés et commencer à modifier des éléments.
00:07:46Parlons maintenant des réglages.
00:07:49Ce design n'a pas encore de commandes de réglage.
00:07:50Décrivez ce que vous voulez ajuster et Claude ajoutera un panneau de réglages pour cela.
00:07:53Faisons donc cela, car nous en sommes à la troisième étape du processus où nous voulons commencer à modifier les choses jusqu'à ce qu'elles nous plaisent.
00:08:00Ce que je vais faire, c'est ouvrir le terminal — où es-tu ? — et dire : hé, est-ce qu'on peut ajouter des commandes de réglage ici ?
00:08:10Je voudrais que les réglages soient très poussés.
00:08:12Je veux pouvoir modifier presque tout autant que possible en utilisant le panneau de réglages dans Claude Design.
00:08:21Vous pouvez maintenant voir cette partie de réglages sur la droite.
00:08:24Nous regardons donc celui du milieu.
00:08:25Je peux changer la couleur du papier, n'est-ce pas ?
00:08:29Qu'est-ce qu'on veut faire ici ?
00:08:30Et rappelez-vous, ces réglages peuvent aussi vous donner des idées.
00:08:33Donc à tout moment, vous pouvez aussi retourner dans Claude Code et prompter ces différents changements.
00:08:39Encore une fois, le gros avantage de voir tout cela visuellement, c'est que je peux itérer si rapidement au lieu de devoir prompt Claude Code, attendre la génération, voir si ça me plaît, prompt Claude Code, attendre la génération, n'est-ce pas ?
00:08:52Cela rend tout le processus tellement plus rapide.
00:08:55On peut donc modifier l'apparence du texte.
00:08:58On peut changer la taille réelle, l'épaisseur, l'interligne, et ainsi de suite.
00:09:03Donc tout ce que vous voyez ici peut être modifié.
00:09:06Mais rappelez-vous aussi qu'on peut faire de grands changements.
00:09:08Je n'aime pas trop l'aspect général du, vous savez, du deuxième.
00:09:12On peut faire ça aussi.
00:09:13Je peux lui donner un autre prompt en disant, hé, je n'aime pas le contenu actuel de celui-ci.
00:09:17Je veux qu'il explique plus en détail ce que fait réellement slash design.
00:09:21Je peux donc dire quelque chose comme pour le design du milieu, le deuxième, j'ai envie de partir là-dessus.
00:09:26Mais pour être honnête, j'aimerais bien changer le contenu.
00:09:29Encore une fois, on cherche plutôt une infographie qui explique ce que slash design apporte vraiment.
00:09:34Donc quand vous le recréez, vous pouvez ignorer les deux autres.
00:09:36Je veux juste me concentrer sur celui-là pour l'instant.
00:09:38Allez faire une recherche sur le web pour bien comprendre ce que slash design apporte réellement et intégrez cela dans la nouvelle version de cette infographie.
00:09:48Et voici la version mise à jour de ce poster.
00:09:49Comme vous pouvez le voir, il y a beaucoup plus d'informations sur ce que fait le nouveau slash design.
00:09:53Et encore une fois, vu qu'on utilise cette nouvelle compétence slash design, c'est très facile à modifier.
00:09:56Oh, je n'aime pas le texte ici.
00:09:59Je peux le déplacer où je veux.
00:10:00Je peux ajuster le texte lui-même, et cetera, et cetera, et cetera.
00:10:03Et à partir de là, vous continuez simplement ce processus en trois étapes : inspiration, utilisation des bonnes compétences et itération sur le design qui vous plaît.
00:10:11Donc si on veut vraiment choisir celui du milieu, on dirait simplement à Claude Code, hé, je veux travailler uniquement avec celui du milieu.
00:10:16Et vous feriez des itérations en boucle jusqu'à ce que le résultat vous plaise.
00:10:20Et ensuite, vous pouvez en faire ce que vous voulez.
00:10:22Globalement, cette compétence de design en slash simplifie grandement le design front-end au sein même de Claude Code.
00:10:28Souvent, nous devions compter sur des outils externes comme Impeccable pour ce genre de design en direct sur le web.
00:10:34Prenez donc le temps d'essayer cette nouvelle fonctionnalité.
00:10:36Je pense qu'elle est parfaite pour tous ceux qui utilisent Claude Code mais qui ont aimé l'application web Claude Design et trouvaient un peu bizarre de basculer entre les deux.
00:10:45C'est ça la niche.
00:10:46C'est le public visé.
00:10:48Donc comme toujours, dites-moi ce que vous en pensez.
00:10:51N'oubliez pas d'aller voir Chase AI Plus si vous voulez mettre la main sur ma masterclass Claude Code.
00:10:55Sur ce, à la prochaine.