00:00:00Alors, les mises à jour ne s'arrêtent jamais.
00:00:02Anthropic vient de sortir Claude Design,
00:00:05qui nous offre désormais une interface pour créer des applications web,
00:00:09des sites web, à peu près tout ce que nous voulons
00:00:11via l'interface de Claude.
00:00:13C'est leur version de Google Stitch.
00:00:16Et comme vous pouvez le voir dans cette vidéo de démonstration,
00:00:18il s'agit de vous donner la possibilité de tout peaufiner,
00:00:21du macro au micro, avec ces designs.
00:00:23Et nous ne parlons pas seulement d'applications web,
00:00:25nous parlons également de designs mobiles.
00:00:27Et c'est assez drôle parce que quand on parle
00:00:28d'Anthropic et de Claude Code,
00:00:30l'une de ses plus grandes faiblesses est le design front-end.
00:00:32Alors voir qu'ils sortent maintenant
00:00:34une application complète
00:00:36qui gère cette faiblesse est plutôt cool.
00:00:39Dans cette vidéo, je vais vous montrer comment ça fonctionne.
00:00:41Nous allons faire une démo rapide
00:00:42pour que vous puissiez vous y plonger vous-même.
00:00:43Claude Design a été créé avec Opus 4.7 en tête
00:00:46et il est disponible si vous avez un abonnement
00:00:49allant de Pro Max à Enterprise.
00:00:51Et cela fait tout, des prototypes aux maquettes,
00:00:53jusqu'aux présentations PowerPoint.
00:00:54Et c'est quelque chose que nous pouvons exporter vers des outils
00:00:57comme Microsoft PowerPoint ou envoyer vers Canva.
00:00:59L'un des aspects les plus cools est le design de marque.
00:01:01Vous pouvez lui donner une base de code,
00:01:03disons celle de votre site web,
00:01:05et il extraira tous les éléments de marque du site
00:01:09pour faire correspondre les couleurs et la typographie
00:01:11au design sur lequel vous travaillez.
00:01:12Pour commencer, rendez-vous simplement sur claud.ai/design
00:01:15et cela vous mènera à une page qui ressemble à ceci.
00:01:18Sur la gauche, nous avons tout de suite plusieurs options :
00:01:20prototypes, présentation, modèles ou autre.
00:01:23Ici, en bas, comme je l'évoquais,
00:01:25nous avons la possibilité de créer un design system.
00:01:27Si je vais dans "configurer le design system",
00:01:29je peux lui donner, par exemple, le nom de mon entreprise,
00:01:33puis je peux fournir des exemples de mon design system.
00:01:36Ce n'est pas obligatoire,
00:01:38mais cela aidera si vous avez déjà quelque chose
00:01:40à quoi vous essayez de correspondre.
00:01:41Vous pouvez lui donner le lien vers votre GitHub.
00:01:43Vous pouvez même faire glisser le dossier.
00:01:45Si vous avez la base de code sur votre ordinateur,
00:01:48vous pouvez la faire glisser ici,
00:01:49ou simplement ajouter les polices, logos et ressources,
00:01:51ainsi que toute autre note.
00:01:52Ce que j'ai fait, c'est sélectionner le dossier sur mon ordinateur
00:01:55contenant les ressources de mon site web,
00:01:57puis j'ai cliqué sur "continuer vers la génération".
00:01:59Quand vous faites cela, surtout avec une grosse base de code,
00:02:01d'abord, il ne va pas charger toute la base de code.
00:02:03Il va identifier quels fichiers sont réellement pertinents.
00:02:05Et deuxièmement, vous aurez une fenêtre contextuelle indiquant :
00:02:07"Hé, cela peut prendre 15 à 20 minutes",
00:02:09pendant qu'il parcourt tous vos fichiers.
00:02:11Maintenant, si vous voulez partir de zéro,
00:02:12c'est tout à fait possible aussi.
00:02:13Nous allons donc commencer un nouveau prototype.
00:02:16Nous l'appellerons "Démo Chase".
00:02:17Nous avons deux options.
00:02:18Soit un simple fil de fer (wireframe),
00:02:20soit passer directement à une maquette haute fidélité.
00:02:23Nous allons choisir la maquette.
00:02:25Cela va vous mener à cette page.
00:02:26Et là encore, on ressent vraiment l'influence de Stitch.
00:02:28Je vais lui dire :
00:02:29"Concevons un graphique interactif en mode sombre
00:02:31montrant comment la culture circule entre les villes,
00:02:33un globe en rotation avec les villes reliées par des chemins lumineux."
00:02:35C'est exactement ce qu'ils ont fait dans la démo,
00:02:37mais je suis curieux de voir si ce que nous obtenons
00:02:40correspond réellement à ce qu'ils ont montré dans la vidéo,
00:02:43et quelles sortes de différences nous allons observer.
00:02:45À quel point ont-ils survendu le produit dans leur pub ?
00:02:47On va donc lancer la génération.
00:02:48Au passage, vous pouvez voir ici,
00:02:50que nous pouvons aussi choisir le modèle.
00:02:52On peut joindre des fichiers.
00:02:53On peut utiliser la voix et importer ce que l'on veut.
00:02:55Immédiatement, il commence à nous poser des questions,
00:02:57ce que j'apprécie beaucoup.
00:02:58C'est presque similaire au mode "plan" dans Claude Code.
00:03:02Alors, quel type de culture ?
00:03:04Choisissons un style de globe mixte.
00:03:07Prenons, voyons, ce chemin de flux.
00:03:13Ça a l'air cool.
00:03:14Que voulons-nous comme palette de couleurs ?
00:03:16Prenons multi-teintes.
00:03:18Et j'adore le fait
00:03:20que nous ayons maintenant ces suggestions.
00:03:21Dans Stitch, je n'aurais pas vraiment ça.
00:03:24Ailleurs, je n'aurais pas vraiment ça non plus.
00:03:26L'un des aspects les plus puissants de Claude Code,
00:03:29et nous en avons parlé dans d'autres cours de web design,
00:03:31est d'avoir cet échange
00:03:33pour identifier les points morts de notre projet.
00:03:37Et le fait qu'il me pose toutes ces questions est énorme.
00:03:39Il m'en pose même pas mal.
00:03:40Même le mode plan normal de Claude Code n'en pose que trois.
00:03:43Alors, faire glisser pour pivoter.
00:03:45Quelles villes devrions-nous mettre en avant ?
00:03:47Prenons le top 10.
00:03:49Quel niveau d'interface ?
00:03:50Prenons un tableau de bord complet.
00:03:53Ambiance générale.
00:03:54Allons sur du style éditorial.
00:03:58On reste sur l'éditorial.
00:04:00Qu'est-ce qui devrait être ajustable ?
00:04:02Oh, on va choisir la palette de couleurs du flux.
00:04:07Je vais lui demander de gérer trois choses.
00:04:08Continuons.
00:04:09Puis sur la gauche, une fois ces questions répondues,
00:04:11il affiche sa progression.
00:04:12Encore une fois, c'est similaire à ce qu'on verrait dans Claude Code
00:04:15si on le mettait en mode plan pour qu'il travaille.
00:04:17Et soit dit en passant, c'est évidemment quelque chose
00:04:19que vous devez faire sur l'application web.
00:04:22Ce n'est pas disponible dans le terminal
00:04:24pour des raisons évidentes liées à la nature graphique.
00:04:27Et d'après ce que je lis,
00:04:29je ne pense pas que ce sera un jour implémenté
00:04:30dans l'application de bureau, ou peut-être un jour.
00:04:33Mais pour l'instant, il faut passer par Claude.ai.
00:04:35Pendant que ça génère,
00:04:36parlons de certaines questions que vous pourriez vous poser,
00:04:38comme : en quoi est-ce différent
00:04:39de donner simplement ce prompt ici
00:04:41dans la fenêtre de chat ou d'ouvrir Claude Code
00:04:43et de dire simplement : hé, je veux
00:04:45que tu construises ce truc interactif.
00:04:47Et de le laisser, vous voyez,
00:04:48créer une sorte d'application web à partir de ça.
00:04:50La réponse est, si on est très réducteur : rien du tout.
00:04:54Au final, il se contente d'écrire du code.
00:04:55Ce sera la même chose.
00:04:56La différence est — et encore une fois,
00:04:58si vous avez fait du design front-end un tant soit peu,
00:05:00même s'il ne s'agit que d'une simple page de destination,
00:05:02vous comprenez le pouvoir de pouvoir
00:05:04voir ces choses visuellement et de les comparer.
00:05:05C'est pour ça que Google Stitch est si cool,
00:05:08parce que ce qui est génial avec Stitch,
00:05:09ce n'est pas forcément la philosophie de design,
00:05:11même si je pense qu'elle est très bonne.
00:05:12C'est le fait d'avoir une interface utilisateur
00:05:13où je peux voir visuellement un tas d'options
00:05:15et les éditer de cette manière.
00:05:17Et quand ça me plaît, je l'intègre au code.
00:05:18Quand on fait tout en commençant par le code,
00:05:20du point de vue du design, c'est difficile.
00:05:22C'est un peu laborieux.
00:05:23C'est assez dur de prendre un support visuel
00:05:26et de le traduire en langage naturel,
00:05:28qui devient du code,
00:05:29qui devient un visuel, et de vraiment viser juste,
00:05:32surtout au début.
00:05:33J'ai besoin de voir les choses visuellement.
00:05:34En tout cas pour moi, j'ai besoin de voir des options.
00:05:36Et donc, avoir ça est génial.
00:05:38C'est un grand pas en avant pour Anthropic et Claude Code
00:05:41car c'était un vrai point faible.
00:05:42C'est pour ça que vous voyez des applications comme Pencil
00:05:45devenir si populaires,
00:05:46parce qu'elles vous donnent ce support visuel
00:05:48pour gérer ce genre de choses.
00:05:49Aussi, petite note, comme vous pouvez le voir ici,
00:05:51ce sont des applications à part entière.
00:05:53C'est essentiellement du prototypage.
00:05:55Vous pouvez avoir ces choses appelées API.
00:05:58Vous devriez davantage voir cela,
00:06:00pas seulement comme un outil de design visuel à la Canva.
00:06:03Vous devriez plutôt y penser
00:06:04en termes de Google Studio,
00:06:05un peu comme le style Google AI Studio.
00:06:07Voici donc ce qu'il a produit.
00:06:08Il est parti sur un style éditorial.
00:06:10On peut voir le globe juste ici.
00:06:12Je peux le faire pivoter avec la souris.
00:06:14On peut régler la vitesse de rotation, l'intensité de la lueur,
00:06:18changer la palette.
00:06:19C'est plutôt sympa.
00:06:21Et puis il y a des petits textes explicatifs sur le côté.
00:06:25Parlons maintenant de la possibilité de modifier ce truc.
00:06:27Tout d'abord, nous avons ce petit menu de réglages en haut.
00:06:30Ces réglages concernent simplement la vitesse de rotation
00:06:33et tout le reste.
00:06:34Je peux laisser des commentaires, éditer, dessiner.
00:06:37Et nous pouvons aussi passer
00:06:39en plein écran pour voir le rendu réel.
00:06:41C'est assez intéressant en plein écran.
00:06:42C'est d'ailleurs bien meilleur comme ça.
00:06:44Mais disons que je veuille faire une modification.
00:06:46Évidemment, on pourrait juste retourner dans la fenêtre
00:06:49et lui donner un nouveau prompt.
00:06:50Mais si je vais dans "éditer", je peux être beaucoup plus précis.
00:06:55Cela me rappelle un peu l'éditeur de Cursor
00:06:58ou même quelque chose comme Lovable.
00:06:59Je peux carrément sélectionner les villes individuellement.
00:07:04Si je sélectionne le globe dans son ensemble, il s'affiche ici.
00:07:07Et je peux changer des choses comme la couleur.
00:07:11C'est affreux comme ça... la hauteur et tout ça.
00:07:14J'ai donc la possibilité d'être très, très spécifique
00:07:16sur ce que je veux changer, ce qui est encore une fois génial.
00:07:18C'est mieux que de dire par écrit :
00:07:19"Hé, je veux changer la taille de ceci."
00:07:21Ici, je peux juste le sélectionner et le modifier directement.
00:07:24On peut aussi ajouter des commentaires.
00:07:25Je peux cliquer sur n'importe quel élément.
00:07:27C'est comme l'édition, mais au lieu de changer
00:07:29ces chiffres spécifiques,
00:07:31je peux cliquer sur le globe et laisser un commentaire du genre :
00:07:34"Peut-on agrandir le globe ?"
00:07:37Envoyer à Claude.
00:07:40Et cela crée une file d'attente de commentaires.
00:07:41Si vous ne voulez pas l'envoyer tout de suite à Claude,
00:07:43vous pouvez le faire à n'importe quel moment
00:07:45et il commencera à travailler.
00:07:46En plus de ça, on peut aussi dessiner.
00:07:48Je peux me dire : "Bon, eh bien,
00:07:50je veux juste une lune par ici."
00:07:52Mettons une lune.
00:07:53Je veux voir, genre, Artemis 2 voler autour par là.
00:07:56Des trucs comme ça.
00:07:56Ensuite, on a aussi le fichier de conception ici.
00:07:58Vous pouvez donc jeter un œil
00:08:00au code sous le capot.
00:08:02Et enfin, nous avons la possibilité d'exporter
00:08:04et de partager cette création.
00:08:05Si je clique sur exporter, je peux la télécharger en .zip.
00:08:07L'exporter en PDF, PowerPoint, ou l'envoyer vers Canva.
00:08:11Ou, ce qui est aussi super cool, je peux passer le relais
00:08:13à Claude Code.
00:08:14Il me donne la commande pour importer ça
00:08:15dans Claude Code, ce qui est génial.
00:08:17C'est là-dessus que je vais vous laisser pour aujourd'hui.
00:08:18Je sais que c'était un peu rapide,
00:08:19mais je voulais juste vous montrer
00:08:21comment naviguer là-dedans et ce qui est possible.
00:08:23Attendez-vous à une analyse approfondie d'ici un jour ou deux,
00:08:26pour vous montrer comment en tirer le maximum.
00:08:29Comme toujours, dites-moi ce que vous en avez pensé.
00:08:31Si vous voulez accéder à la Chase AI Masterclass,
00:08:33c'est dans les commentaires épinglés, et je vous dis à bientôt.