00:00:00Aujourd'hui, vous allez apprendre à combiner les puissances du tout nouveau Claude Design et de Seed Dance 2.0
00:00:06pour créer des sites web animés comme celui-ci. Je vais vous montrer tout mon flux de travail, étape
00:00:12par étape, afin que vous puissiez le reproduire même si vous n'avez jamais fait ce genre de chose auparavant. Et en
00:00:17chemin, je vais vous montrer comment tirer le meilleur parti du tout nouvel outil d'Anthropic avec quelques astuces et
00:00:22conseils. Maintenant, lorsqu'il s'agit de créer une page web comme celle-ci, le premier point de départ est cette
00:00:28vidéo d'arrière-plan, et pour l'obtenir, nous avons d'abord besoin d'une image de départ. Maintenant, nous allons
00:00:32créer cette image de départ en utilisant Nano Banana Pro, puis nous prendrons cette image de départ
00:00:37et la transformerons en vidéo en utilisant Seed Dance 2.0, et tout cela se passera ici sur Higgsfield, qui
00:00:44est ma plateforme unique pour tous les outils de création de contenu par IA. Donc, pour commencer, nous allons juste aller
00:00:49sur l'image et nous diriger vers Nano Banana Pro, et immédiatement vous verrez certaines des images sur lesquelles j'ai travaillé
00:00:55et elles devraient vous sembler très familières par rapport à notre page web, en particulier celles-ci. Maintenant, le prompt exact
00:01:01que j'utilise peut être trouvé dans mon école gratuite, et il y aura un lien vers celle-ci dans la description
00:01:05mais ce sur quoi je veux me concentrer ici, quand nous parlons de l'image, c'est moins sur le prompt spécifique
00:01:11lui-même, car l'image que vous voudrez créer sera différente de la mienne
00:01:15mais davantage sur la composition. Pourquoi cette image est-elle configurée de cette manière ? Eh bien, quand nous regardons le
00:01:21produit final ici, c'est assez évident, non ? Nous avons cette grande image héroïque occupant le côté droit
00:01:26de l'écran, mais nous avions encore besoin d'un espace vide sur la gauche pour notre texte, et quand j'ai demandé à Nano Banana
00:01:31Pro de créer cette image, j'avais ce type de composition en tête. Je me suis dit : "Ok, nous allons avoir une image
00:01:38qui est comme coupée en deux, sur le côté droit nous aurons notre image flashy, et puis sur
00:01:44la gauche, c'est là que le texte principal sera, donc c'est une sorte de slogan ici
00:01:51nous allons avoir une sorte de bannière en haut avec la barre de navigation où les gens peuvent, vous savez, aller
00:01:55sur la page d'accueil ou les différentes pages. Nous aurons des boutons ici du type "S'inscrire"
00:02:00ou "En savoir plus", et peut-être que nous aurons une sorte de ticker en bas. Je le savais déjà en
00:02:04commençant, et c'est quelque chose que vous devez savoir avant de demander à Nano Banana Pro de créer l'image
00:02:10pour vous, car quelle que soit la composition résultant de cette configuration, cela va dicter
00:02:17votre prompt. Et maintenant, votre question est probablement : "Eh bien, Chase, je n'ai aucune idée de ce que sont mes options. Je
00:02:22ne sais pas quelle devrait être la composition en premier lieu. Comment puis-je le découvrir ?" Eh bien, la
00:02:25façon la plus simple de le faire est de trouver des sites web que vous aimez et de commencer à décomposer leur composition de héros et
00:02:30de page de destination. Et un excellent endroit pour voir des exemples de cela est Dribbble. Donc, c'est
00:02:35Dribbble avec trois B. Si je cherche "landing page saas", vous pouvez chercher "landing page"
00:02:40peu importe, vous verrez de quoi je parle. Alors, que voyons-nous ici ? Celle-ci juste ici, eh bien
00:02:47ils ont mis l'image en bas et le texte en haut. Nous pourrions faire quelque chose de similaire avec
00:02:52ceci, n'est-ce pas ? Nous pourrions déplacer l'élément vers le centre, peut-être mettre les nuages sur les côtés
00:02:56à la place, et ensuite le texte va ici. Encore une fois, cela change entièrement la composition. Ou voulons-nous quelque chose
00:03:02comme ça, où l'image est au centre de l'attention et le texte se place autour, et nous ajoutons d'autres éléments
00:03:07vous savez, au fur et à mesure que vous faites défiler, vous voyez qu'il y a un million de façons différentes
00:03:11de le faire, mais vous devez le savoir à l'avance, ou au moins avoir deux ou trois idées
00:03:16dans votre poche, et ensuite, quand vous allez sur Nano Banana Pro, vous pouvez lui donner des prompts qui reflètent ce
00:03:22style. Donc, pour récapituler, lorsque nous créons notre image, la chose la plus importante à définir est la
00:03:26composition. Et par composition, je veux dire : où sera l'espace vide ? Où sera ce texte ?
00:03:32Est-ce que ce sera à gauche, au centre, à droite, en haut ? Peu importe, vous devez juste choisir et avoir
00:03:37votre prompt qui reflète cela. Et aussi, en ce qui concerne le prompt, appuyez-vous sur des outils comme Claude pour vous aider
00:03:42à l'écrire. Maintenant, pour notre démo d'aujourd'hui, nous utiliserons cette image et j'aurai aussi une copie
00:03:47de celle-ci dans la communauté si vous voulez juste me copier étape par étape. Et avec notre image fixe
00:03:51en main, maintenant nous allons nous diriger vers Claude Design, et le flux général sera : image créée dans
00:03:56Nano Banana Pro, nous allons maquettage notre site web ici dans Design, et une fois que nous aurons un site web que nous aimons,
00:04:01vous savez, un design que nous aimons, une page de destination et tout ça, alors nous prendrons cette image et la transformerons en
00:04:05une vidéo, car c'est très simple à faire comme étape finale. Donc, si vous êtes tout nouveau sur Claude Design
00:04:10ne vous inquiétez pas, nous aborderons les points importants dans cette vidéo, mais j'ai aussi une plongée
00:04:14en profondeur qui va un peu plus dans les détails que vous devriez regarder aussi, et je mettrai le lien ci-dessus. Mais pour
00:04:18nos besoins, ce que nous voulons faire, c'est aller ici à gauche sur "prototype" et nous allons
00:04:24juste lui donner un nom de projet. Je vais appeler le mien "sd2" pour "design system". Vous n'aurez probablement pas
00:04:30de système de design, vous n'en avez pas besoin dans ce cas pour l'instant. Encore une fois, si vous voulez en savoir plus sur les systèmes de design
00:04:35regardez cette vidéo approfondie. Nous allons faire de la haute fidélité, puis nous allons créer
00:04:40cela nous mènera ensuite à cette page, et la première chose que nous voulons faire est d'ajouter un peu de contexte
00:04:45et le contexte que nous allons ajouter est l'image que nous avons téléchargée. Donc, vous pouvez voir ici en bas à gauche
00:04:49que j'ai téléchargé ma capture d'écran. Ensuite, nous voulons lui donner un prompt. Maintenant, vous pouvez continuer à ajouter plus
00:04:55de captures d'écran ici, et je vous conseille vivement de le faire si vous aviez de bons exemples provenant de quelqu'un comme Dribbble. Donc
00:04:59si vous avez trouvé quelque chose sur Dribbble que vous aimez en termes de composition globale, ajoutez-le aussi
00:05:04Maintenant, quand il s'agit du prompt lui-même, je vous suggère fortement de vous appuyer sur quelque chose comme Claude
00:05:09Code pour l'écrire pour vous. Et voici un aperçu du prompt que Claude Code a proposé, que je vais
00:05:13coller dans Claude Design. C'est pour notre fausse entreprise SaaS, Olympus, qui est une plateforme
00:05:19d'intelligence de marché, donc cela explique ce que fait l'entreprise, cela devient assez détaillé avec le "hero", parle de
00:05:25quelles sections il veut voir sur la page de destination, puis ajoute des choses avec, genre, du mouvement. Maintenant,
00:05:30très important, nous avons cette ligne à la fin qui dit : "Pose-moi des questions avant de commencer". La chose cool
00:05:36à propos de Claude Design, c'est qu'il peut agir un peu comme Claude Code en créant un mode "plan"
00:05:42Donc, je vais lui donner un prompt, exactement celui que vous voyez ici, et ensuite il va me poser un tas
00:05:46de questions pour mieux cerner ce que j'essaie de construire. Et la chose géniale à propos de ce
00:05:50mode "plan" où il nous pose des questions, c'est que si vous arrivez avec un mauvais prompt qui
00:05:54n'est même pas à moitié aussi détaillé que celui-ci, vous pouvez aller dans Claude Design et obtenir un premier
00:06:01jet assez robuste parce que vous avez passé tout ce processus de questions-réponses avec Claude. Donc, j'ai tout collé là-dedans et nous allons
00:06:06juste appuyer sur "envoyer". Maintenant, une petite remarque ici sur l'utilisation de Claude Design : Claude Design fonctionne sur
00:06:11ses propres limites d'utilisation, c'est séparé de vos limites "Pro", ou de vos limites "Max 5" ou "Max 20" avec
00:06:18Claude. C'est sa propre chose et cela peut être un peu gourmand en ressources, donc gardez toujours un œil dessus. Dans mon cas
00:06:23j'ai déjà dépassé mes limites parce que je l'ai beaucoup utilisé, donc je suis sur mon utilisation supplémentaire.
00:06:28Pour référence, quand j'ai fait tout ce processus que vous voyez aujourd'hui, de mon côté, en termes d'utilisation
00:06:33supplémentaire, cela m'a coûté environ cinq dollars pour créer la page de destination, et j'aurais pu obtenir cela encore
00:06:38moins cher, mais juste pour que vous ayez une idée de notre situation. Et voici les questions qu'il me renvoie
00:06:43donc : questions sur la typographie, section... que voulons-nous faire ? Faisons un thème moderne et mythique. Palette de couleurs :
00:06:52faisons "inversé". Et finalement, nous aurons plus d'options une fois qu'il aura créé cela en utilisant des "tweaks"
00:06:58comme vous le verrez plus tard. Voix de copie : mettons du "mythique" saupoudré dedans, parce qu'au cas où vous ne l'auriez pas réalisé
00:07:06nous faisons comme si Olympus était le nom de l'entreprise, c'est comme une application d'intelligence, donc toute cette image
00:07:11avec laquelle nous avons travaillé est censée être comme une analogie avec le feu prométhéen. Donc, composition du "hero":
00:07:17image "full bleed". Faisons une image "full bleed". Ordre des sections : boom, boom, boom, boom. Et vous
00:07:26pouvez toujours décider pour moi si vous ne savez même pas. Euh, preuve sociale : décide pour moi, décide pour moi.
00:07:32Et voici une chose cool : les "tweaks". Donc, les "tweaks" auront plus de sens ici dans une seconde, mais je suggère toujours
00:07:39d'utiliser autant de "tweaks" que possible et nous pourrons toujours en ajouter plus tard. Donc, nous allons appuyer sur "continuer"
00:07:45et maintenant il va de l'avant et crée cette chose pour nous. Maintenant, un rapide tour d'horizon
00:07:50de Claude Design pendant qu'il construit. Ici en haut à droite, là où c'est écrit "share" (partager), si je clique là-dessus
00:07:56nous ne sommes pas coincés dans Claude Design pour toujours. Ce qui est vraiment cool à propos de ça, et ce que je vous montrerai plus tard
00:08:01c'est que nous pouvons exporter cela vers Claude Code et ensuite, une fois que nous avons une solution à 89%, nous avons fini
00:08:07d'être écrasés en termes d'utilisation, nous pouvons l'apporter à Claude Code et travailler dessus à notre, vous savez
00:08:12cœur joie. Nous pouvons aussi l'exporter en HTML, l'envoyer sur Canva, exporter en PowerPoint ou PDF pour
00:08:17télécharger des choses. Donc, nous pouvons aussi faire venir des coéquipiers, donc vous pouvez faire de ceci une chose collaborative. Donc
00:08:22beaucoup d'options, et Claude Design dans son ensemble est très polyvalent. Et voici ce que Claude Design a
00:08:27renvoyé, et je vais déplacer tout cela un peu partout pendant cette vidéo. Maintenant, première chose à attirer
00:08:33votre attention : les "tweaks" ici sur la droite. Donc, les "tweaks" sont un menu sur cette page qui nous permet
00:08:40de changer très rapidement différents micro-éléments de notre page. Donc, je peux changer les accents, je peux changer
00:08:48le thème de clair à sombre, ce qui est plus évident ici en bas. Vous pouvez changer le logo du titre,
00:08:54les noms des prix, n'importe quel type de mouvement. Donc, cela rend très, très facile l'itération entre différentes versions de
00:09:03notre site. Au-delà de ça, j'ai la capacité d'éditer des choses à un niveau granulaire. Si je viens ici dans le
00:09:07coin supérieur droit et que j'appuie sur "edit" (éditer), je peux cliquer sur différents éléments comme ce bouton ici en haut, et je peux changer
00:09:13la couleur directement, je peux changer la police, vous savez, le rembourrage ("padding"), l'opacité, tout. Et j'ai aussi
00:09:19la capacité de commenter, donc je peux cliquer sur ce même bouton, et au lieu de changer réellement les
00:09:25valeurs spécifiques, je pourrais laisser un commentaire comme "rends-le plus grand", "rends-le plus petit", ou je peux dessiner dessus. Donc je
00:09:30peux dessiner sur cette chose, vous savez, sélectionner tout ça et dire genre : "Hé, déplace à gauche", puis envoyer ça à
00:09:39Claude ici en bas, et cela prendra essentiellement une capture d'écran de ce que je viens d'écrire
00:09:44et il sera comme : "Oh, d'accord, déplaçons ça un peu à gauche". Et on peut voir, maintenant il l'a déplacé à gauche, et
00:09:49il a cette chose hideuse qui se passe là, que nous pouvons supprimer aussi. Mais ce que vous devriez faire à ce
00:09:55point-là, c'est d'abord, vous savez, avoir un coup d'œil rapide sur, genre, ok, que pensez-vous du design global
00:10:02premier jet semble bien. Plus important encore, en termes de notre image, devons-nous retourner à l'intérieur
00:10:09de Nano Banana Pro et éditer cette image ? Devons-nous la rendre plus petite, plus grande, peu importe ? Si ça semble
00:10:14bien, ma suggestion quand nous sommes dans Claude Design est d'utiliser une sorte de processus en deux étapes. Un : ce que je veux
00:10:21faire, c'est que je veux voir différentes variantes de ma page web, et je ne parle pas de petits ajustements,
00:10:26je veux voir au moins deux mises en page complètement différentes pour avoir une idée du chemin que
00:10:32je veux suivre. Et une fois que nous trouvons une variante que nous aimons au niveau macro, eh bien, nous nous concentrons dessus et nous
00:10:37obtenons plus de "tweaks" qui nous sont montrés, pas juste cinq "tweaks", je parle d'environ 15 "tweaks", pour que nous puissions vraiment obtenir
00:10:43quelque chose que nous aimons, parce que le but est d'arriver à une solution à 90% avant d'intégrer la vidéo et ensuite
00:10:48avant de l'apporter à Claude Code pour en faire la nôtre. Et pour faire cela, c'est vraiment facile. Tout ce que nous avons
00:10:53à faire, c'est de demander à Claude Design : "Peux-tu créer deux variantes de mise en page supplémentaires pour notre
00:10:58page web, que je peux cliquer en plus de celle-ci ?". Donc, juste quelques nouveaux designs que nous pourrions
00:11:03inclure. Et cette idée de créer des variantes macro, et une fois que nous décidons d'une variante, de créer une tonne
00:11:09de "tweaks", c'est ce qui sépare vraiment Claude Design de Claude Code. Maintenant, prompt
00:11:16pour prompt, dans le vide, je pense que Design est un petit peu meilleur que Claude Code pour le front-end, mais ce
00:11:20genre de variation et d'itération visuelle que nous pouvons faire très, très rapidement, je pense que c'est le gros
00:11:27déblocage avec Claude Design, et c'est là que réside la valeur. Parce que si nous essayons de faire la même chose à l'intérieur
00:11:32de Claude Code, c'est un peu laborieux. Donc, voici ce dont je parle : en haut, nous avons la version cinématique
00:11:37qui était l'originale, et maintenant il nous a donné une version "archive" ainsi qu'une version "terminal", et vous pouvez
00:11:45voir qu'elles sont toutes assez uniques. Et cela s'applique aussi au reste de la page, pas juste à la section héroïque
00:11:53mais à tout. Et honnêtement, en regardant ça, je pense que le "terminal" a l'air assez malade. Nous devrions
00:12:01changer l'image ici et nous devrions définitivement nous éloigner de la vidéo, mais immédiatement
00:12:09vous voyez ça, et je pense que ça a l'air vraiment cool et ça a l'air définitivement différent de votre
00:12:13page web quotidienne créée par IA standard. Donc, c'est de ça dont je parle quand il s'agit d'en
00:12:20fait exploiter la puissance de Claude Design, de voir ces variations, parce que j'aurais
00:12:24jamais pensé à faire quelque chose comme ça ou même su comment le "prompt" pour me donner ça. Je
00:12:29aime vraiment ça, mais pour garder cette vidéo sur la bonne voie, ce que nous allons faire, c'est que nous resterons avec la
00:12:35cinématique, mais je voulais vous montrer ça parce que l'idée est que vous faites ceci, choisissez celle que vous aimez, et ensuite
00:12:40vous passez à l'étape deux du processus de Claude Design, qui est : des "tweaks", des "tweaks", des "tweaks". Donc, nous avons tous
00:12:46ces "tweaks" ici, mais tout comme la façon dont j'ai demandé à Claude Design plus tôt de me donner plus de variations, maintenant
00:12:51je vais lui demander d'être très agressif avec les "tweaks" qu'il me donne. Je n'ai pas besoin de savoir quels "tweaks"
00:12:56je veux, je n'ai pas besoin de savoir si, oh, je veux être capable de changer le thème ou le titre ou le logo. Je
00:13:00ne sais pas, donne-moi juste un tas et nous le découvrirons. Donc, j'ai écrit ici : "Restons avec la
00:13:04cinématique, tu peux supprimer les deux autres, et aussi, augmente agressivement le nombre de "tweaks" disponibles"
00:13:11et nous verrons ce qu'il propose. Maintenant, nous pouvons voir tous les "tweaks" supplémentaires qu'il a ajoutés. Donc, nous
00:13:15sommes passés d'environ cinq "tweaks" à environ 15 environ, ce qui est super. Donc, nous avons ces originaux
00:13:22avec les accents, le thème, le logo, celui-là a l'air bien, les polices, police du corps, police mono, échelle de type...
00:13:36attends, le point est que je peux maintenant parcourir tous ces réglages encore et encore et encore. Je peux même
00:13:42changer la noirceur de l'overlay CTA, la lueur des braises ("ember glow"), genre, ça ne s'arrête pas, ça ne s'arrête pas. Donc, j'ai parcouru
00:13:51tous les "tweaks" de mon côté, je me suis débarrassé des braises, et voici ce que nous avons finalement obtenu. Maintenant, j'ai
00:13:56la possibilité de le regarder en plein écran si je vais sur "présent" en haut, en plein écran, pour que nous puissions avoir une meilleure idée de
00:14:02ce à quoi ça ressemblera. Et pour l'instant, pour moi, ça a l'air plutôt bien. Rappelez-vous, nous n'avons pas besoin d'une solution
00:14:08à 100% à l'intérieur de Claude Design, nous voulons nous rapprocher le plus possible. Nous voulons prendre toutes les décisions de design
00:14:14que nous pouvons, et ensuite ce que nous voulons finalement faire, c'est l'apporter à Claude Code et faire les
00:14:18mineurs ajustements, parce que rappelez-vous, Claude Design est un gros consommateur de ressources, vous obtenez seulement une certaine utilisation, donc nous voulons faire
00:14:23en sorte que ça compte. Donc, maintenant, nous pouvons faire la transition vers la section vidéo où nous prenons cet arrière-plan et l'animons réellement.
00:14:29Maintenant, petite remarque, il est important que nous ayons fait tout cela avec l'arrière-plan fixe, parce que
00:14:35quand nous parlons des utilisateurs mobiles, nous ne voulons pas que nos utilisateurs mobiles soient frappés par une vidéo géante qui
00:14:39peut les ralentir. Donc, si quelqu'un est sur mobile et qu'il va sur notre site web que nous avons configuré ici, ils
00:14:43vont juste voir l'image fixe. Donc, nous allons utiliser CDance pour cela. Donc encore une fois, je suis de retour ici à l'intérieur
00:14:47de Higgsfield, je vais aller sur CDance 2.0. Vous n'avez pas à utiliser CDance, CDance est juste le meilleur qui existe
00:14:52actuellement. D'autres options incluent Kling 3.0, vous pouvez aussi utiliser quelque chose comme VEO 3.1. Et la configuration vidéo
00:14:58est très facile, littéralement, vous allez juste prendre votre image et vous allez la déposer ici
00:15:04donc vous la faites littéralement glisser et déposer ici comme image de départ, et ensuite nous lui donnons juste
00:15:08un prompt. Maintenant, le prompt est très basique, tout ce que j'ai écrit était : "Garde le mouvement extrêmement lent, les nuages bougent à peine
00:15:15les braises du feu dans ses mains dérivant lentement", et nous obtenons quelque chose comme ceci. Nous voulons
00:15:21subtil, nous ne voulons pas de fou, vous ne voulez pas que ça ressemble à un jeu vidéo sauvage, vous voulez presque juste
00:15:26que cela ressemble à un gif animé discret, et c'est parce que l'image héroïque nous donne juste un peu de
00:15:32style à notre site, vous ne voulez pas que ça prenne le dessus sur tout. Et deuxièmement, comme vous le verrez ici, c'est
00:15:37ça va boucler, parce qu'au plus vous obtiendrez 15 secondes de cette chose. Idéalement, vous pouvez créer
00:15:43une boucle parfaite, mais cela peut être assez difficile. Donc le meilleur pari est de faire ce que nous avons fait ici et juste avoir une
00:15:48vidéo de 15 secondes, ce qui semble être beaucoup au début, mais ce n'est vraiment pas trop lourd. Et l'autre
00:15:54chose, quand nous optons pour 15 secondes, les chances sont que quelqu'un aille sur votre site web et qu'il
00:15:59reste juste là sur votre page "hero" à lire pendant 15 secondes, puis ils sont surpris par
00:16:04la coupure quand ça revient en boucle, c'est improbable. Ce qui arrive le plus probablement, c'est qu'ils vont sur
00:16:10votre "hero", wow, ça a l'air cool, 10 secondes plus tard ils descendent le reste de la page pour voir ce que vous
00:16:15êtes. Donc, gardez le prompt simple, gardez-le subtil. Si vous voulez devenir fou, allez-y, faites-le
00:16:20aussi longtemps que possible pour 15 secondes, vous voulez que ce soit en 16 par 9 et vous voulez que ce soit au moins
00:16:261080p. Certains modèles vous donneront l'option d'améliorer le prompt, où c'est comme pratiquement
00:16:30dire : "Hé, tu as mis ton mauvais prompt et nous, on le rend meilleur". Ne faites pas ça, vous voulez toujours un contrôle total
00:16:34de votre prompt, et attendez-vous à devoir faire quelques variations de ceci jusqu'à ce que vous l'obteniez
00:16:40correct. Donc, probablement pour en obtenir une qui fonctionne vraiment, vous allez devoir faire ça quatre ou cinq fois
00:16:45jusqu'à ce que vous obteniez enfin le résultat que vous cherchez. Mais une fois que nous obtenons ce résultat, tout ce que nous devons faire est
00:16:50le télécharger et ensuite nous revenons dans Claude Design et nous allons juste déposer ce fichier mp4 dans
00:16:57la fenêtre de prompt. Donc, je viens de le télécharger ici en bas à gauche et ensuite j'ai écrit : "Peux-tu échanger l'image fixe
00:17:01pour la vidéo que je viens de télécharger pour l'arrière-plan héroïque ?" Et ensuite, il vous donnera quelque chose comme
00:17:05ceci, et c'est assez littéralement aussi simple que ça. Et c'est à ce point que nous avons pratiquement fini à l'intérieur
00:17:12de Claude Design. Je veux dire, si vous voulez faire plus de changements, faites plus de "tweaks", c'est totalement à vous de voir. Mais si
00:17:17vous êtes à cet endroit, je dirais que vous êtes prêt à réellement sortir de Claude Design et maintenant apporter
00:17:22cela dans quelque chose comme Claude Code, comme nous en avons parlé plus tôt. Très facile à faire, nous allons aller sur
00:17:26partager et nous allons aller sur "hand off to Claude Code". Maintenant, parce que cela inclut une vidéo dans un mp4
00:17:34si vous essayez juste de faire la commande "copier", cela pourrait avoir du mal à le télécharger réellement. Donc ce
00:17:38que vous allez vouloir faire à la place, c'est juste télécharger le zip. Donc, il va prendre
00:17:44tous les fichiers, toute cette vidéo en direct, tout ce qui concerne le codage sous le capot et juste le mettre dans un fichier zip
00:17:49et donc vous pouvez faire "download zip", vous voulez ensuite extraire tout cela et ensuite vous allez juste
00:17:56prendre ce dossier extrait, le déposer dans Claude Code et dire "télécharge tout, nous allons maintenant
00:18:03créer un site web en utilisant tout ce code", et vous avez pratiquement fini à ce point. Donc, je l'ai déposé
00:18:10et j'ai dit : "Extrais tous ces fichiers pour la page web que nous construisons et ensuite fais tourner un serveur de développement" et
00:18:14voici la page web sur le serveur de développement, elle a été lancée et avec ça le transfert vers Claude Code est complet.
00:18:19Vous avez configuré la section héroïque animée, elle a la vidéo, elle a l'image fixe, tout est prêt à fonctionner
00:18:25pour que vous puissiez faire des changements mineurs et ensuite le pousser vers GitHub avant de le pousser vers Vercel et de l'héberger réellement
00:18:29en ligne. Donc, c'est là que je vais vous laisser pour aujourd'hui, j'espère que cela a pu apporter
00:18:33un peu de lumière sur comment combiner la puissance de Claude Design et de Seed Dance 2.0 pour créer ces types de
00:18:39sites web animés. Comme toujours, faites-moi savoir ce que vous en avez pensé, assurez-vous de consulter "chase ai" si
00:18:44vous voulez mettre la main sur toutes ces ressources et je vous verrai plus tard.