00:00:00Claude Design est la meilleure chose qui soit arrivée
00:00:01à votre travail de développement front-end depuis l'arrivée des compétences.
00:00:05Mais si vous ne savez pas ce que vous faites,
00:00:06vous épuiserez tout votre quota d'utilisation
00:00:09avant même d'avoir pu créer une page de destination.
00:00:11Mais cette masterclass sur Claude Design
00:00:12vous aidera à résoudre ce problème
00:00:14en vous montrant quelles fonctionnalités valent vraiment la peine.
00:00:17En plus de cela, nous ferons un test comparatif
00:00:19entre Claude Code classique et Claude Design.
00:00:22Et nous parlerons de quelques cas d'usage intéressants
00:00:25qui vont au-delà du simple travail de page de destination.
00:00:27C'est un outil génial et nous avons beaucoup à couvrir.
00:00:30Alors, lançons-nous.
00:00:31Claude Design est la réponse d'Anthropic à Stitch de Google.
00:00:35Et tout comme Google Stitch,
00:00:37cela nous donne la capacité de créer de nombreuses maquettes visuelles
00:00:40pour nos applications web, mobiles, et même nos présentations.
00:00:43Pour accéder à Claude Design, il faut utiliser l'application web.
00:00:45Donc claud.ai/design.
00:00:47Ce n'est pas disponible dans Claude Code
00:00:48et ce n'est pas disponible sur l'application de bureau.
00:00:51Et en parlant de limitations,
00:00:52une limitation majeure que nous devons souligner immédiatement
00:00:54ce sont les limites d'utilisation.
00:00:56Il a sa propre limite hebdomadaire et c'est la même limite
00:00:59que vous soyez sur Pro, Max 5 ou 20X.
00:01:02Et c'est un outil très gourmand en ressources,
00:01:05surtout si vous utilisez un certain outil
00:01:08dont nous parlerons plus tard dans cette vidéo.
00:01:10Mais même avec ces limitations,
00:01:11Claude Design représente un énorme pas en avant
00:01:14en matière de conception front-end avec Claude.
00:01:17Des choses comme le système de réglages permettent de voir très facilement
00:01:20comment différents changements ajusteraient l'aspect général
00:01:23de votre application web.
00:01:23La fonction "Modifier" permet de plonger très rapidement dans les détails
00:01:28et de modifier les choses à un niveau granulaire
00:01:30sans dépendre uniquement des invites textuelles.
00:01:31Mais si vous voulez rester avec le système de commentaires,
00:01:33nous pouvons le faire.
00:01:34Ils ont un véritable bouton de commentaire
00:01:35où je peux sélectionner des parties individuelles de l'application web
00:01:39et laisser des commentaires qui vont directement à Claude Code
00:01:42ou sont ajoutés à une file d'attente pour d'autres membres de mon équipe
00:01:46afin qu'ils ajoutent leurs avis, car c'est très collaboratif.
00:01:48Vous pouvez partager ces designs avec d'autres personnes
00:01:50et vous pouvez tous travailler sur la même chose depuis différents endroits.
00:01:53Je peux dessiner sur l'application pour montrer ce que je veux changer.
00:01:56Je peux très facilement voir la présentation en plein écran.
00:02:00Et surtout,
00:02:02je peux très facilement exporter cela vers Claude Code.
00:02:05Et cette configuration axée sur le design visuel rend beaucoup plus facile
00:02:09d'obtenir le type de sorties front-end que vous souhaitez
00:02:11au lieu d'être purement à l'intérieur de Claude Code
00:02:13et de devoir faire cette dynamique de rafraîchissement du serveur de développement
00:02:18que nous utilisons depuis longtemps.
00:02:19Mais pour tirer le meilleur parti de cet outil,
00:02:21il y a certaines choses que vous devez savoir.
00:02:22Donc, nous allons d'abord commencer par le travail de design front-end
00:02:25pour une application web, ce que recherche la plupart des gens.
00:02:29Et nous montrerons aussi ce que Claude Code nous aurait donné
00:02:33par rapport à Claude Design.
00:02:34Ainsi, vous pouvez voir ce que nous obtenons ici
00:02:37et si cela en vaut vraiment la peine.
00:02:38Mais avant cela, un rapide mot de notre sponsor, moi-même.
00:02:42Nous venons de sortir la masterclass Claude Code
00:02:44au sein de Chase AI Plus.
00:02:45Et c'est le meilleur moyen de passer de zéro à développeur IA,
00:02:48surtout si vous n'avez pas de formation technique.
00:02:51Et dernièrement, nous nous sommes concentrés sur notre système d'OS agentique
00:02:54à l'intérieur de la masterclass,
00:02:55où nous utilisons Claude Code comme moteur
00:02:58et nous le complétons avec Obsidian pour la mémoire,
00:03:00avec GWS pour attacher toute notre suite Google.
00:03:03Et ensuite, avec cette fondation,
00:03:05en attachant tous les packs de compétences personnalisés,
00:03:09que nous pouvons imaginer pour nos cas d'usage.
00:03:12Et nous parlons même de comment tout emballer
00:03:14et le vendre à des clients.
00:03:15Donc, si c'est quelque chose qui vous intéresse,
00:03:17jetez-y un œil.
00:03:18C'est dans Chase AI Plus,
00:03:19il y aura un lien dans le commentaire épinglé.
00:03:21Parlons donc de Claude Design et de votre application web,
00:03:24car il y a quelques décisions que nous devons prendre
00:03:26avant même de commencer à soumettre des invites à cet outil.
00:03:28Et maintenant, je vais bouger partout sur l'écran
00:03:31durant cette vidéo, alors soyez patients.
00:03:32Maintenant, la première question que nous allons nous poser est,
00:03:35allons-nous utiliser un système de design ?
00:03:38Donc ici pour moi, vous voyez "aucun"
00:03:40et vous voyez un système de design d'OS agentique.
00:03:42Le vôtre indiquera "aucun" au début.
00:03:44Si nous voulons créer un système de design,
00:03:47nous allons monter ici
00:03:48et nous allons aller dans les systèmes de design.
00:03:50Donc vous n'aurez probablement rien ici
00:03:52et vous cliquerez sur "créer".
00:03:53Maintenant, qu'est-ce qu'un système de design ?
00:03:56Eh bien, c'est essentiellement un modèle visuel
00:04:00que vous pouvez appliquer à tout projet que vous créez par la suite.
00:04:03Donc, si vous avez des polices spécifiques, des logos spécifiques,
00:04:07quoi que ce soit de spécifique, même si ce n'est qu'une ambiance générale,
00:04:10vous pouvez le faire ici.
00:04:11C'est ici que vous configurez cela.
00:04:12Ainsi, vous n'avez pas à vous répéter
00:04:13pour chaque projet individuel.
00:04:15Si vous avez une sorte de ligne directrice
00:04:17d'un point de vue visuel.
00:04:20Donc vous entrez le nom de votre entreprise
00:04:21et ensuite vous fournissez des exemples.
00:04:23Maintenant, ces exemples peuvent être du code.
00:04:25Donc je peux lier un dépôt GitHub.
00:04:27Je peux faire glisser un dossier ici.
00:04:29Je peux télécharger des fichiers.
00:04:30Je peux ajouter des polices, des actifs, tout ce que je veux.
00:04:33C'est ici que vous définissez votre marque.
00:04:36Maintenant, une mise en garde.
00:04:39C'est ce dont je parlais quand je disais qu'il est gourmand en jetons.
00:04:42Et par gourmand en jetons, je veux dire que faire fonctionner un système de design
00:04:45va, premièrement, prendre entre cinq et 15 minutes
00:04:47car il ingère tout, cela dépend un peu de la taille.
00:04:50Et deuxièmement, cela prendra environ 20 à 25 % de votre utilisation
00:04:55dès le départ.
00:04:56Donc comprenez cela, ne venez pas ici en pensant,
00:04:57oh, la première chose que je vais faire
00:04:58c'est enchaîner cinq systèmes de design.
00:05:00Absolument pas, absolument pas.
00:05:02Faites-en un si vous savez ce que vous voulez faire
00:05:05et je vous montrerai à quoi cela ressemble
00:05:07lorsque nous le mettons en place.
00:05:08Mais ne faites pas plus que ça.
00:05:09Du moins pas pour l'instant, jusqu'à ce qu'ils augmentent les limites
00:05:11ce qu'ils feront probablement à l'avenir.
00:05:12Donc, gourmand en ressources, gourmand en ressources, gourmand en ressources,
00:05:16ne vous faites pas avoir par ça.
00:05:17Maintenant, si vous voulez vraiment le faire,
00:05:19vous allez simplement remplir tout cela
00:05:20puis vous cliquerez sur "continuer vers la génération"
00:05:21et une fenêtre contextuelle affichera quelque chose comme,
00:05:24hé, cela va prendre cinq à 15 minutes.
00:05:26Une fois qu'il aura fini d'ingérer tous ces actifs,
00:05:29vous obtiendrez quelque chose comme ceci
00:05:30où il vous demande de revoir le projet de système de design
00:05:33qu'il a imaginé.
00:05:34Ce que je lui ai fourni, c'était le code de mon tableau de bord d'OS agentique
00:05:38que je vous ai montré un peu plus tôt.
00:05:40Il a une sorte de thème de couleur "Cloud".
00:05:43Il a une police de texte spécifique, tout ça.
00:05:45Donc c'est ce que je lui ai fourni,
00:05:46c'était essentiellement ce genre de visuel.
00:05:48Et il est revenu avec tout cela.
00:05:49Donc, hé, cela semble bon.
00:05:53Cela semble bon.
00:05:53Hé, regardez cette mascotte.
00:05:54Elle a l'air familière.
00:05:55Cela semble bon.
00:05:57La voix passe à travers toutes les couleurs.
00:05:59Il descend dans les détails très, très précis
00:06:03de, OK, quelles couleurs voulez-vous pour ces éléments ?
00:06:06À quoi voulez-vous que les cartes ressemblent ?
00:06:07C'est très spécifique.
00:06:08C'est vraiment agréable.
00:06:09Et encore une fois, cela rappelle beaucoup Stitch.
00:06:11Vraiment, très similaire à ce genre de chose.
00:06:14Et donc j'ai approuvé le tout.
00:06:16Il dit qu'il manque la police de la marque.
00:06:17Donc si j'avais des polices spécifiques que je voulais toujours utiliser,
00:06:20je peux également les télécharger.
00:06:21Et à tout moment, je peux revenir ici
00:06:23car il a décomposé tous les composants,
00:06:26cliquer dessus, puis examiner et modifier au besoin.
00:06:30Et tout comme ce que vous verrez plus tard
00:06:31avec les pages de destination réelles et les présentations
00:06:33et tout ça, nous pouvons partager ceci, n'est-ce pas,
00:06:36à une équipe ou autre, ou je peux l'exporter.
00:06:39Comme PowerPoint, PDF, nous pouvons l'envoyer vers Canva, HTML,
00:06:42Claude Code, vraiment, vraiment facile, juste à un clic.
00:06:44De plus, nous avons les fichiers de design réels.
00:06:46Donc je peux regarder à l'intérieur ici et voir tout ce qui se passe,
00:06:50les fichiers HTML réels et tout ça par eux-mêmes.
00:06:52Donc il y a beaucoup de choses que vous pouvez personnaliser et manipuler ici.
00:06:55Ce n'est pas du tout une boîte noire où l'on se dit,
00:06:57eh bien, j'espère que Claude Design a trouvé quelque chose de bien.
00:06:59Qui sait ce qui se passe sous la surface ?
00:07:01Non, vous avez un aperçu.
00:07:03Tout cela, c'est du code.
00:07:04C'est une façon intéressante pour lui de créer du code
00:07:06et nous pouvons emporter ce code sur notre propre machine locale
00:07:09à tout moment.
00:07:10Nous ne sommes pas coincés ici.
00:07:11Et donc pour en revenir à Claude Design et aux applications web,
00:07:13c'est la première question à laquelle nous répondons.
00:07:15Allons-nous utiliser un système de design ?
00:07:16Est-ce quelque chose dans la même lignée visuelle
00:07:18de ce que nous avons fait par le passé ?
00:07:19Et surtout,
00:07:20avez-vous même créé un système de design ?
00:07:22Avez-vous sacrifié 20 % de vos jetons hebdomadaires
00:07:25aux dieux d'Anthropic et avoir déjà cette option ?
00:07:28Pour cette démo, nous allons choisir "aucun".
00:07:30Ainsi, nous sommes tous sur la même longueur d'onde.
00:07:32La question suivante est, hé,
00:07:33est-ce que je veux faire un wireframe ou de la haute fidélité ?
00:07:37Il y a de fortes chances que vous préfériez la haute fidélité.
00:07:39Pour voir à quoi cela va réellement ressembler.
00:07:41Mais encore une fois, si vous voulez faire un wireframe,
00:07:43vous pouvez toujours alterner.
00:07:44Vous n'êtes pas bloqué sur l'un ou l'autre.
00:07:45Mais pour ça, nous ferons de la haute fidélité.
00:07:47Appelons ça démo CD et nous allons créer.
00:07:50Ensuite, ça nous amènera ici et nous demandera du contexte.
00:07:53Avez-vous ce système de design ou juste une capture d'écran
00:07:56ou une base de code ou un fichier Figma ?
00:07:58Quoi qu'il en soit, si vous partez de zéro à l'étape zéro,
00:08:01ou si vous avez une base de code,
00:08:03vous voulez idéalement lui donner quelque chose.
00:08:05Si vous avez une base de code, comme nous l'avons dit,
00:08:07vous avez déjà travaillé sur une application, donnez-la à ça.
00:08:09Donnez-la à Clod Design.
00:08:10Ça va mieux fonctionner.
00:08:12Mais même si ce n'est pas le cas et que vous partez de zéro,
00:08:14je suggère fortement, au minimum,
00:08:16d'aller chercher dans le monde
00:08:18une sorte d'inspiration que vous aimez,
00:08:20que ce soit sur Dribbble, Awwwards ou Godly Website,
00:08:23n'importe quoi, vraiment.
00:08:25Partir d'une page blanche et s'attendre à ce que Clod Design
00:08:27fasse tout le gros du travail,
00:08:28parce que je parie que votre prompt sera nul.
00:08:30Comprenez juste que moins vous lui donnez de contexte,
00:08:33plus vous risquez une régression vers la moyenne.
00:08:35Alors gardez ça en tête.
00:08:36Nous avons la possibilité de faire des croquis.
00:08:38Donc, vous savez, on peut vraiment dessiner ici
00:08:40et se dire, ok, voilà notre image.
00:08:44Je veux le texte ici.
00:08:48Et ensuite je veux l'image principale.
00:08:53Image principale ici.
00:08:59Et ensuite faisons une bannière défilante.
00:09:10On va lui donner quelque chose,
00:09:12même si c'est une œuvre d'art brillante comme celle-ci.
00:09:15Et vous pouvez faire bien plus que ça.
00:09:16On peut changer le stylo, n'est-ce pas ?
00:09:18On peut insérer du texte.
00:09:19Je peux ajouter, genre, je peux ajouter des post-its.
00:09:21Donc il y a beaucoup de choses à faire ici.
00:09:25Et à partir de là, il suffit de prompter le truc.
00:09:28Vous avez aussi la possibilité de changer de modèle.
00:09:30Opus 4.7 est ce que je suggérerais,
00:09:33parce que surtout si vous ajoutez des choses comme des captures d'écran,
00:09:35Opus 4.7 a la meilleure fidélité
00:09:37et les résolutions les plus élevées pour les captures d'écran.
00:09:403 fois ce que vous obtenez avec Opus 4.6.
00:09:42Alors maintenant, donnons-lui un prompt.
00:09:44Je dis : création d'une page de destination pour Argus,
00:09:46une plateforme d'intelligence des réseaux sociaux
00:09:48qui aide les créateurs à repérer les sujets tendances
00:09:49dans leur niche avant qu'ils n'explosent.
00:09:51C'est une mise en page, vous savez,
00:09:53qui reflète à peu près ce que vous avez écrit ici.
00:09:55C'est donc le prompt le plus nul qu'on puisse lui donner.
00:09:58Un truc SaaS basique.
00:10:00Voyons donc ce qu'il propose.
00:10:02Et voici ce que Clod Design a trouvé,
00:10:03avec un prompt très minimal et aucun contexte en dehors de nous
00:10:06juste en gribouillant sur la page.
00:10:08Et c'est ça, ce que je trouve décent pour un premier jet.
00:10:13En termes d'utilisation, alerte d'utilisation, 4 %.
00:10:16Ça a pris 4 % de notre utilisation hebdomadaire totale
00:10:18pour générer cette page de destination.
00:10:20Et voici ce que Claude Code nous a donné
00:10:21avec exactement le même prompt,
00:10:22en utilisant aussi la compétence de conception front-end.
00:10:25Pas mal.
00:10:26Je veux dire, il y a quelques petits détails qu'on peut critiquer tout de suite,
00:10:28genre, hé, le texte est coupé ici et là.
00:10:32Il n'y a pas autant de défauts sur celui-ci.
00:10:35Le texte se chevauche un peu ici.
00:10:39Ça montre "rising now" ici en bas,
00:10:41qui se chevauche aussi un peu, mais c'est assez proche.
00:10:45Je veux dire, pour être honnête,
00:10:46j'aime un peu plus celui du design,
00:10:47mais je pourrais voir quelqu'un aimer un peu plus celui-ci
00:10:49également.
00:10:50Donc pour un premier jet, pas une différence massive.
00:10:52Alors pourquoi utiliser Clod Design ?
00:10:54Où est-ce que ça commence à faire la différence ?
00:10:55Eh bien, ça commence à faire la différence
00:10:56quand on commence à parler de variantes
00:10:59et d'être capable d'itérer.
00:11:00Et on le voit tout de suite avec les ajustements.
00:11:03Donc la capacité pour moi de faire ça est importante.
00:11:07Le fait que je puisse changer le titre très rapidement
00:11:10ou voir le ticker.
00:11:13Et on peut aussi approfondir cela.
00:11:16Donc j'ai écrit "augmenter le nombre d'ajustements agressivement".
00:11:18Je veux pouvoir jouer avec ça autant que possible.
00:11:20Alors voyons ce qu'il propose.
00:11:22Très bien, donc maintenant on peut voir qu'il a ajouté beaucoup plus d'ajustements
00:11:26pour qu'on puisse jouer avec.
00:11:27Et quel était le taux d'utilisation ?
00:11:30L'ajout de tous ces ajustements a ajouté 7 %.
00:11:32Donc vous voyez que juste en ajoutant une page de destination
00:11:36et genre 14 ajustements, on a déjà utilisé, qu'est-ce que c'est ?
00:11:39Environ 11 % de notre total.
00:11:40Maintenant, je pense que les ajustements sont importants.
00:11:43J'ai parlé plus tôt dans l'intro,
00:11:44quelles sont les fonctionnalités sur lesquelles on veut vraiment se concentrer
00:11:47quand il s'agit de Clod Design ?
00:11:48Parce que quand on a juste fait le tir unique,
00:11:49ce n'était pas follement différent de ce que j'ai obtenu
00:11:51avec la compétence de design front-end.
00:11:52Eh bien, ces ajustements et la possibilité de jouer
00:11:55avec toutes ces choses et ces changements subtils rapidement,
00:11:59c'est vraiment ça la puissance de Clod Design.
00:12:02Je vais donc faire un zoom arrière un peu
00:12:03pour qu'on puisse mieux voir les ajustements en action,
00:12:05mais je peux tout faire maintenant, de la palette aux accents,
00:12:10rayon de coin, grille d'arrière-plan, sans grille d'arrière-plan,
00:12:14polices, emphase, différences de titres, changements de mise en page, n'est-ce pas ?
00:12:19C'est là que réside la puissance.
00:12:21La puissance, ce n'est pas, oh, ça peut faire le design UI en un coup
00:12:23et le design UI est si bon dès le début.
00:12:25Non, c'est le fait que je puisse vraiment itérer très rapidement,
00:12:29très rapidement, c'est, pensez à la vitesse à laquelle je fais ça
00:12:33et pensez au temps qu'il faudrait
00:12:34pour faire tout ça dans Claude Code.
00:12:36Je veux dire, on peut même changer la niche
00:12:39du truc de réseau social qu'il regarde
00:12:41dans cette image, de l'IA et la technologie au jeu vidéo, à la finance.
00:12:46Dieu merci, je peux ajuster la vitesse du ticker
00:12:47parce que ce truc volait, mais ouais, c'est génial.
00:12:52C'est la première partie et je pense qu'il y a deux choses.
00:12:54Eh bien, en fait, il y en a quelques-unes de plus,
00:12:56mais les ajustements sont à mon avis la première valeur ajoutée du design
00:12:59car tout tourne autour de l'itération visuelle.
00:13:01Et à mon avis, la deuxième fonctionnalité la plus marquante
00:13:04de Clod Design est la variance des pages web.
00:13:07Donc les ajustements sont très micro, non ?
00:13:09On parle de couleurs, d'accents,
00:13:11de polices, mais que faire si je veux des variantes
00:13:14de la page de destination dans son ensemble, genre y aller à fond.
00:13:18Je ne parle pas d'une police différente,
00:13:19je parle d'un design complètement différent
00:13:21et je veux pouvoir les voir empilés.
00:13:23Encore une fois, tout comme je peux le faire avec Stitch.
00:13:25Je veux pouvoir faire ça.
00:13:26Eh bien, on peut le faire dans Clod Design
00:13:28et c'est vraiment facile.
00:13:29On va juste lui demander de faire exactement ça.
00:13:32J'ai donc demandé au design et j'ai dit,
00:13:33peux-tu maintenant créer deux variantes supplémentaires de cette page de destination
00:13:36entre lesquelles je peux cliquer et qui sont des styles radicalement différents,
00:13:39suggère-moi d'abord des styles de variantes différents.
00:13:42Il est revenu avec six options différentes pour moi.
00:13:44On peut faire terminal, style Bloomberg terminal,
00:13:48hyper-maximaliste éditorial, brutaliste, synthwave, pastel doux,
00:13:53ou journal papier.
00:13:56Allons-y, ouais, un peu comme un et deux.
00:13:59Alors je vais dire, faisons un et deux
00:14:03et évidemment gardons aussi la mise en page actuelle.
00:14:08Donc Clod Design a terminé avec une variante.
00:14:10Voici donc l'éditoriale, celle avec laquelle nous avons commencé.
00:14:13Nous avons maintenant une option terminal.
00:14:18Ainsi qu'une option éditoriale maximaliste,
00:14:21ce qui est assez intéressant, quelque chose de différent.
00:14:24Maintenant, si vous ne lui dites pas de le faire,
00:14:25il ne fera que les ajustements pour l'original.
00:14:28Donc, quand vous faites ces variantes,
00:14:30je pense que le flux de travail général devrait être,
00:14:33c'est que vous commencez d'abord par les variantes.
00:14:35Donc, au niveau macro, vous vous dites, ok,
00:14:37je veux un peu aller dans cette direction.
00:14:39Et une fois que vous avez choisi l'une de ces options macro,
00:14:42disons qu'on a décidé de garder ce qu'on aime,
00:14:44alors vous passeriez à l'étape très agressive des ajustements.
00:14:47Comme ça, vous pouvez voir un peu tout
00:14:49et vous concentrer sur ce que vous voulez.
00:14:51Parce qu'avec la façon dont l'utilisation est configurée maintenant,
00:14:54si vous allez en macro et vous dites,
00:14:56je ne veux pas juste trois options.
00:14:57Je veux quatre, cinq variantes et je veux des ajustements sur toutes.
00:15:00Vous allez juste épuiser votre utilisation.
00:15:02Parce qu'ajouter ces deux variantes, maximaliste et terminal,
00:15:04c'était 5 % de plus.
00:15:05Donc ça nous amène à environ,
00:15:07je pense qu'on est à 17 % maintenant pour la page de destination,
00:15:11deux variantes de la page de destination plus les ajustements.
00:15:13Et je sais que je continue de rabâcher sur l'utilisation,
00:15:14mais pour beaucoup de gens, c'est une grosse affaire
00:15:16et ça devrait l'être.
00:15:17Je pense qu'à l'avenir,
00:15:18cela changera probablement tout le truc de l'utilisation,
00:15:19mais gardez-le juste à l'esprit.
00:15:20Et donc avec ces deux choses par vous en tandem,
00:15:23cette variance vers les ajustements,
00:15:26c'est ce qui nous permet d'arriver à une solution à 80 %, une solution à 90 %.
00:15:31Maintenant, je peux devenir encore plus hyper-concentré là-dessus.
00:15:35Nous pouvons aller ici, comme je vous l'ai montré au début.
00:15:37Nous pouvons faire des modifications.
00:15:39Donc je peux cliquer sur cet en-tête.
00:15:42Je peux changer l'opacité.
00:15:43Je peux changer la largeur, la couleur, tout ça.
00:15:45Donc on peut être vraiment très précis si on veut,
00:15:47mais la vraie puissance vient du fait d'atteindre cette solution à 90 %,
00:15:50en se disant : ok, j'aime bien la première version éditoriale.
00:15:54J'aime que l'accent soit mis sur la marque,
00:15:55en fait, ce cercle a l'air terrible, sur la marque.
00:15:59J'aime ce sous-titre spécifique, ce titre, peu importe.
00:16:04Et ensuite se dire : très bien, on va partir là-dessus.
00:16:05On aime les ajustements.
00:16:06Maintenant, finissons le reste de la page d'accueil,
00:16:09car ce n'est que la section principale.
00:16:11Et ensuite, ce que vous faites, c'est que vous exportez cela vers Claude Code.
00:16:14Vous transmettez cela à Claude Code.
00:16:15Quand je clique ici, vous avez quelques options.
00:16:17Vous pouvez télécharger le zip ou simplement copier cette commande
00:16:20et vous l'amenez dans Claude Code.
00:16:22Et je pense que ce genre de flux de travail est infiniment plus rapide
00:16:25que d'être ici, ce que Claude Code nous a donné
00:16:28avec exactement la même consigne.
00:16:29Je veux dire, ok, très bien, Claude Code,
00:16:32jouons avec la couleur maintenant.
00:16:35Faisons quelques variantes.
00:16:36Jouons avec le titre maintenant et faisons quelques variantes.
00:16:39Cela peut prendre des heures, alors que cela a pris des minutes.
00:16:44Et au moins pour moi, j'ai besoin de voir les choses
00:16:47et j'ai besoin de voir plusieurs options
00:16:48avant de voir ce qui me plaît vraiment.
00:16:50Et mieux encore, il y a de fortes chances qu'une fois que j'aurai vu quelque chose,
00:16:53je puisse le changer.
00:16:54Parce que pour être honnête, s'ils voient ça,
00:16:54j'aime assez cette version très verticale.
00:16:56Peut-être qu'on met des icônes ici ou autre chose.
00:16:58Je veux juste itérer.
00:17:00Je veux juste voir des choses différentes.
00:17:02Ce sont les deux meilleures pratiques que je puisse vous donner
00:17:05en ce qui concerne la partie application web de tout ça.
00:17:08En macro, demandez des variantes.
00:17:11Et ensuite en micro, demandez plus d'ajustements.
00:17:13La seule chose que nous n'avons pas faite ici,
00:17:15et nous le montrerons avec des éléments comme le diaporama
00:17:18et ce genre de choses,
00:17:19c'est lui demander d'exécuter essentiellement son propre mode plan.
00:17:22Nous lui avons donné la consigne et tout de suite,
00:17:24il nous l'a recraché.
00:17:25Ce que nous aurions pu faire à la place, c'est dire :
00:17:26hé, je voudrais faire un mode plan avec toi.
00:17:28Je veux que tu me poses plein de questions.
00:17:30Et à la place, il vous fera passer
00:17:32par un nombre important de questions,
00:17:33cinq, huit, dix questions sur :
00:17:35ok, que voulez-vous ici ?
00:17:36Que voulez-vous là ?
00:17:37Que voulez-vous là ?
00:17:38De cette façon, vous n'avez pas besoin de faire autant d'itérations
00:17:40et en fin de compte, cela vous fait économiser de l'usage.
00:17:42Et j'ai suivi ce même genre de flux
00:17:44lorsque je créais le front-end
00:17:46pour mon tableau de bord d'agentique OS.
00:17:47Vous pouvez voir ici en haut,
00:17:48c'est ce avec quoi j'ai commencé à l'origine.
00:17:51Et ensuite, j'ai pu passer en revue
00:17:52toutes ces différentes options.
00:17:53J'ai finalement opté pour celle-ci, celle du cockpit,
00:17:56bien que j'aie pensé à faire celle-ci avec le petit sprite sympa.
00:17:58Et ensuite, j'ai juste ramené cette version dans Claude Code
00:18:01et j'ai fait des ajustements mineurs sur les marges
00:18:03et je l'ai connectée.
00:18:04Donc, c'était une vraie application web.
00:18:06Maintenant, faisons Claude Design et le diaporama.
00:18:08Nous allons passer cela un peu plus vite
00:18:09car beaucoup des principes fondamentaux que nous avons vus
00:18:13pour les applications web s'appliquent aussi aux diaporamas.
00:18:16Donc, je ne vais pas m'attarder sur ces points.
00:18:17Et cette fois, nous montrerons le système de design à l'œuvre.
00:18:21Et rappelez-vous que ce système est basé sur les visuels
00:18:24de notre système d'exploitation agentique.
00:18:26Donc nous allons cliquer sur créer.
00:18:27Et que voyons-nous ?
00:18:28La même configuration qu'avant.
00:18:30Et quelque chose qui vous demande de fournir du contexte,
00:18:32que ce soit des captures d'écran, des bases de code ou des fichiers Figma.
00:18:35Maintenant, le seul contexte que nous allons lui donner
00:18:37est le système de design qui est déjà là.
00:18:39Ainsi qu'une consigne disant :
00:18:41nous voulons un diaporama qui parle des différences
00:18:45entre Claude Design et Google Stitch.
00:18:48Et j'avais Opus 4.7 dans une autre fenêtre avec Claude Code,
00:18:53pour trouver la consigne.
00:18:54Donc j'ai dû faire une recherche web.
00:18:55Ok, voici les différences entre les deux.
00:18:57Maintenant, à la fin, j'ai écrit : avant de construire quoi que ce soit,
00:19:01pose-moi toutes les questions que tu as.
00:19:02Pour que nous soyons sur la même longueur d'onde.
00:19:05Donc dans un sens, nous le forçons presque
00:19:07à faire une sorte de mode plan.
00:19:08Et vous voyez cela se remplir ici.
00:19:10Encore une fois, vous pouvez avoir ce mode plan forcé
00:19:12qui peut tout à fait se produire avec les applications web aussi.
00:19:14Assurez-vous juste de l'inclure dans la consigne initiale.
00:19:16Alors, pour qui est ce diaporama ?
00:19:18Disons pour une conférence publique.
00:19:20On va dire, on va rester court et simple.
00:19:24Mettons à six, on fera cinq minutes.
00:19:28On fera cinq diapositives.
00:19:30On fera un style légèrement orienté, titre, pièce centrale.
00:19:34On dira seulement une carte de positionnement deux par deux.
00:19:37Appel de prix, oui.
00:19:39Et ensuite, nous parcourrons le reste.
00:19:43Pas de notes.
00:19:44Donc, en tout, il nous demande une, deux, trois, quatre, cinq,
00:19:47six, sept, huit, neuf, dix, onze, douze, treize, quatorze questions.
00:19:52Plus, vous savez, une petite question fourre-tout en bas,
00:19:56que j'aime vraiment beaucoup.
00:19:58Encore une fois, le mode plan de Claude Code fait parfois,
00:20:00je dirais tout au plus, quelques,
00:20:03deux itérations de quatre questions chacune.
00:20:05Donc c'est super.
00:20:06Et voici un aperçu du diaporama.
00:20:07Je l'ai mis en plein écran et pour référence,
00:20:10cela a pris 5 % de notre usage.
00:20:12Soit environ 1 % par diapositive.
00:20:15Donc nous avons la page de titre, une petite note de bas de page sur le fait
00:20:19que le diaporama a été généré par Claude Design.
00:20:22Nous avons les chiffres, vous savez, où ils se situent.
00:20:26On a une sorte de graphique montrant où ils se situent
00:20:30en termes de coût.
00:20:31Évidemment, Claude Design étant beaucoup plus cher.
00:20:34Rapport de terrain.
00:20:37Et ensuite, il nous donne une sorte de,
00:20:38hé, voici un petit graphique montrant
00:20:40ce que vous devriez utiliser pour quel cas d'usage.
00:20:43Donc je trouve que le diaporama a l'air vraiment cool,
00:20:45pour être honnête avec vous.
00:20:46Mais plus important encore que cela,
00:20:48il a respecté le système de design.
00:20:49Cet OS agentique sur lequel tout le système de design a été construit
00:20:53est définitivement reflété dans le diaporama.
00:20:55Ces deux choses ont l'air de venir du même endroit.
00:20:59Et tout comme avec l'application web,
00:21:00nous pouvons suivre le même flux de travail.
00:21:03C'est ce qu'il nous a donné à l'origine.
00:21:05Maintenant, nous pouvons demander des variantes macro et dire,
00:21:07ok, voulions-nous vraiment nous en tenir, vous savez,
00:21:09à notre système de design ?
00:21:11Ou voulons-nous aller dans une direction entièrement différente ?
00:21:13Ok, nous voyons, vous savez, deux, trois, quatre variantes différentes.
00:21:16Très bien, concentrons-nous sur une.
00:21:17Et maintenant, apportons les ajustements
00:21:19et peaufinons vraiment ce truc.
00:21:20Et c'est un peu comme ça que je pense
00:21:22que vous devriez aborder le diaporama.
00:21:23De la même manière que nous abordons les applications web.
00:21:24Maintenant, pour référence, voici le diaporama
00:21:27que Claude Code nous a produit.
00:21:29Je lui ai donné exactement la même consigne
00:21:31et j'ai créé cela à partir du même répertoire,
00:21:34le système d'exploitation agentique en direct.
00:21:36Donc il avait un accès complet au même système de design,
00:21:38pour ainsi dire.
00:21:39En plus de cela, je lui ai aussi demandé de me poser des questions.
00:21:42Il ne m'en a posé que sept.
00:21:43Et les questions, pour être honnête, n'étaient pas aussi bonnes.
00:21:46Elles sont un peu plus superficielles
00:21:47en termes de, eh bien, nombre de diapositives.
00:21:49Et quel rapport d'aspect voulez-vous
00:21:51par rapport à ce que nous avons vu dans le design ?
00:21:52Et je pense que cela se reflète dans l'ensemble,
00:21:55un résultat beaucoup plus fade.
00:21:57Et je suis un peu surpris qu'il ne soit pas plus proche
00:22:00en termes de style visuel par rapport à ce que le design nous a donné.
00:22:02Je veux dire, ce n'est pas mauvais.
00:22:05Les couleurs sont proches, le texte est proche,
00:22:07mais je veux dire, soyons sérieux.
00:22:10Ce genre de truc l'éclate totalement
00:22:12si on veut être honnête.
00:22:13Enfin, parlons du design d'application mobile.
00:22:15Et vous avez deux options ici.
00:22:17Un, vous allez directement sur mobile.
00:22:19Vous ne faites rien concernant l'application web.
00:22:21Et c'est assez simple.
00:22:22Vous allez juste faire ce que nous avons fait avec la partie application web
00:22:25au début de cette vidéo.
00:22:26Et vous allez juste dire au début :
00:22:28c'est pour une application mobile.
00:22:29Assurez-vous que les visuels reflètent cela.
00:22:32Mais si vous prenez une application web
00:22:33et que vous voulez ensuite traduire cela sur une plateforme mobile,
00:22:35c'est assez simple.
00:22:36Bien que nous puissions rester dans cette fenêtre de consigne où nous sommes,
00:22:40en fait, ok, maintenant montre-le-moi sur mobile.
00:22:42Il est probablement plus logique d'avoir un projet séparé
00:22:45avec exactement les mêmes choses en cours.
00:22:46Mais maintenant, nous avons une distinction claire
00:22:48entre l'application web sur laquelle nous travaillons et le mobile.
00:22:51Et donc pour ce faire, vous allez juste aller en haut à droite
00:22:53là où c'est écrit partager.
00:22:54Et ensuite, vous allez cliquer sur dupliquer le projet.
00:22:57Une fois que vous faites cela, il vous emmènera sur une page comme celle-ci.
00:23:00Mais si vous retournez à la page d'accueil,
00:23:02nous pouvons maintenant voir qu'il y a un remix de démo CD.
00:23:05Et ce remix est le projet dupliqué.
00:23:08Et donc maintenant, je vais juste lui dire :
00:23:10peux-tu me montrer le même design dans un format mobile ?
00:23:13Et voici les versions mobiles qu'il nous a données.
00:23:15Il a continué et créé des variantes des trois.
00:23:18Je ne l'ai pas spécifié, mais il l'a fait.
00:23:19Donc il nous a donné essentiellement neuf maquettes
00:23:21et le coût total était de 5 % d'usage.
00:23:25Donc le même flux que d'habitude.
00:23:27Il nous a donné la macro juste ici.
00:23:29Donc nous choisirions celle que nous aimions,
00:23:30évidemment ce serait celle que vous aviez décidée pour votre application web.
00:23:32Et ensuite à partir de là, nous dirions :
00:23:34hé, j'aime la version éditoriale.
00:23:36Maintenant, propose-moi plein d'ajustements pour que je puisse vraiment clouer ça.
00:23:38Mais à vrai dire,
00:23:39si vous avez tout configuré sur la version application web,
00:23:42il y a de fortes chances que vous ayez déjà fait les ajustements.
00:23:44Donc il ne devrait pas y avoir grand-chose
00:23:47que vous ayez besoin de changer à ce stade.
00:23:48Mais il y a toujours un petit truc,
00:23:51vous rencontrez toujours des problèmes lorsque vous passez d'une application web standard
00:23:53à un design mobile.
00:23:55Mais comme vous le voyez ici, c'est vraiment facile à faire,
00:23:57juste une seule consigne.
00:23:58C'est donc là que je vais vous laisser les gars pour aujourd'hui.
00:23:59J'espère avoir réussi à éliminer les différences
00:24:02entre Claude Design et Claude Code,
00:24:04en mettant particulièrement en évidence les fonctionnalités
00:24:06qui nous font vraiment gagner de l'argent dans Claude Design,
00:24:09à savoir les ajustements et les variantes.
00:24:11Et ce que cela nous achète vraiment, c'est la vitesse d'itération.
00:24:15Je peux passer en revue une tonne de versions différentes
00:24:17de ce que j'essaie de créer
00:24:19pour pouvoir enfin atterrir sur quelque chose qui me plaît.
00:24:21Et une fois que je l'ai fait,
00:24:22alors je l'intègre dans l'écosystème Claude Code.
00:24:25Et j'espère avoir réussi à rendre les coûts d'utilisation
00:24:27un peu plus clairs en mentionnant les pourcentages que nous avons perdus
00:24:31après chaque itération et création.
00:24:33Donc comme toujours, dites-moi ce que vous en avez pensé.
00:24:35Soyez certainement à l'affût de plus de matériel Claude Design
00:24:38parce que je pense que c'est un outil super cool.
00:24:40Assurez-vous de consulter Chase AI+
00:24:42si vous voulez mettre la main sur la Masterclass Claude Code,
00:24:45et je vous dis à bientôt.