Fable 5 et GPT 5.6 : Créez un site web à 10 000 $ en UNE SEULE FOIS grâce à cette compétence
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00Tout ce site web a été réalisé en une seule fois par Claude Fable 5, en une seule compétence.
00:00:05Il ne s'agit pas seulement d'une animation de défilement, mais de plusieurs animations assemblées
00:00:10pour vous offrir une expérience fluide, de haute qualité et cohérente.
00:00:15C'est absolument fou.
00:00:16C'est un produit extrêmement haut de gamme et je vais vous montrer la compétence qui permet de réaliser tout cela.
00:00:22En plus de cela, je vous montrerai comment j'ai non seulement fait cela dans Claude Code,
00:00:25mais nous ferons la même démonstration avec le tout nouveau GPT 5.6 Sol
00:00:31car pourquoi s'arrêter à un seul outil d'IA de nos jours ?
00:00:35Et cette chose est vraiment géniale.
00:00:37Comme je l'ai dit, si vous essayez de faire cela manuellement sans ce genre de compétence d'animation de défilement que j'ai trouvée et améliorée,
00:00:42vous savez à quel point c'est difficile.
00:00:43Vous faites plusieurs vidéos, vous récupérez les images de départ, vous essayez de faire une correspondance,
00:00:47vous extrayez toutes les images une par une, c'est une vraie corvée
00:00:50et cela rend le processus extrêmement facile à exécuter.
00:00:53Le véritable crédit pour cette compétence revient à Peter Wang.
00:00:55C'est lui qui a créé la version originale.
00:00:57Je l'ai trouvée sur Twitter et il a eu la gentillesse de la mettre en open source.
00:01:00Son “scroll world” sera donc lié ci-dessous pour que vous puissiez y jeter un œil.
00:01:03Ce que j'ai fait, c'est que j'ai bifurqué ce projet et apporté quelques améliorations,
00:01:07notamment en introduisant des niveaux de budget pour que vous puissiez le faire sans trop dépenser.
00:01:10Nous n'avons pas nécessairement besoin de six scènes différentes pour notre site web
00:01:14et j'ai inclus beaucoup d'améliorations sur la version mobile et sur les aspects liés au référencement.
00:01:19La vue d'ensemble du fonctionnement de ces animations de défilement, c'est qu'on commence par une seule image.
00:01:23C'est ce que vous voyez ici.
00:01:24Nous prenons ensuite cette image et nous la transformons en vidéo.
00:01:27Cette animation de défilement était à un moment donné une vidéo, mais nous extrayons ensuite toutes les images individuelles de la vidéo en utilisant FFmpeg
00:01:34et nous les associons à la position où vous, l'utilisateur, vous trouvez sur le site web.
00:01:40Il se passe beaucoup d'autres choses en coulisses pour que l'expérience soit fluide et non saccadée.
00:01:46De plus, nous nous assurons que toutes nos scènes se réfèrent les unes aux autres lors de leur construction.
00:01:50De cette façon, elles paraissent cohérentes.
00:01:52Comme si tout cela faisait partie d'une seule et même histoire.
00:01:55Pour ce qui est de la génération des images et des vidéos, nous utilisons le MCP Higgs Field.
00:02:00Et nous pouvons le faire à la fois avec Claude Code et Codex.
00:02:02Nous n'avons jamais besoin de quitter le terminal.
00:02:04Il appelle tous ces modèles d'image, notamment GPT Image 2, et tous les modèles vidéo, notamment Seedance, via ce MCP ou la CLI.
00:02:12Maintenant, pour connecter ces outils à votre agent d'IA de choix, vous allez simplement sur Higgs Field, vous allez dans MCP et CLI, et vous suivez ces étapes.
00:02:20Vous allez copier l'URL du MCP, puis effectuer le processus d'authentification.
00:02:25La seule chose dont vous avez besoin après cela, c'est de la compétence elle-même.
00:02:27Et j'aurai ma version liée ci-dessous également.
00:02:30Vous pouvez simplement copier l'URL, la donner à Claude Code ou Codex, ou vous pouvez le faire en tant que plugin.
00:02:35Les deux fonctionnent.
00:02:36Maintenant, comme je l'ai dit dans l'introduction, je vais faire la démonstration dans Codex avec le tout nouveau Sol 5.6, mais c'est ce à quoi cela ressemblait dans Claude Code.
00:02:44C'est exactement le même processus.
00:02:46Vous passez par une interview, vous lui dites quel type de site web vous essayez de construire, ce que vous voulez que chaque scène soit, et il vous guidera étape par étape.
00:02:53Et il s'assurera, par exemple, de vérifier si cette image vous plaît avant de créer toutes les vidéos.
00:02:57Vous ne vous contentez pas d'exécuter la compétence et de voir apparaître toutes les vidéos sans avoir eu votre mot à dire dans le processus.
00:03:01Il vous accompagne donc tout au long du processus.
00:03:04À l'intérieur de Codex, j'ai donc appelé la compétence “scroll world”.
00:03:07J'ai donc simplement tapé “/scroll world”.
00:03:08Et j'ai dit : “J'essaie de créer un site web pour une marque de voyage boutique au Japon”.
00:03:14Et la direction artistique générale que je souhaite est d'opter pour un style origami.
00:03:18Maintenant, si vous ne savez pas quel style vous voulez, vous pouvez simplement avoir un échange avec l'IA et elle vous posera plusieurs questions.
00:03:25Je savais déjà à l'avance ce que je voulais.
00:03:27Ne vous inquiétez donc pas si vous n'avez pas d'idée précise au départ ; après lui avoir donné une orientation créative, elle vous demandera quel est votre budget.
00:03:36Et ce que vous voulez faire en termes de budget mobile.
00:03:38Il demande combien de scènes vous voulez comme référence.
00:03:41C'était six scènes.
00:03:43C'est une quantité importante de vidéo, et c'est un voyage assez long du début à la fin.
00:03:48C'est probablement excessif pour la plupart des gens.
00:03:50De plus, cela va vous coûter beaucoup de crédits Higgs Field, environ 800 à la fin de la journée.
00:03:56Donc, si vous n'êtes pas sur l'un des forfaits les plus chers, vous devriez probablement vous en tenir à quatre scènes, ce qui est, je pense, un excellent équilibre.
00:04:03Ensuite, ce que vous voulez faire avec le mobile.
00:04:04Vous pouvez tout faire, du simple recadrage sécurisé jusqu'à une chaîne portrait complète, où il créera des vidéos supplémentaires spécifiquement pour mobile.
00:04:12Vous avez donc une certaine marge de manœuvre sur la profondeur que vous souhaitez atteindre de ce côté-là.
00:04:15Mais pour cette vidéo, nous allons simplement opter pour “lean” et “crop safe”.
00:04:20Donc les options les moins chères, et sachez que vous pouvez également faire moins de scènes.
00:04:24Vous pourriez descendre à trois, c'est juste ce qui est proposé par défaut.
00:04:28Mais ensuite, il vous emmènera à travers la proposition de voyage et vous dira : “Voici à quoi ressemblera chaque scène”.
00:04:32Et il indique combien de générations cela prendra.
00:04:35Il faudra donc au total quatre générations d'images, quatre vidéos de plongée dans la scène.
00:04:40Il doit y avoir un connecteur entre certaines des vidéos et quelques fondus enchaînés.
00:04:43Au total, il indique neuf générations et vous donne un temps de génération estimé, qui est généralement assez prudent.
00:04:49Cela ne prend généralement pas aussi longtemps, même si nous parlons de vidéo IA.
00:04:52Une fois que vous approuvez cela, la prochaine chose à faire est de générer l'ancre.
00:04:56L'ancre sera cette image de départ.
00:05:00Et nous parlons de cette image de départ.
00:05:01Nous parlons de quelque chose de similaire à ceci en arrière-plan.
00:05:03Ce sera juste une image fixe.
00:05:04C'est à vous maintenant de dire : “OK, j'aime ça”.
00:05:06C'est la direction artistique qui va dominer partout.
00:05:09Ou bien : “Non, changeons certains éléments”.
00:05:11C'est la partie sur laquelle vous devez vraiment réussir, car si vous n'aimez pas et que vous dites oui, tout sera basé là-dessus.
00:05:17Voici donc un aperçu de l'image créée.
00:05:19Et je l'aime bien maintenant.
00:05:20Vous l'avez probablement déjà réalisé.
00:05:21Si vous faites tout cela via Codex et Sol, eh bien, il y a la génération d'images.
00:05:26Nous n'avons pas besoin d'envoyer de requêtes à Higgs Field pour créer des images avec GPT Image 2
00:05:31quand nous avons nativement cette capacité à l'intérieur de Codex.
00:05:34Vous allez donc demander à Codex de le faire nativement, mais vous devrez tout de même l'envoyer à Higgs Field pour la génération vidéo.
00:05:41En revanche, si vous faites cela dans Claude Code, évidemment, il n'y a pas de génération d'images.
00:05:44Higgs Field doit donc porter la charge tout au long du chemin.
00:05:48Mais voici l'image.
00:05:50Je l'aime bien.
00:05:51Alors que faisons-nous ?
00:05:52Nous allons dire : “Hé, c'est génial”.
00:05:55Impossible de taper.
00:05:57Avancer.
00:05:59Donc, après 32 minutes, il a terminé notre site web.
00:06:01Nous avons quatre scènes différentes.
00:06:02Cela a pris 10 générations.
00:06:04Et maintenant, c'est sur notre hôte local, prêt à être utilisé.
00:06:06Alors regardons ça.
00:06:07Voici donc notre site de voyage au Japon.
00:06:08Ce que nous allons faire, c'est simplement le parcourir et en avoir un aperçu global.
00:06:12Donc les gens qui voyagent, ils ont le métro.
00:06:15Nous passons ici à la maison.
00:06:17Elle s'ouvre.
00:06:19Ensuite, ils vont à l'hôtel.
00:06:20Il se déplie.
00:06:22Plutôt cool.
00:06:23Et puis nous avons l'oiseau ici, qui commence à voler.
00:06:28Donc, globalement, qu'est-ce que j'aime ?
00:06:30Qu'est-ce que je n'aime pas ?
00:06:31J'aime les visuels.
00:06:32Je trouve que ça a l'air super cool.
00:06:34Vous savez, je pense qu'individuellement dans chaque scène, j'aime la façon dont chaque scène a progressé.
00:06:38Comme cette partie où le métro arrive.
00:06:41Génial.
00:06:41Mon problème ici, c'est la transition quand on passe de la scène un à la scène deux.
00:06:46Une coupure assez franche.
00:06:47Peut-être que vous voulez une coupure franche.
00:06:48En quelque sorte, je suppose qu'il y a une direction créative là-dedans.
00:06:51Mais c'est quelque chose qu'on pourrait changer.
00:06:52Même chose ici.
00:06:53Quand on passe de la scène deux, détails incroyables, pour être honnête.
00:06:57Mais quand on passe de la scène deux à la trois, encore une fois, une autre coupure franche.
00:07:01Par rapport à la scène trois à quatre, je pense que c'est une transition géniale.
00:07:04Donc ça s'ouvre.
00:07:06Boom.
00:07:06Ils sont à l'hôtel.
00:07:07Mais si vous regardez en arrière-plan, remarquez la scène numéro quatre, qui entre dans le cadre.
00:07:12Au début, c'est flou, ça apparaît, donne vraiment cet effet 3D.
00:07:17Et donne de la profondeur au site web.
00:07:19Et puis ça passe de manière transparente à la scène quatre.
00:07:22C'est génial.
00:07:23Si cela avait été le cas pour le passage de la scène un à deux et de deux à trois, j'aurais été super heureux.
00:07:28C'est ma principale plainte à ce sujet.
00:07:31Mais tout le reste a l'air bien.
00:07:32Et être capable d'ajouter ces sortes de transitions de scène et de lisser, je ne pense pas
00:07:35que ce serait trop difficile.
00:07:36Parce que si vous comparez cette génération, qui était encore une fois Sole GPT 5.6, à ce que nous avons créé
00:07:41dans Claude Code, les transitions de scène sont définitivement un peu plus élégantes ici.
00:07:45Donc c'est la scène un, n'est-ce pas ?
00:07:46Ces choses sortent du haut et c'est comme une transition transparente vers ces choses
00:07:52étant, eh bien, aussi proches de la transparence que possible, que ces choses soient comme des fils ici.
00:07:56Même chose ici.
00:07:57On entre.
00:07:58Oh, boom.
00:07:58Ça s'ouvre.
00:07:59Et puis on passe juste au-dessus à la scène suivante.
00:08:01Donc scène par scène avec les transitions Fable 5, je pense que nous sommes meilleurs.
00:08:06Même chose ici.
00:08:06Boom.
00:08:07Nous sommes là.
00:08:07Dézoomer.
00:08:08Scène suivante.
00:08:09C'est donc ma principale plainte.
00:08:11Je donnerais certainement l'avantage à Fable 5 par rapport à Sole 5.6 ici.
00:08:15Mais, c'est un “one shot
00:08:18Avec une seule compétence.
00:08:19Je suis très impressionné en général par la façon dont la compétence a été, vous savez, créée.
00:08:25C'est génial.
00:08:26Maintenant, la question suivante devient : OK, c'est un spectacle visuel.
00:08:29Pouvons-nous transformer cela en un site web plus fonctionnel selon ce que vous essayez de
00:08:33faire ?
00:08:33Et je ne pense pas que ce soit un problème du tout.
00:08:34Je pense que les problèmes techniques de création d'un site web à défilement animé comme celui-ci, qui
00:08:38a l'air cohérent et n'a pas l'air saccadé ou de faible qualité, sont assez difficiles.
00:08:43Vous savez, si je vous demandais de faire cela par vous-même, je pense que vous auriez beaucoup de mal
00:08:46et cela prendrait beaucoup de temps.
00:08:47Avec ce genre de base, je pense qu'il est vraiment facile de passer à : “OK, que faisons-nous
00:08:51avec le texte ?”
00:08:52Que faisons-nous avec le CTA ?
00:08:53Comment attirons-nous vraiment l'utilisateur depuis le héros ?
00:08:56C'est comme remplir un formulaire.
00:08:57Je ne pense pas que ce soit trop difficile.
00:08:58Je ne pense pas que nous ayons besoin de réinventer la roue ici.
00:09:01C'est ce que fait chaque site web.
00:09:02Et être capable de mettre ça par-dessus ce que nous avons ici, encore une fois, avec Fable 5 et avec
00:09:065.6 n'est pas un défi du tout.
00:09:09Et le fait que ce soit juste une compétence dans un “one shot” est époustouflant.
00:09:13Encore une fois, si vous voulez faire cela par vous-même, il y a trois mois, six mois, neuf mois
00:09:16c'était une vraie corvée.
00:09:18Donc encore une fois, merci à Peter Wang pour la version originale de la compétence.
00:09:21Les deux versions, la mienne et la sienne, seront liées au bas de cette description.
00:09:24Et comme vous l'avez vu, c'est super simple.
00:09:26Vous n'avez vraiment rien à faire.
00:09:27Vous avez juste besoin de vous présenter.
00:09:28Vous avez besoin d'invoquer la compétence.
00:09:29Vous avez besoin de lui donner une orientation créative, et elle va juste se mettre au travail.
00:09:32C'est donc là que je vais vous laisser pour aujourd'hui.
00:09:37Faites-moi savoir, comme toujours, ce que vous avez pensé de cela dans les commentaires.
00:09:40Assurez-vous de consulter Chase AI Plus si vous voulez mettre la main sur ma maîtrise de Claude Code
00:09:43et d'autres leçons d'IA comme celle-ci.
00:09:46Et à part ça, je vous dis à bientôt.