00:00:00Le code de Claude est nul en design front-end et c'est votre faute,
00:00:04mais c'est un problème qu'on peut résoudre avec une simple feuille de route.
00:00:07Il suffit de savoir où vous allez.
00:00:09Et dans cette vidéo,
00:00:10je vais détailler les sept niveaux du design front-end
00:00:13conception front-end et expliquer ce à quoi vous pouvez vous attendre à chaque
00:00:16niveau, les pièges à éviter,
00:00:18et ce que vous devez faire pour passer au suivant.
00:00:21Et d'ici la fin,
00:00:22vous aurez un processus simple et reproductible pour créer
00:00:25des designs front-end avec Claude qui ne soient pas encore
00:00:28un modèle générique et ennuyeux.
00:00:30Notre étude de cas pour la vidéo d'aujourd'hui sera notre fausse
00:00:33application web SaaS nommée Argus.
00:00:36Argus sera une application de veille sur les réseaux sociaux.
00:00:41En gros, un endroit où les créateurs de contenu ou
00:00:43n'importe qui peuvent aller pour trouver les sujets tendance dans leur niche.
00:00:48Et c'est à travers Argus
00:00:49que nous allons parcourir tout le processus en sept niveaux.
00:00:52Commençons donc par le niveau un.
00:00:53Malheureusement, beaucoup de gens sont bloqués ici.
00:00:55C'est juste vous et un prompt.
00:00:57Vous ouvrez Claude Code et vous allez juste
00:00:59dire quelque chose comme : « Hé,
00:01:01créons une page d'accueil pour Argus,
00:01:02mon appli web de veille sociale pour que
00:01:05les créateurs identifient les sujets tendance dans
00:01:08leur niche. » Maintenant,
00:01:09même si je fais ça et que j'utilise le mode plan,
00:01:12ce qu'on va obtenir sera quelque chose de très générique.
00:01:15Pourquoi ? Parce qu'on ne lui a donné aucune direction artistique.
00:01:18Et on compte sur Claude pour combler les lacunes
00:01:20sur ce qui est esthétique.
00:01:22On entend souvent que l'IA n'a pas de goût, c'est vrai,
00:01:26mais en fait, la plupart des gens n'ont pas de goût non plus.
00:01:28Et à cause de ce problème,
00:01:31ils ne peuvent pas l'articuler à Claude, n'est-ce pas ?
00:01:33Si vous ne savez pas ce qui est bien,
00:01:35comment Claude est-il censé le deviner ?
00:01:37Donc, c'est ici, au niveau le plus bas, qu'on doit
00:01:39commencer à maîtriser quelques compétences.
00:01:41Ces trois compétences sont : écrire des prompts descriptifs,
00:01:43spécifier les frameworks et comprendre ce que sont
00:01:46ces frameworks,
00:01:46puis commencer à se forger un vocabulaire de base en design.
00:01:50En utilisant simplement le mode plan dans ce processus,
00:01:53vous allez commencer à acquérir ces compétences car
00:01:55il va vous poser des questions comme : quel stack technique
00:01:57voulez-vous pour cette page d'accueil ?
00:01:58Next JS, HTML pur, Astro ?
00:02:00Vous n'aurez aucune idée de ce que tout cela signifie,
00:02:02mais en tapant simplement une question pour demander
00:02:05ce que sont ces frameworks,
00:02:07vous allez commencer à développer une certaine compétence
00:02:11dans ce domaine. Pour les frameworks et tout ça,
00:02:13il suffit de poser des questions.
00:02:14Le mode plan va aussi vous forcer à réfléchir aux
00:02:17décisions de design et au but réel de votre site,
00:02:19car il ne suffit pas de dire : « Hé,
00:02:20je veux juste une page d'accueil pour Argus. »
00:02:21Quel est l'intérêt de tout ça ?
00:02:23Quel est le résultat concret que vous visez ?
00:02:25Dans ce cas précis,
00:02:26nous voulons une inscription sur liste d'attente et une vitrine produit.
00:02:29Ensuite, il va nous poser explicitement des questions
00:02:32sur le style. Et tout de suite, vous savez,
00:02:35ces styles visuels qu'il va vous proposer
00:02:38sont encore génériques : sombre et techno, propre et minimaliste...
00:02:41D'accord ?
00:02:42Ce n'est pas assez spécifique pour obtenir les résultats voulus.
00:02:45C'est là que tout le monde s'arrête.
00:02:47Et c'est pourquoi tout a l'air si générique.
00:02:49Donc pour nous, on va choisir propre et minimaliste,
00:02:52puis on fera juste la section héros,
00:02:53les fonctionnalités et un appel à l'action avant de valider.
00:02:55Vous vous dites sûrement : « Si tout ça est basique,
00:02:58comment vais-je vraiment écrire des prompts descriptifs et »
00:03:01« me construire ce vocabulaire de base en design ? »
00:03:03Eh bien, honnêtement,
00:03:04ça va juste demander du temps et de l'expérience.
00:03:06Plus vous serez exposé à,
00:03:09encore une fois, ce qui est bien, des designs front-end créatifs,
00:03:12plus vous allez assimiler ces choses.
00:03:13On en reparlera plus en détail dans les niveaux suivants.
00:03:16Voyons donc ce qu'il nous a construit... Oh, mon Dieu, c'est de la bouillie d'IA.
00:03:20C'est hideux, non ? C'est le comble du générique.
00:03:24On a même les dégradés violets,
00:03:27que l'IA adore absolument pour une raison inconnue. Alors, que s'est-il passé ?
00:03:30Qu'est-ce qui a cloché ? Même avec le mode plan, on a eu ça.
00:03:32La vérité, c'est que, comme vous le savez déjà,
00:03:35Claude et l'IA en général,
00:03:37ne sont pas les meilleurs en design front-end.
00:03:38Et si vous lui donnez des prompts
00:03:42peu descriptifs et ennuyeux, voilà le genre de résultat que vous aurez.
00:03:44Et pourtant, c'est ce qu'on a tendance à voir partout,
00:03:46à quelques détails près. Alors, que peut-on faire ?
00:03:48Comment sortir du niveau un et de cet enfer du design ?
00:03:51Mais avant cela,
00:03:52un petit mot de votre sponsor préféré : moi-même.
00:03:55Je viens de sortir la Masterclass Claude Code,
00:03:58il y a peu de temps.
00:03:59C'est l'endroit idéal pour passer de zéro à développeur IA,
00:04:02surtout si vous ne venez pas d'un milieu technique.
00:04:04Je la mets à jour chaque semaine. Et depuis sa sortie,
00:04:07nous avons déjà ajouté plus d'une heure de nouveau contenu et mis à jour
00:04:10plus de 20 modules. Donc si vous voulez mettre la main dessus,
00:04:13vous pouvez la trouver dans Chase AI.
00:04:14De plus, il y a un lien vers cela dans le commentaire épinglé,
00:04:17mais si vous débutez totalement avec l'IA,
00:04:18c'est peut-être un peu trop d'un coup.
00:04:19N'oubliez pas de consulter la communauté gratuite Chase AI.
00:04:22Il y a un lien dans la description.
00:04:24Bon, pour passer au niveau deux,
00:04:25nous devons donner à Claude une éducation au design.
00:04:28C'est là que nous commençons à introduire des compétences.
00:04:30C'est là que nous apportons des prompts spécialisés externes
00:04:33qui expliquent à Claude comment mieux designer.
00:04:36Ces compétences sur lesquelles nous comptons, comme « front end design skill »
00:04:39et « UI UX pro max skill », vont faire le plus gros du travail pour nous.
00:04:41Elles vont injecter dans Claude ces prompts
00:04:42qui disent : « Hé, si tu crées une page web dans ce secteur, »
00:04:45« voici le genre de choses que tu devrais rechercher. »
00:04:49« Voici une liste de toutes les techniques de design de bouillie d'IA, »
00:04:51« évite-les. »
00:04:55En gros, ça va doper nos prompts.
00:04:56Même si on arrive avec quelque chose d'assez médiocre.
00:04:58Et voici un aperçu de cette compétence UI UX pro max.
00:05:00C'est un repo open source sur GitHub avec 52 000 étoiles.
00:05:03On peut aller dans le dossier « skills » et voir
00:05:07comment tout est configuré. Si on veut regarder,
00:05:09ce ne sont que des prompts textuels, une série de prompts
00:05:12qui servent de liste de contrôle pour Claude afin de,
00:05:15encore une fois, le sortir de ce côté générique.
00:05:17Pour qu'on ne reste pas coincés avec ça. Pour installer
00:05:19cette compétence particulière et toutes les autres du même genre,
00:05:21c'est très simple. Sur le GitHub,
00:05:23les instructions sont données juste ici.
00:05:26On fait juste « forward slash plugin marketplace »,
00:05:27on ajoute la compétence et on l'installe.
00:05:30On lance simplement ça dans le terminal de Claude Code.
00:05:32Et si c'est un peu trop déroutant, sachez
00:05:35que vous pouvez toujours copier-coller l'URL,
00:05:37la mettre dans Claude et dire : « Hé,
00:05:40j'aimerais installer cette compétence. »
00:05:41Mettons maintenant cette compétence à l'épreuve.
00:05:42J'ai chargé la compétence avec un slash.
00:05:44On peut aussi utiliser le langage naturel et dire :
00:05:46« Hé Claude, utilise la compétence UI UX pro max. »
00:05:47Et nous allons dire :
00:05:50« Je veux que tu recrées la page d'accueil avec cette compétence. »
00:05:51« Pose-moi toutes les questions nécessaires. »
00:05:54Comme pour le mode plan standard de Claude,
00:05:55il va nous poser des questions sur le style.
00:05:57Cette fois, on va suivre ses recommandations, d'accord ?
00:05:59On part sur de la typographie. Bien. Ça a l'air super.
00:06:03Et pour la couleur du bouton d'action... choisissons l'orange.
00:06:05On veut s'éloigner du violet à tout prix.
00:06:07Claude a fini la refonte. Jetons un œil.
00:06:09Voici donc la page d'accueil utilisant la compétence UI UX pro max.
00:06:12Et tout de suite, c'est une énorme amélioration, non ?
00:06:15On a enfin un vrai arrière-plan avec ce petit motif carré.
00:06:18Les boutons eux-mêmes ont une lueur subtile et changent
00:06:21même de couleur quand on passe la souris dessus.
00:06:22On a un graphique et les couleurs changent d'une section
00:06:25à l'autre. C'est donc bien, bien mieux, même si
00:06:27elle adore toujours le violet. Cela dit,
00:06:30on voit clairement que c'est fait par une IA, n'est-ce pas ?
00:06:33Ce n'est pas quelque chose qui vous époustouflerait
00:06:36en le voyant. Ça ressemble toujours à un modèle d'IA.
00:06:38Un modèle d'IA bien conçu,
00:06:40mais ça reste un modèle d'IA. Et au fond,
00:06:43c'est exactement le même site qu'avant,
00:06:46avec juste un peu de maquillage.
00:06:48Alors comment peut-on vraiment améliorer ça ?
00:06:49Comment passer du niveau deux au niveau trois ?
00:06:51Parce que ces compétences sont géniales.
00:06:52Elles apportent des notions de théorie des couleurs, de typographie,
00:06:55d'espacement et de mise en page, mais fondamentalement,
00:06:56ça reste générique.
00:06:59Et la vérité, concernant les compétences à maîtriser, c'est que
00:07:02le plus important est de savoir :
00:07:04comment évaluer ce résultat avec un œil de designer et ensuite
00:07:07transformer ces critiques en prompts ?
00:07:08C'est toujours un problème de prompt, mais le souci,
00:07:11et c'est là qu'est le piège, c'est qu'il y a
00:07:13une limite à notre description, surtout au début, non ?
00:07:16Nous manquons de connaissances pour articuler réellement les problèmes.
00:07:18J'essaie d'expliquer un support visuel et un problème visuel
00:07:21uniquement par du texte. Forcément, il y a une déperdition.
00:07:23Alors, que peut-on faire ? Eh bien,
00:07:27nous devons commencer à montrer à Claude.
00:07:27Nous devons lui montrer
00:07:31des exemples concrets de ce que nous essayons d'atteindre.
00:07:34Pour débloquer le niveau trois,
00:07:36c'est là qu'on s'éloigne des simples prompts textuels et
00:07:39qu'on passe au support visuel.
00:07:41On commence à montrer, pas seulement à dire.
00:07:44Le niveau trois est celui où vous devenez le directeur visuel.
00:07:46C'est là qu'on commence à donner à Claude
00:07:49des exemples concrets de ce que l'on vise.
00:07:52On commence à montrer, pas seulement à raconter.
00:07:54Le niveau 3, c'est là où vous devenez le directeur visuel.
00:07:56C'est là qu'on commence à donner du code à Claude,
00:07:58des exemples concrets de ce qu'on veut obtenir, d'accord ?
00:08:01Comme ça, on ne se repose plus uniquement sur le texte et les compétences.
00:08:03On va désormais utiliser le texte, les compétences et des exemples visuels.
00:08:07C'est un déblocage majeur pour deux raisons. Premièrement,
00:08:09Claude va évidemment pouvoir mieux imiter
00:08:12une image que vous lui montrez plutôt que votre description de l'image.
00:08:15Mais deuxièmement, parce qu'en utilisant des images,
00:08:17cela implique que nous regardons d'autres sites web et que nous
00:08:20allons pouvoir voir, encore une fois, à quoi ressemble un bon résultat,
00:08:23ce que font les vrais pros du secteur et comment nous pouvons les imiter.
00:08:25Maintenant,
00:08:26il existe plusieurs endroits où trouver de l'inspiration
00:08:28pour vos designs front-end et je vais en citer quatre.
00:08:31Le premier est Awwwards. C'est A-W-W-W-A-R-D-S.
00:08:34C'est un endroit où les gens soumettent leur travail front-end
00:08:37et sont notés dessus. Il y a donc un aspect très créatif.
00:08:40Le deuxième est godly.website.
00:08:42C'est un site à défilement infini où l'on peut, là encore,
00:08:45voir plein de designs différents. Le numéro trois est Pinterest,
00:08:48qui propose des choses assez sympas, étonnamment.
00:08:49Ici, je cherche simplement "landing page SaaS".
00:08:52Quand j'en trouve une qui me plaît,
00:08:53je peux aussi en voir plein d'autres similaires.
00:08:56Et enfin, nous avons Dribbble. C'est Dribbble avec trois B.
00:08:58Là aussi, j'ai mis "landing page SaaS". Et encore une fois,
00:09:01je vois plein de trucs différents qui ont l'air super cool.
00:09:04Disons que je m'arrête sur un site comme OpenHands, qui me plaît.
00:09:07J'aime bien, vous savez,
00:09:09le truc qui défile en haut avec les flux de travail éprouvés.
00:09:11J'aime bien la palette de couleurs. C'est
00:09:14quelque chose d'inhabituel dès le départ.
00:09:15Ils ont de la preuve sociale et, de manière générale,
00:09:19j'aime le style, d'accord ? Par exemple. Alors, encore une fois,
00:09:22ce que je vais faire est très, très simple.
00:09:23Je vais juste prendre une série de captures d'écran de cette page,
00:09:26les balancer dans Claude et lui dire : "Hé, voici le style visuel
00:09:29vers lequel je veux aller." Donc, dans Claude, j'ai dit :
00:09:31"En fait, je veux que notre site corresponde au style d'OpenHands."
00:09:34Je lui ai donné l'URL. Puis j'ai dit :
00:09:36"Voici quelques captures d'écran pour référence."
00:09:38Et j'y ai déposé toutes les captures d'écran.
00:09:40Maintenant, il a de vraies références visuelles sur lesquelles s'appuyer.
00:09:43Il me serait difficile, en tout cas pour moi, de décrire
00:09:45avec des mots ce que je cherchais ici,
00:09:47même avec l'aide de quelque chose comme la compétence "UI UX pro".
00:09:51Et c'est grâce à ce processus
00:09:52que nous allons commencer à sélectionner de très bonnes références visuelles.
00:09:55Il y en a tellement partout.
00:09:57Et une fois qu'on commence à en voir de plus en plus,
00:10:00un résultat comme celui-ci devient carrément repoussant. On se dit :
00:10:03"Pourquoi faire un truc pareil quand il y a tant de choses cool
00:10:05disponibles ?" Et à mesure que vous voyez ces références,
00:10:07même si on ne donne que des captures d'écran à Claude,
00:10:09cela va vous aider à communiquer ce que vous voulez précisément,
00:10:12parce que
00:10:12vous allez revoir les mêmes éléments encore et encore
00:10:14en parcourant toutes ces références.
00:10:16Et ce que vous allez aussi vouloir faire,
00:10:18c'est combiner des références provenant de plusieurs sites, n'est-ce pas ?
00:10:21Même si nous utilisions OpenHands ici,
00:10:23il y a probablement des trucs sympas trouvés sur Pinterest ou
00:10:26godly.websites, et je me dis : "Tiens, je vais prendre ça ici,”
00:10:28et ça là-bas," vous voyez ?
00:10:29Je veux prendre le meilleur de tous ces sites et
00:10:32le combiner. Cependant,
00:10:33il est très facile de rester coincé dans un piège particulier à ce stade.
00:10:36Je dirais que la plupart des gens s'arrêtent au niveau 3,
00:10:39là où ils comprennent qu'il faut utiliser des compétences.
00:10:41Claude est mauvais au départ,
00:10:42mais avec des compétences et des captures d'écran, on peut aller assez loin.
00:10:45La vérité, c'est qu'il y a un plafond ici parce que nous allons
00:10:49être bloqués par le "fossé de l'ambiance" (vibe gap).
00:10:50Vous allez voir ce qu'il génère.
00:10:52Ce sera genre... assez proche, d'accord ?
00:10:55Mais ce ne sera pas parfait parce que, encore une fois,
00:10:57il y a toujours cet effet de déperdition
00:11:01quand je donne des instructions à Claude, ce qui est très vrai.
00:11:03Il fait tout en code, et lui montrer une image visuelle en disant :
00:11:05"Hé, traduis ce visuel en code."
00:11:08Et c'est un peu le problème de beaucoup de designs front-end.
00:11:10C'est un support visuel, et pourtant,
00:11:12j'essaie de l'exprimer par du texte, tout en sachant que
00:11:15même si j'envoie des captures d'écran,
00:11:17il y a toujours cette étape de traduction.
00:11:18Comment peut-il le faire correctement ? Eh bien,
00:11:20la vérité, c'est qu'il a une limite et on peut voir cette
00:11:22limite en action juste ici,
00:11:24car voici ce qu'il a créé avec toutes ces captures d'écran.
00:11:28Voici l'original, voici le nôtre.
00:11:31Et comme je l'ai déjà dit par le passé,
00:11:32c'est là que les gens se retrouvent bloqués.
00:11:33Parce que si on parcourt ça, bon,
00:11:36en plissant les yeux,
00:11:37on peut un peu deviner ce qu'il essayait de faire.
00:11:39Il est peut-être arrivé à 50 % du chemin.
00:11:41Et il y a des choses qu'on aime,
00:11:43mais ce que les gens font maintenant, c'est qu'ils vont aller là,
00:11:46reprendre une capture d'écran du header. "D'accord."
00:11:49"Travaillons sur le header," encore et encore,
00:11:51à coups de prompts : "D'accord, on retourne à la capture d'écran, on revient."
00:11:53Et ça prend une éternité sans jamais vraiment réussir. Pas vrai ?
00:11:56À cause de ce problème de traduction des captures d'écran
00:11:57vers le code.
00:11:59Donc, pour sortir du niveau 3 et passer au
00:12:02niveau 4,
00:12:03nous ne devons pas seulement regarder la surface de ces sites
00:12:06que nous aimons pour y puiser de l'inspiration.
00:12:08Nous devons apprendre à les cloner proprement et
00:12:11à récupérer le code sous-jacent qui fait tourner
00:12:15quelque chose comme OpenHands. Et cela va bien au-delà de simplement :
00:12:18"Oh, on veut juste le cloner et on les copie."
00:12:20Non, le processus de clonage puis de compréhension
00:12:23de comment copier ces éléments apporte d'énormes bénéfices,
00:12:26pas seulement pour l'aspect modèle (template), ce qui est génial,
00:12:30mais vous allez ensuite être exposé au code réel
00:12:34qui se trouve sous la surface pour passer du
00:12:36niveau 3 au niveau 4.
00:12:38On doit maintenant aller au-delà de la simple apparence de ces sites
00:12:41que l'on regarde pour s'inspirer avec des captures d'écran.
00:12:44On doit maintenant apprendre à passer sous la surface,
00:12:48à regarder derrière le rideau pour voir comment ces sites sont construits
00:12:51au niveau de leurs composants de code réels : leur HTML,
00:12:54leur CSS et leur JavaScript.
00:12:56Le niveau 4, c'est celui du "cloneur".
00:12:59C'est là qu'on apprend en volant aux pros.
00:13:02Maintenant, soyons bien clairs.
00:13:04Il ne s'agit pas de se dire :
00:13:05"Oh, on va juste plagier des sites web, les copier et dire
00:13:08que c'est les nôtres." Ce n'est pas le cas ici.
00:13:10Ce qui se passe, c'est que nous allons trouver des sites que nous aimons
00:13:13et nous allons les déconstruire pour les utiliser comme
00:13:16modèle sur lequel s'appuyer. Et ce faisant,
00:13:20nous allons apprendre énormément, comme pour n'importe quelle compétence.
00:13:24Comment s'améliorer ? On regarde ce que font les pros.
00:13:27On essaie de les copier.
00:13:28On apprend énormément en essayant de les égaler.
00:13:30Et avec le temps, on y ajoute sa propre touche pour créer
00:13:33quelque chose d'original. C'est tout l'enjeu de ce niveau.
00:13:35Et pour vraiment en tirer le maximum,
00:13:37on doit commencer à comprendre ce qui compose
00:13:39le design front-end. Pour simplifier, le design front-end
00:13:42comporte trois parties. Il y a le HTML.
00:13:45Considérez cela comme le squelette du site, d'accord ?
00:13:47Sa structure réelle. Ensuite, on a le CSS.
00:13:50C'est le style du site.
00:13:52Considérez-le comme les vêtements du site web.
00:13:55Et enfin, nous avons le JavaScript.
00:13:56Considérez le JavaScript comme les muscles.
00:13:59C'est ce qui permet aux choses de se produire quand on clique
00:14:01sur un bouton ou autre.
00:14:02Et c'est en examinant ces trois parties d'un site web que nous
00:14:05allons pouvoir, d'une part, mieux cloner ou modéliser un site,
00:14:08et d'autre part, comprendre comment ils fonctionnent, d'accord ?
00:14:10Cette idée de déconstruire le site et d'apprendre comment ils font.
00:14:13Alors, comment fait-on ?
00:14:15Comment déconstruire, par exemple, OpenHands,
00:14:17sachant que les captures d'écran ne suffisent pas ?
00:14:21Eh bien, c'est relativement simple. Pour récupérer le HTML,
00:14:25on va sur le site et on fait Contrôle+U.
00:14:28Ce que vous voyez ici, c'est l'intégralité du HTML.
00:14:33Ce que nous allons faire, c'est copier ça,
00:14:37d'accord ? On copie tout ça.
00:14:39Et ensuite, on le colle dans Claude.
00:14:42C'est généralement assez volumineux. Dans ce cas précis,
00:14:44il y a 1 152 lignes de HTML. Et tout,
00:14:48tout en bas de ça,
00:14:50vous pouvez voir qu'il y a aussi des liens vers les fichiers CSS
00:14:54ainsi que le JavaScript.
00:14:56C'est ce que je souligne ici, en bas.
00:14:58C'est présent au bas de pratiquement tous
00:15:01ces fichiers HTML, je vais dézoomer un peu.
00:15:04C'est un peu dur à voir, mais en bas, là,
00:15:06nous avons le JavaScript ainsi que le CSS.
00:15:09Ce sont des fichiers réels qui contiennent aussi énormément de code.
00:15:13Donc, ce que nous allons faire, après lui avoir donné le HTML,
00:15:17c'est aussi dire à Claude : "Hé,
00:15:19jette un œil au JavaScript et au CSS pour
00:15:22vraiment comprendre ce qui se passe." J'ai donc écrit :
00:15:24"Regarde aussi les fichiers CSS et JS." On peut s'arrêter là.
00:15:29Il utilisera sa fonction "web fetch" pour les consulter lui-même.
00:15:31Le problème, c'est que Claude utilise "web fetch" via
00:15:35un modèle plus petit, n'est-ce pas ?
00:15:39Cette instance de Claude ne va pas réellement sur la page web.
00:15:42Elle utilise un modèle plus petit qui analyse, résume et transmet
00:15:46l'info à Claude.
00:15:47Le souci, c'est que les fichiers CSS et JS sont volumineux et contiennent
00:15:51tous les détails très spécifiques de la construction du site.
00:15:54Et on veut tout, pas vrai ? Je ne veux pas d'un résumé de ces fichiers.
00:15:58J'ai donc créé une compétence qui permet à Claude de faire cela
00:16:03mieux. C'est essentiellement un prompt amélioré.
00:16:04Il récupère autant de CSS et de JavaScript que nécessaire.
00:16:07Je dis juste : "Utilise la compétence Site Tear Down."
00:16:12Je mettrai cette compétence dans la communauté gratuite School et
00:16:16le lien se trouve dans la description.
00:16:18Vous n'aurez qu'à la charger pour pouvoir faire de même.
00:16:21Au total, qu'ai-je dit ? J'ai dit : "Voici le HTML d'OpenHands."
00:16:25Jetez également un œil aux fichiers CSS et JS.
00:16:28Utilisez la compétence de démontage de site et ces infos pour mieux cloner le site original OpenHands.
00:16:31Maintenant, comment cela va-t-il nous instruire ? Eh bien, tout d'abord,
00:16:36vous n'avez probablement aucune idée de comment j'ai pu réaliser cet arrière-plan, n'est-ce pas ?
00:16:39Pas vrai ?
00:16:40Vous ne comprenez ou ne connaissez probablement même pas le vocabulaire
00:16:43qu'il aurait fallu utiliser pour qu'il l'imite mieux, n'est-ce pas ?
00:16:46Quand on lui a juste donné des captures d'écran, on a obtenu ce truc,
00:16:50disons... plus ou moins proche,
00:16:52mais en demandant à Claude Code de regarder ce qui se passe sous le capot,
00:16:56nous pouvons maintenant compter sur lui pour nous enseigner ces choses car,
00:17:01désormais, Claude Code comprend réellement ce qui se passe au niveau du code.
00:17:04On peut avoir une conversation intelligente avec lui et dire : "Hé,
00:17:07comment ont-ils fait ça ? Qu'est-ce que ça veut dire ? C'est quoi un GSAP ?"
00:17:11Comme : "Comment ont-ils fait les animations au défilement ? Comment ont-ils fait ceci ?"
00:17:13"Comment ont-ils fait cela ?"
00:17:14Et avec le temps, après avoir cloné de plus en plus de sites et les avoir utilisés
00:17:18comme modèles pour vos propres projets, parce qu'encore une fois,
00:17:19vous y apporterez toujours votre touche personnelle.
00:17:21Vous utilisez cela juste comme une base de départ.
00:17:23Vous deviendrez meilleur en design front-end,
00:17:26exactement comme pour n'importe quelle autre compétence.
00:17:29C'est le processus par lequel vous n'êtes pas seulement exposé,
00:17:31mais commencez à intégrer des techniques de pro dans vos créations,
00:17:34mais pour passer aux niveaux supérieurs, comme je l'ai dit, on ne peut pas juste être
00:17:38un singe devant un clavier avec Claude Code,
00:17:41tout comme pour ce dont nous avons parlé. On ne peut pas juste cliquer sur "Accepter",
00:17:43"Suivant", encore et encore, car comment vous différencier ?
00:17:46Alors, quelles compétences devons-nous maîtriser dans ce processus ?
00:17:48Nous devons apprendre à lire et à comprendre le code source.
00:17:51Claude Code nous y aide.
00:17:52Nous devons identifier quelle technique correspond à quel effet car,
00:17:57à un certain stade, nous devons être capables de voir ces sites et de
00:18:02reconnaître immédiatement ce qui se passe. Et enfin,
00:18:04nous devons apprendre à adapter ces modèles clonés à nos propres designs.
00:18:09On ne plagie pas, on s'inspire.
00:18:12Et si vous ne maîtrisez pas ces compétences,
00:18:13vous allez rester coincé dans ce piège : le plafond du clonage.
00:18:16Vous ne ferez que copier, sans pouvoir créer.
00:18:18Vous ne chercherez pas à comprendre le pourquoi du comment.
00:18:20Et donc vous allez atteindre une limite infranchissable.
00:18:22Au final, je pourrais vous remplacer par n'importe qui dans la rue
00:18:25et lui dire de suivre les étapes 1, 2 et 3. Mais
00:18:27ça ne vous mènera pas aussi loin que vous le souhaitez.
00:18:29Voyons donc ce que Claude Code a pu construire avec ce contexte de code supplémentaire.
00:18:32Voici la version mise à jour.
00:18:35Celle-ci ressemble évidemment beaucoup plus à l'originale,
00:18:39surtout maintenant que l'arrière-plan est correct.
00:18:41Si on compare les deux, ce n'est pas encore un clone parfait.
00:18:45C'était essentiellement son premier essai, mais c'est bien mieux,
00:18:48bien plus proche de ce qu'on avait.
00:18:50Et si nous voulons continuer à itérer à partir d'ici pour nous rapprocher
00:18:54de ce que nous aimons, eh bien, c'est beaucoup plus facile, non ?
00:18:57Parce qu'il regarde maintenant essentiellement le même livre de recettes
00:19:01qu'OpenHands, et on peut dire : "Ok, changeons ceci."
00:19:04"Changeons cela. Je vois comment ils ont fait. Voici comment on peut l'émuler."
00:19:07Encore une fois, c'est là que le processus éducatif commence. Par exemple,
00:19:10cet arrière-plan sympa, comment fonctionne-t-il ?
00:19:12Et aussi, comment obtenir le même effet qu'OpenHands où la souris
00:19:17défile et, vous savez, en élimine une partie ?
00:19:19Il suffit de demander à Claude Code comment fonctionne l'arrière-plan.
00:19:22Comment égaler cet effet ? Et chaque fois que vous faites cela,
00:19:25vous ajoutez simplement un nouvel outil à votre panoplie.
00:19:27Claude Code explique alors comment cet effet fonctionne et, mieux encore,
00:19:32il l'applique maintenant correctement sur notre propre arrière-plan. Plutôt génial.
00:19:35Mais pour des raisons évidentes, on ne veut pas rester au niveau 4.
00:19:38On ne veut pas être un simple cloneur, n'est-ce pas ? On veut y mettre sa touche.
00:19:42On veut commencer à se l'approprier. Comment fait-on ?
00:19:45Comment passer au niveau 5 et personnaliser les choses ? Eh bien,
00:19:48c'est là qu'on commence à s'amuser avec les composants et aussi
00:19:53nos propres designs d'assets. C'est là qu'on apporte notre propre contenu.
00:19:56On ne se contente plus de copier exactement ce qu'un autre site fait.
00:19:57L'un des moyens les plus simples de commencer est de trouver
00:20:02des composants de qualité sur des sites comme 21st.dev.
00:20:04C'est similaire à la recherche d'inspiration sur des sites web,
00:20:08mais à un niveau micro, au niveau du composant.
00:20:11Sur un site comme 21st.dev, par exemple,
00:20:14je peux regarder les boutons ici sur la gauche.
00:20:17Et ce que je vais obtenir, c'est tout un tas
00:20:21de designs de boutons. Et si j'en trouve un qui me plaît, disons,
00:20:26quelque chose comme ça, je peux juste copier ce prompt,
00:20:29l'importer dans Claude Code et dire : "Hé, intégrons ce design de bouton."
00:20:33Et cela s'applique à n'importe quel type de bouton, n'est-ce pas ?
00:20:36On a des trucs pour les carrousels, les zones de défilement, les cartes,
00:20:40les menus de navigation, les images... tout.
00:20:42Et ce n'est pas limité à 21st.dev. Il y a d'autres sites comme CodePen.
00:20:46CodePen propose aussi beaucoup de designs sympas qu'on peut intégrer.
00:20:50Monet en est un autre très cool. En fait,
00:20:52il y a plein d'endroits où trouver ces composants géniaux
00:20:57et commencer à les intégrer dans votre page web.
00:20:59Mais si on veut quelque chose d'un peu plus personnalisé ?
00:21:01Je ne veux pas juste copier des composants aléatoires trouvés ailleurs.
00:21:04Comment le rendre vraiment original ? Vous avez deux options.
00:21:08La première est d'utiliser ces composants de 21st.dev,
00:21:11mais de demander à Claude Code de les modifier. C'est juste du code.
00:21:14Ce prompt nous donne le code exact, et on peut le peaufiner
00:21:18selon nos envies, ou alors on peut littéralement le créer nous-mêmes.
00:21:21Si on va sur Pinterest et qu'on voit des pages de destination comme celle-ci,
00:21:25qui sont très axées sur l'aspect artistique, rien ne nous empêche
00:21:29d'utiliser l'IA pour créer une image de ce genre pour en faire
00:21:34la pièce maîtresse que les gens verront en arrivant sur notre page.
00:21:36Et ce ne sont pas forcément des images fixes.
00:21:39On a tout à fait la possibilité d'ajouter des vidéos en arrière-plan,
00:21:42de les lier à certaines animations de défilement pour, encore une fois,
00:21:45reprendre les idées découvertes à l'étape 4 et se les approprier.
00:21:49C'est ce que nous allons faire. Redessinons rapidement notre page web,
00:21:53éloignons-nous de ce clone d'OpenHands pour créer une œuvre d'art IA
00:21:57vraiment sympa qui sera la première chose que l'on voit sur notre site.
00:22:01Vous connaissez la chanson maintenant,
00:22:02d'abord il faut trouver l'inspiration. Après avoir parcouru
00:22:06Pinterest pendant un moment,
00:22:07je vois beaucoup de sites comme celui-ci avec une image presque cartoon
00:22:10ou stylisée en arrière-plan pour la section héros.
00:22:14Et ensuite, on place notre texte sur la gauche.
00:22:16C'est là que vous pouvez commencer à utiliser le storytelling visuel.
00:22:19Quelle application créons-nous ? C'est Argus, n'est-ce pas ?
00:22:22Et on doit trouver un slogan qui, idéalement, soit aussi lié
00:22:27à l'image elle-même. Que cherche-t-on à obtenir avec Argus ?
00:22:30Argus, figure mythologique aux 10 000 yeux.
00:22:33On parle de réseaux sociaux.
00:22:34On parle de trouver les choses avant les autres.
00:22:37Le slogan que j'ai trouvé est : "Voyez la suite". Simple.
00:22:41C'est percutant. Et vous savez qui m'a aidé à trouver ça ?
00:22:44C'était évidemment Claude Code. Et ensuite, ce que j'ai fait avec lui,
00:22:47c'est que j'ai dit quelque chose comme : "Hé, tu sais,"
00:22:49"on parle de storytelling visuel ici."
00:22:51"Quelles idées d'imagerie pourrait-on avoir ?"
00:22:54Parce qu'à ce stade, on fait notre propre truc, n'est-ce pas ?
00:22:57Je peux m'inspirer des concepts généraux de ce que vous voyez ici,
00:23:01mais l'image doit être la mienne. Et encore une fois,
00:23:04avoir un storytelling visuel lié à ce que fait réellement votre application
00:23:07fera une énorme différence.
00:23:10J'ai donc fini par créer une image basée sur les idées
00:23:15que Claude Code m'a données, en m'appuyant sur Midjourney.
00:23:18Vous pouvez utiliser n'importe quel générateur d'images,
00:23:21que ce soit Nano Banana Pro ou Seed Dream, peu importe.
00:23:24J'aime beaucoup Midjourney pour ce genre de pièces de "concept art",
00:23:28car Midjourney, surtout la version 7...
00:23:31Je n'ai pas encore beaucoup testé la version 8.
00:23:33On peut lui donner un prompt un peu bizarre, comme celui que j'ai fait :
00:23:38"J'ai besoin d'une image de fond pour la page d'accueil d'un site appelé Argus.
00:23:41Le slogan est 'Voyez la suite'."
00:23:43Et juste avec un prompt aussi médiocre et vague,
00:23:47j'ai obtenu plein de trucs sympas parmi lesquels choisir.
00:23:50J'ai vu ça et je me suis dit : "C'est génial !" Je peux déjà imaginer
00:23:54les informations ici sur la gauche,
00:23:55on peut avoir d'autres éléments en haut. On peut jouer avec ça.
00:23:59Je pense que c'est très cool. Peut-être même faire une animation plus tard.
00:24:02Une fois que j'ai mon image, c'est assez facile.
00:24:06Je vais juste télécharger l'image, la donner à Claude Code et dire : "Hé,
00:24:10je veux réimaginer la page héros en utilisant cette image en fond."
00:24:13Dans Claude Code, j'ai dit :
00:24:17"Je veux changer entièrement le front-end."
00:24:19"Je veux utiliser l'image suivante comme arrière-plan pour le héros."
00:24:21"Mettons les infos sur l'appli Argus sur la gauche,"
00:24:24"laissons du vide sur la droite pour l'image et mettons le slogan 'Voyez la suite'."
00:24:27On va voir ce qu'il fait. Et encore une fois,
00:24:30c'est là qu'il faut laisser libre cours à votre créativité car,
00:24:34jusqu'à présent, vous avez été exposé à plein de designs front-end
00:24:37différents des modèles SaaS super génériques qu'on voit partout.
00:24:39De l'art sympa, peu importe... le storytelling visuel est ce
00:24:43qui va vraiment vous faire monter en grade.
00:24:46Voici à quoi ressemble notre section héros mise à jour avec ce nouvel
00:24:48arrière-plan. Je l'ai un peu réduite pour que vous puissiez
00:24:52la voir en entier, et Claude Code a aussi mis à jour toutes les couleurs.
00:24:52Encore une fois, ce n'était que le premier jet.
00:24:56On a juste ajouté ce fond, mais tout de suite,
00:24:58on sent que c'est plus original, plus créatif, ça se démarque.
00:25:02Maintenant, on commence à y ajouter de plus en plus de cachet.
00:25:06Pour commencer, on peut simplement améliorer la résolution de l'image.
00:25:09On peut le faire dans Midjourney, car ici,
00:25:12l'image semble un peu étirée et manque de détails,
00:25:15ou alors on peut ajouter du mouvement.
00:25:19On n'est pas obligé d'avoir un fond statique.
00:25:21On peut aussi mettre une vidéo.
00:25:24Transformer ça en vidéo est très simple.
00:25:28Il suffit d'aller sur Klings 3.0 ou Veo 3.1,
00:25:30n'importe où pour définir une image de départ.
00:25:32Idéalement, on définit aussi l'image de fin, comme vous le voyez à gauche,
00:25:34pour éviter les mouvements brusques, car n'oubliez pas que
00:25:36l'idéal serait d'avoir une boucle parfaite.
00:25:40C'est parfois difficile de faire boucler correctement des images IA.
00:25:41La deuxième option est de créer une vidéo assez longue d'environ 15 secondes.
00:25:45Et on veut un mouvement subtil, comme ce qu'on voit ici.
00:25:49Si j'avais ça en fond, même avec les oiseaux immobiles,
00:25:52ce qui est tout à fait correct, ça donnerait un genre d'effet parallaxe.
00:25:55Comme c'est la page héros et que ça dure 15 secondes,
00:25:59il est peu probable que quelqu'un reste 30 secondes à la regarder en entier.
00:26:03Donc s'il y a un petit saut à la fin, ce n'est pas grave.
00:26:07Mais heureusement, ici, comme le mouvement était subtil,
00:26:11on ne remarque presque pas le passage de la 15ème à la 1ère seconde.
00:26:14On va donc utiliser celle-là. Vous vous demandez sûrement aussi :
00:26:18"Quid de la performance ?" Eh bien, sur ordinateur,
00:26:22la vidéo passera très bien, mais on dira à Claude Code :
00:26:24"Si c'est un utilisateur mobile qui arrive sur le site,"
00:26:25"ne charge pas la vidéo. Charge juste l'image fixe."
00:26:29Je lui ai donné l'image améliorée pour le mobile
00:26:31et un lien vers la vidéo pour remplacer le fond du héros.
00:26:35Voici maintenant un aperçu de la page avec le mouvement.
00:26:38Je trouve ça plutôt réussi. Et surtout, c'est subtil.
00:26:42elle ne chargera pas la vidéo. Elle affichera simplement cette image fixe.
00:26:45J'ai donc fourni la nouvelle image redimensionnée et lui ai dit de l'utiliser pour le mobile.
00:26:50Ensuite, j'ai donné un lien vers la vidéo en disant :
00:26:52« Remplace ça dans la section hero ».
00:26:54Et voici à quoi ressemble la page maintenant avec le mouvement.
00:26:58Je trouve ça plutôt réussi. L'autre point, c'est que c'est subtil.
00:27:02Il ne faut pas de mouvement excessif, comme si un jeu vidéo tournait en arrière-plan,
00:27:06à moins de vraiment savoir ce que vous faites.
00:27:07Mais quelque chose comme ça, avec ce léger mouvement de nuages,
00:27:11et l'eau qui bouge en bas... Encore une fois,
00:27:14cela donne à votre page web
00:27:15du caractère, et apporter ce caractère original est l'essence même du niveau 5.
00:27:19Comme je le répète, les quatre premiers niveaux servaient à apprendre les bases.
00:27:22On étudiait le travail des pros ; ici, au niveau 5, on personnalise vraiment.
00:27:25Tout comme vous l'avez fait pour la section hero,
00:27:28c'est ainsi que vous devez aborder chaque autre section.
00:27:32Regardez ces cartes, elles sont affreuses. Le fond est un peu ennuyeux.
00:27:36C'est toujours exactement la même chose. Alors, que vais-je faire ?
00:27:38Je vais chercher l'inspiration sur 21st thought dev ou sur Awwwards.
00:27:42Je ramènerai ça dans Claude Code, puis je vais itérer, itérer,
00:27:45et encore itérer jusqu'à obtenir un résultat qui me plaise.
00:27:48C'est à cette étape, en faisant toutes ces modifications visuelles,
00:27:51que vous vous sentirez peut-être un peu limité dans Claude Code.
00:27:54Il y a toujours cette sorte de tension entre le travail dans un terminal,
00:27:58l'utilisation de texte et la volonté de manipuler un support visuel.
00:28:03À l'étape six, nous allons commencer à sortir un peu de Claude Code,
00:28:06car c'est au niveau 6 que nous introduisons des outils externes
00:28:11pour être encore plus précis sur la manière dont les éléments visuels s'assemblent.
00:28:14Et de nombreux outils sont à notre disposition.
00:28:17On a des outils comme paper.design, Stitch, Figma...
00:28:21Il y a aussi pencil.dev.
00:28:22C'est là que vos compétences vous permettent d'utiliser ces programmes externes
00:28:26pour peaufiner les détails. Un excellent outil à essayer,
00:28:29très axé sur l'IA et simple d'utilisation, c'est Stitch. C'est aussi gratuit.
00:28:33C'est un outil de Google qui offre un canevas visuel pour travailler le design front-end.
00:28:37Voici ce que j'ai fait : on ne repart pas de zéro.
00:28:38On fait une refonte. J'ai donc donné des captures d'écran de notre site,
00:28:42aussi bien de la page hero que du reste.
00:28:45J'ai dit : « Voici la configuration actuelle de la page. J'aime beaucoup le haut, »
00:28:47« j'aime l'esthétique et les couleurs, »
00:28:51« mais je veux mettre à jour toute la moitié inférieure du site. »
00:28:53Elle semble juste très plate, n'est-ce pas ?
00:28:57« Je veux intégrer l'imagerie et les couleurs qu'on a en haut. »
00:28:59« Voyons ce que tu peux proposer. »
00:29:03Regardons donc ce qu'il a généré pour cette refonte.
00:29:05Et voici le résultat.
00:29:08Ce qui est génial avec Stitch, c'est que je peux faire des refontes de la refonte.
00:29:10Si je sélectionne l'élément,
00:29:14vous voyez qu'en bas, je peux le prompter comme n'importe quel chatbot.
00:29:15Je peux aussi faire un clic droit, aller dans les variantes et, là encore,
00:29:18changer la mise en page, les couleurs, les images, etc.
00:29:22Comme c'était une refonte dans Stitch et non une création ex nihilo,
00:29:24ce n'est qu'une image qu'il a créée.
00:29:28Mais c'est quelque chose que je peux tout à fait copier via un clic droit.
00:29:30Et ensuite, je la ramène dans Claude Code en demandant :
00:29:34Et maintenant, rapportez cela à Claude Code et dites, Hé,
00:29:37ces outils d'édition visuelle sont formidables pour le processus d'idéation.
00:29:38Et il y en a plein d'autres. Pencil.dev en est un autre
00:29:43que vous verrez un peu partout.
00:29:46Ça fonctionne très bien si vous utilisez Cursor ou VS Code,
00:29:47car vous pouvez afficher le canevas et éditer en temps réel.
00:29:50Il y a donc beaucoup d'outils dans ce domaine, et de nouveaux arrivent
00:29:54sur le marché quasiment chaque semaine. J'ai donc remis cette image dans Claude Code
00:29:58et je lui ai demandé : « Qu'en penses-tu ? »
00:30:01« Que penses-tu de cet effet de glassmorphisme sur l'image de fond ? »
00:30:03« Essayons ça. »
00:30:06Et c'est essentiellement ce que vous allez faire jusqu'à ce que le site soit parfait,
00:30:08car c'est à cette étape du design front-end qu'on ne fait que peaufiner.
00:30:12On ajuste, encore et encore.
00:30:12Vous avez maintenant les compétences pour voir vers quoi vous tendez,
00:30:15mais c'est un processus extrêmement itératif sans véritable raccourci.
00:30:16Cependant, vous avez désormais tous les outils à votre disposition,
00:30:21à la fois pour trouver l'inspiration et pour expérimenter concrètement.
00:30:25Après environ 20 minutes de peaufinage, voici ce que j'ai obtenu pour Argus.
00:30:27D'abord, vous remarquerez quelques petits changements qui lui donnent
00:30:31plus de poids, un aspect plus premium. Le premier, c'est le chargement.
00:30:34Quand je rafraîchis la page, que voyez-vous ?
00:30:37Vous remarquez une sorte d'hésitation avant que le texte ne se charge,
00:30:40ce qui lui donne de l'importance, une impression de solidité.
00:30:43Vous remarquerez aussi que j'ai changé les polices. Les polices sont cruciales. La typographie est capitale.
00:30:45Où aller pour trouver des polices et de l'inspiration ?
00:30:49Un excellent endroit, c'est Google Fonts.
00:30:52Ils ont une infinité de polices, toutes gratuites.
00:30:57Elles sont classées par types, et Claude Code peut toutes les utiliser.
00:31:00N'hésitez pas à aller voir Google Fonts si vous hésitez sur laquelle choisir.
00:31:03Nous avons ajouté une section de défilement ici.
00:31:06On a ajouté ce bandeau défilant en bas qui sert aussi de bordure
00:31:08entre notre vidéo et notre arrière-plan en image.
00:31:11Auparavant, le passage de la vidéo hero à la même image en arrière-plan
00:31:14était très brutal, mais cela crée une transition plus naturelle.
00:31:19Vous remarquerez aussi les changements apportés depuis Stitch.
00:31:25Nous avons maintenant cet effet de glassmorphisme qu'on doit encore un peu ajuster.
00:31:30On voit que ça peut être un peu coupé lors du rebond,
00:31:35mais cela met en valeur l'illustration de fond qui donne du caractère à l'ensemble.
00:31:38Et puis, il y a des choses subtiles. Regardez,
00:31:41si je rafraîchis ici,
00:31:44vous voyez le compteur qui grimpe de zéro à 10 millions. Ce sont
00:31:48ces petits détails marginaux qui montrent que vous avez soigné le site,
00:31:52avec une certaine fierté professionnelle.
00:31:54Vous verrez même ce balayage lumineux sur « AI tools » et « content strategy ».
00:31:59Encore une fois, ce sont juste des petits détails.
00:32:03Ce sont de petites choses que la plupart des gens ne remarqueront
00:32:07probablement pas consciemment. Pourtant, quand on les combine,
00:32:10on obtient quelque chose de cohérent, quelque chose de soigné,
00:32:12peu importe que vous ayez utilisé l'IA comme outil.
00:32:16Le fait est que c'est un travail d'artisan, avec tous ces petits plus.
00:32:20Même la barre de défilement en haut, voyez comment elle progresse.
00:32:24Encore ces petits détails. Et comment ai-je prompté ça ?
00:32:27Eh bien, en vérité,
00:32:31c'était juste une combinaison de tout ce dont nous avons parlé jusqu'ici.
00:32:34Je repère ce que j'aime,
00:32:38j'en prends des captures d'écran et je les importe dans Claude Code.
00:32:40Mais surtout, je ne suis pas un expert en web design.
00:32:42Alors sur certains points, j'ai su tout de suite que
00:32:45j'aimais les cartes en glassmorphisme vues dans Stitch.
00:32:48C'est Stitch qui nous a donné cette idée en premier.
00:32:52Quand Claude Code les a faites au début, elles étaient juste plates,
00:32:53elles ne ressortaient pas de la page. Alors j'ai dit : « Donnons-leur du poids »,
00:32:57« faisons en sorte qu'elles sortent de l'écran ».
00:32:59Mais j'ai aussi dit à Claude Code :
00:33:03« Je veux que tu fasses une recherche web sur les meilleures pratiques »
00:33:06« de web design pour ce genre de choses ».
00:33:08« En plus de trouver comment donner du relief à ces cartes, »
00:33:12« suggère d'autres éléments pour rendre notre site plus premium »
00:33:17« tout en restant subtil ». Il a proposé plusieurs idées.
00:33:20Je les ai passées en revue, j'en ai jeté certaines, gardé d'autres.
00:33:22C'est le rythme habituel de travail.
00:33:25Vous n'avez pas à compter uniquement sur vous-même.
00:33:29Claude peut aller sur le web pour voir les bonnes pratiques, mais n'oubliez pas,
00:33:32c'est vous qui gardez le contrôle.
00:33:36Vous êtes aux commandes, alors n'ayez pas peur de vous amuser.
00:33:40Comme je l'ai dit, tous ces petits détails donnent du caractère
00:33:41et font que ce projet est le vôtre.
00:33:45Plus le résultat reflète votre esprit créatif dans cet espace,
00:33:47mieux ce sera. C'est la vérité.
00:33:50Car si c'est le reflet de ce que vous voulez montrer à l'écran,
00:33:53on peut difficilement appeler ça du contenu d'IA bâclé.
00:33:57On ne peut pas appeler ça un modèle d'IA générique, car c'est le vôtre.
00:34:02Même si ce niveau semble porter sur l'utilisation d'outils comme Stitch,
00:34:04je pense que ce niveau 6 englobe tout ce que je viens de dire.
00:34:08Utiliser des outils externes comme Stitch pour itérer.
00:34:11Mais au final, à ce stade,
00:34:14vous êtes enfin capable de penser de façon créative, de vous exprimer
00:34:17en design front-end en utilisant Claude Code comme un simple outil,
00:34:19alors qu'au début, on se laissait simplement porter. Ce qui nous amène
00:34:23au dernier niveau, le niveau 7. Et qu'est-ce qu'il s'y passe ?
00:34:25C'est quoi cette histoire de 3D ? Eh bien, spoiler alert...
00:34:27C'est probablement un domaine où aucun d'entre nous ne s'aventurera.
00:34:31Quand on parle de la frontière, de l'architecte et de la 3D,
00:34:34c'est là que jouent les grands.
00:34:37Ce n'est pas vraiment quelque chose à notre portée. Je pense qu'à ce jour,
00:34:41fin mars 2026,
00:34:45ce n'est pas encore dans nos cordes, car on commence à parler
00:34:51de WebGL personnalisé, de shaders et d'expériences 3D.
00:34:55C'est de ça qu'il s'agit.
00:34:57Des sites web qui ressemblent pratiquement à des jeux vidéo. Regardez,
00:35:02par exemple, ce site web ici.
00:35:05Pensez-vous qu'on puisse juste faire un Ctrl+U, Ctrl+A pour
00:35:07analyser le HTML et le CSS et comprendre ce qui se passe ?
00:35:12Non, c'est de l'art, n'est-ce pas ?
00:35:13C'est une équipe de designers qui a passé énormément de temps
00:35:17à assembler tout ça, et c'est absolument magnifique.
00:35:20En théorie, l'IA pourrait-elle le faire ? Peut-être, mais pour être honnête,
00:35:25c'est bien au-delà de vos capacités ou des miennes.
00:35:30Je l'ai inclus simplement pour vous montrer ce qui est possible.
00:35:34Si vous voulez en voir d'autres, allez sur Awwwards,
00:35:37dont j'ai parlé plus tôt, et regardez leurs sites du jour ou du mois.
00:35:41Ils sont tous dans cette veine : c'est du sur-mesure total.
00:35:45Peut-être que l'IA nous permettra de jouer sur ce terrain dans quelques années.
00:35:47Mais c'est vraiment impressionnant.
00:35:50Tout l'univers du web design est tellement passionnant.
00:35:53C'est de l'art pur et simple. Comme je l'ai dit,
00:35:54quand on débute dans ce milieu,
00:35:57on voit toujours les mêmes trucs de SaaS en boucle.
00:36:00Mais quand on voit ça, on reste sans voix.
00:36:03C'est vraiment le niveau 7.
00:36:07Et si vous savez faire ça avec l'IA, eh bien,
00:36:09c'est vous qui devriez faire des vidéos sur YouTube.
00:36:12Parce que j'adorerais apprendre, mais j'ai
00:36:16créé ce niveau surtout pour montrer ce site Igloo. Il est tellement cool.
00:36:17Allez le voir, laissez-vous surprendre et
00:36:19réfléchissez à ce que vous pourriez accomplir dans le futur.
00:36:22C'est ici que je vous laisse, au terme de nos sept niveaux de
00:36:24design front-end avec Claude Code. Ce que j'espère que vous avez retenu,
00:36:27c'est l'idée d'une progression des compétences
00:36:29pour arriver à un tel résultat. C'est tout à fait faisable.
00:36:30Il faut d'abord repérer ce qu'on aime, puis apprendre à le déconstruire.
00:36:34Cette idée de cloner des sites est cruciale, vous savez ?
00:36:38Parce qu'on apprend énormément en laissant Claude Code nous expliquer
00:36:42comment quelqu'un d'autre a créé un site qu'on adore.
00:36:43Grâce à cela, vous allez découvrir toutes ces techniques
00:36:46et ces effets dont vous ne soupçonniez même pas l'existence.
00:36:51Et ensuite, vous pourrez retourner sur votre propre site
00:36:56pour les appliquer avec votre propre style créatif. C'est ça le but.
00:36:58Il ne s'agit pas de trouver une compétence magique
00:37:01dans Claude Code pour que, hop, le site soit magnifique.
00:37:03Si c'était si facile, tous les sites seraient beaux. Or, ce n'est pas le cas.
00:37:06Donc ce n'est pas si simple. L'idée que
00:37:10le goût n'appartient pas à l'IA est assez vraie,
00:37:14mais je pense qu'il est plus exact de dire
00:37:18que nous avons beaucoup de mal à exprimer nos goûts.
00:37:21On a du mal à les formuler parce qu'on ne connaît pas les mots justes,
00:37:26puisque nous ne sommes pas web designers. On n'a pas le vocabulaire,
00:37:30on ne maîtrise pas la nomenclature.
00:37:33C'est un problème très courant avec l'IA en général, pas seulement le web design.
00:37:37C'est valable pour tout ce qui touche au code aussi.
00:37:40Si vous n'êtes pas du métier, vous ne parlez simplement pas la langue.
00:37:44Cela crée donc un déficit de traduction entre vous et Claude Code,
00:37:47et le résultat final finit par être bâclé et générique.
00:37:48Mais j'espère qu'en suivant cette feuille de route,
00:37:53vous voyez comment pallier ces difficultés avec le temps.
00:37:57J'espère que cela vous a été utile. J'ai pris beaucoup de plaisir à le faire.
00:38:02Dites-moi ce que vous en avez pensé en commentaire.
00:38:05Comme toujours, allez voir Chase AI Plus si vous voulez accéder
00:38:06à la masterclass Claude Code. On serait ravis de vous y voir. À bientôt !
00:38:10général, pas seulement le design web. Euh, cela vaut aussi pour n'importe quel truc de codage.
00:38:13Genre, si vous ne venez pas de ce milieu,
00:38:15vous ne savez tout simplement pas comment parler la langue, littéralement. Et donc cela crée une sorte
00:38:19de désavantage, vous savez, de traduction
00:38:21entre vous et Claude Code, et le résultat final devient quelque chose
00:38:25de bâclé et générique, mais j'espère qu'en parcourant cette feuille de route,
00:38:29vous verrez une voie à suivre pour atténuer certains de ces problèmes avec le temps.
00:38:32J'espère donc que vous en avez tiré quelque chose. J'ai eu du plaisir à faire ça. Euh,
00:38:37dites-moi dans les commentaires ce que vous en avez pensé, comme toujours, n'oubliez pas d'aller voir
00:38:40Chase AI Plus, si vous voulez mettre la main sur la masterclass Claude Code,
00:38:43nous serions ravis de vous y accueillir et on se voit bientôt.