Le workflow IA ULTIME pour créer un site pro : Claude Design → GPT Image 2 → Claude Code

Dans cette vidéo, je te montre comment je crée ce genre de site internet avec Li à Z. Déjà, on va voir comment faire le design, comment l'éditer, comment l'améliorer. Ensuite, on va changer ce design en code. On va bien entendu respecter les bonnes pratiques en versionnant notre projet. Comme ça, s'il y a une erreur, on peut revenir en arrière. Puis on va créer des animations avec GSAP. On va bien entendu faire très attention à la sécurité et au SEO. Et finalement, on va déployer tout ça comme ça tout le monde pourra voir notre site. Mais pour commencer, il faudrait trouver de l'inspiration pour le design. Je pense ici qu'un bon réflexe, c'est déjà d'aller sur BNS. Donc là, si je dois faire un web design de burger, ben je vais chercher directement ici de l'inspiration à la fois au niveau des web design, mais aussi au niveau d'autres choses que je vais vous exposer dans un instant. En tout cas, si un design me plaît, je l'enregistre. Mais c'est vrai qu'il est aussi très important de s'inspirer au niveau du branding directement. Et c'est pour ça que j'essaie vraiment ici de m'intéresser à ce sujet et de voir des éléments hein, des choses de branding, des vraiment des mises en contexte du brand dans le restaurant. Donc là, ça m'arrive de regarder pas mal de branding jusqu'à trouver vraiment celui qui m'intéresse, qui me séduit et qui je pense va vraiment aller avec mon concept que j'ai en tête. Et encore une fois, si j'ai un branding qui m'intéresse, paf, je l'enregistre. Ensuite, puisque moi j'ai envie d'un site de burger qui est un peu dans le dark, tout ce qui est un peu noir comme cela, bah justement je vais un peu regarder à ce niveau-là qu'est-ce qui se fait et pas forcément dans le style du burger, voir vraiment ce qu'il se fait à ce niveau-là. Bon, des fois, on tombe sur des choses qui peuvent paraître intéressantes mais qui ne le sont pas. Ensuite, par moment, il est possible de trouver des choses intéressantes sur Pinterest. Maintenant, prenez vraiment en compte que pour en tout cas ici vraiment les sites de burger sur Pinterest, la plupart des sites d'il y a pas mal d'années. Donc j'ai vraiment dû chercher intensément ici pour trouver des choses cohérentes avec les goûts du jour. Après, ce que je voulais aussi faire, c'est générer les images des burgers moi-même. Donc, pour savoir quoi générer, j'ai besoin d'inspiration. Comme ça, je vais ensuite donner ces images de burger à Claude et je vais lui dire "Ben moi, j'aurai des burgers différents. Je vais avoir des burgers avec de la truffe et cetera et cetera." En tout cas, je vais demander ensuite à Claude de me générer lui-même les prompts pour chat GPT image 2 que je vais utiliser pour générer les sites de burger. Donc là, c'est important de prendre deux trois burgers qui vous plaisent vraiment bien, d'enregistrer les images parce qu'on va passer ces images directement dans Cloud pour qu'il nous génère ensuite les prompt GPT. Donc voilà, là ça m'arrive en effet de trouver vraiment de belles images. Donc dès que je les trouve, paf, je les enregistre. C'est vraiment très important pour donner un maximum de contexte à ce que je veux. Et c'est vraiment très important ça, c'est avant d'aller tout de suite sur Cloud Design, essayez d'avoir un maximum de contexte sur ce que vous voulez. Pour avoir un maximum de contexte sur ce que vous voulez, vous allez justement ici aller sur cloud.ai et discuter avec lui. S'il y a bien quelqu'un qui connaît bien Cloud Design, bah c'est cloud.ai et cloud.ai AI vous permettra justement ici d'avoir le meilleur prompt possible pour ensuite attaquer Cloud Design de façon intelligente. Et plus vous attaquez Cloud Design de façon intelligente, moins vous allez dépenser de token pour rien et moins vous allez générer de la doobee complète. Ensuite, ce qui est vraiment très important pour que Cloud Design puisse mieux saisir ce qu'il y a sur les images, c'est de les renommer. C'est pour ça que je passe pas mal de temps à les renommer et si j'ai une image de burger, ben je vais la renommer en tant que image de burger. Si j'ai une image de brand, je vais la renommer en tant qu'image de brand. Si j'ai une image de web design, voire plusieurs, j'aurais du coup bah quelque chose du style image web design 1, image web design 2, image web design 3. Et ensuite là la base du travail c'est le prompt. Alors je vous passerai le prompt que j'ai utilisé en description directement mais ici ce qu'il faut retenir c'est de donner le maximum d'informations sur ce que l'on veut. Donc moi pour le moment, j'ai envie de générer pas mal de choses. J'ai envie de générer justement le prompt à passer dans Cloud Design. Mais avant aussi, j'ai envie de générer les prompt pour générer les images des se burgers directement avec chat GPT. Le mieux ensuite, surtout dans le prompt, c'est de lui dire "Si tu as un doute, si tu as besoin vraiment d'avoir des informations supplémentaires, pose-moi des questions." C'est vraiment très important ça. Claude a priori ne peut pas tout savoir. Souvent quand on prompte, on pense qu'on est assez clair. Or souvent on ne l'est pas. Donc n'hésitez vraiment pas à lui dire "Pose-moi des questions si tu as besoin ici d'information supplémentaire". Ça ça va absolument tout changer. Et ensuite, prenez le temps aussi parce que ça souvent on oublie, prenez le temps d'analyser chaque réponse. Chaque réponse aura une incidence sur la suite. Souvent, on veut aller un peu trop vite dans l'air de l'IA. Or, vraiment le prompt, la qualité du prompt que l'on va passer autant pour générer les images que pour générer ensuite le prompt cloud design est vraiment super importante parce que de là, comme dit, va tout découler. Voilà. Donc ensuite, on va un peu plus loin vraiment sur le web design. Il va aussi me poser des questions à ce niveau-là. Donc c'est vraiment ici important de comprendre la question. Si vous avez des doutes, n'hésitez pas directement bah justement à demander à Claude dans une autre fenêtre si vous comprenez pas toutes les questions qu'il vous pose et les incidences qu'on ces questions sur le résultat final. Voilà. Donc là, il est en train de me générer ensuite le prompt final et surtout il est en train de me générer les prompts pour chat GPT. Et regardez vraiment la longueur des prompts qu'il est en train de me faire pour chat GPT. Chat GPT, c'est la même chose que Claude. Plus il y a de contexte, mieux c'est. plus s'il y a de contexte à priori mieux il a compris votre besoin. Donc là, j'ai vraiment des prompts super longs que je passerai ensuite à chat GPT pour me générer les images. Et quand je vois la longueur de ces promptes, je suis plutôt rassuré sur le résultat final. Je sais déjà qu'à priori, il a compris ce que je voulais. Ensuite, je vais sur chat GPT. J'ouvre tout simplement une nouvelle conversation. J'ai pas besoin de préciser que c'est une image. Le prompt le fera. Chat GPT viendra comprendre ça. Je passe mon prompt par conséquent à chat GPT. Et personnellement, j'ai été très content du résultat ici que j'ai obtenu. Vraiment, je suis vraiment très content du résultat. Si je suis content du premier résultat, c'est très bien ici, je passe à la suite. Si je ne suis pas content avec le premier résultat, je prends un screenshot du résultat, je vais dans Cloud, je dis exactement ce qui ne va pas et lui va venir adapter le prompt et ensuite je vais venir repasser le prompt directement ici à chat GPT. Et on termine du coup ici avec les images des burgers générés. Et là je regarde un peu ce que j'ai et je suis vraiment très content du résultat. Donc je vais venir enregistrer chaque image et ensuite je passerai directement ces images à Cloud. Ensuite attention pour la suite. Il ne faut pas ici que Cloud Design ou Cloud viennent mélanger les burgers. Le classique ce n'est pas le fermier. Le végétal ce n'est pas le classique. Donc ici ce qui marche bien c'est de venir renommer vraiment les images et directement dire dans le nom des images ce que c'est. Et comme ça, quand je vais passer ces éléments à cloud ou à cloud design, il ne fera pas d'erreur. Il prendra pas l'image du burger classique pour l'image du burger fermier. Maintenant, c'est pas terminé. Il faut adapter ici le prompt de Clude Design. Et souvenez-vous, au début du prompt, j'avais passé trois images de burger pour qu'il me génère en fonction de ces images de burger les promptes pour chat GPT. Donc je vais lui dire de ne plus utiliser ces images. Moi j'ai désormais mes six images de burger qui sont bien. J'avais aussi remarqué que dans le prompt qu'il m'avait généré que je devais passer à Clud Design, il avait oublié de mettre les ingrédients pour chaque burger et chaque burger aussi ainsi que le prix. Donc regardez toujours ce que vous dit Cloue parce que si vous passez comme dit des éléments qui sont incomplets ensuite à Cloud Design, vous allez vous en rendre compte trop tard et puis vraiment Cloud Design consomme énormément de tokens. Ça va très vite, on passe très vite la limite. Donc autant prendre son temps au niveau de Claude. On passe déjà beaucoup de temps vraiment ici à mettre en place le contexte et meilleur sera le contexte, plus il sera cohérent avec ce que vous voulez, meilleur sera le résultat. Donc voilà, une fois que j'ai un prompt qui me plaît, que j'ai relu, que je valide, je vais sur Cloud Design. C'est parti. Je crée un nouveau projet depuis le début. Je dis bien que je vais être en haute fidélité. C'est vraiment très important ici. Puis je viens récupérer toutes les images que je dois lui passer. Qu'est-ce que je dois lui passer ici? Ben l'image du brand, les trois images de web design dont je me suis inspiré ainsi que les six voire même sep images ici de burger. J'ai six burgers mais j'ai aussi une image pour le hero. Le hero c'est quoi? Ben quand l'utilisateur arrive sur le site, c'est un peu l'image d'accroche ainsi aussi que le texte d'accroche. C'est ce que voit l'utilisateur en premier sur le site. Donc je viens mettre directement toutes ces images dans clignollé du prompt tout simplement. Au bout d'un certain temps, il va me générer un certain résultat. Pour le moment, c'est normal, ce n'est pas encore parfait. Attendez la suite parce que on va voir comment améliorer ça même après en dehors de cloud design. Il y a pas mal de skills ou de plugin désormais qui nous permettent vraiment ici d'améliorer un design. Mais en soit pour le moment on est vraiment sur une première phase. On n' pas encore fait des retours. Pour le moment, il faut bien l'avouer, on n pas trop mal. Mais maintenant on va voir un peu comment améliorer tout ça. Ici il faut savoir que vous avez déjà un onglet edit. là directement vous pourrez rentrer et changer des valeurs. Et quand vous allez changer des valeurs là ça ne va pas consommer de token. Et ça c'est vraiment super pratique. Donc à vous de voir, d'aller sur votre design, de naviguer et de lui dire éventuellement ce qui ne va pas. Donc moi par exemple, je trouve que le footer est vraiment pas bien, le numéro de téléphone est vraiment trop gros. Bref, j'aimerais complètement ici refaire le footeur. Donc je vais directement cliquer sur le footer et je lui dis ce qu'il doit changer. À ce moment-là, il ne faut pas oublier d'actualiser et ensuite vous allez voir ben il aura refait le footer et désormais que c'est beaucoup mieux. Mais il faut aussi savoir que vous pouvez dessiner vous pouvez dessiner directement des choses et lui dire ensuite bah regarde ce dessin, regarde ce que j'ai entouré. viens faire c, viens faire ça. Quoi qu'il arrive, avant de changer un truc, dites bien sauvegarde cette version comme ça je peux revenir en arrière. Ça va vous permettre si un moment Li a fait n'importe quoi, de revenir en arrière et ça c'est vraiment très important. Maintenant, moi j'aime pas trop le côté or et ce que j'ai envie plutôt du noir et du cuivre. J'ai pas mal de choses que j'ai envie de changer. J'ai envie d'avoir quelque part un autre résultat qu'il vient me proposer. De toute façon, ce résultat, je viens de le sauvegarder. Donc, au cas où, je pourrais toujours revenir en arrière, il n'y a pas de souci à ce niveau-là. Donc là, je renseigne un nouveau prompt. Je dis de faire des modifs. Et voici le résultat que j'ai désormais. Alors, je trouve ça quand même beaucoup mieux. à savoir que toujours là, vous pouvez venir modifier des choses. Et moi, je trouve que l'image carrée du burger, c'est vraiment pas top. J'ai envie d'avoir quelque chose de différent. Donc je viens lui dire ce que je veux directement. Et par conséquent, voici le résultat après l'update qu'il me fait. Bon, maintenant je trouve que l'image du burger est un peu petite, donc je lui dis de faire une image de burger plus grande. On n'oublie pas d'actualiser et désormais une nouvelle version plus cohérente et ainsi de suite. Je vais un peu venir éditer les choses, un peu venir discuter directement en commentaire. N'utilisez pas directement le chat parce que ça consomme beaucoup plus de token. Ensuite maintenant, il faut aller sur l'ordinateur directement, par exemple sur le bureau et créer un nouveau dossier. Ça sera notre dossier de travail. Et là-dedans, je vais venir créer une nouvelle application Next JS. Alors, vous utilisez ce que vous voulez, mais de mon côté, j'aime bien Next JS. Au niveau des performances du SEO, c'est vraiment génial. Et ensuite là, bah comment on fait communiquer le design? On a généré avec notre cloud code ben d'en cher directement ici vous pouvez aller dans chair et mettre l'exportation vers cloud code. Vous aurez une commande directement ici à copier. N'hésitez pas à la copier. Cependant, moi j'ai rencontré une fois que j'ai copié collé cette commande dans Cloud Code un petit problème, c'est que tout simplement le design était trop gros, il y avait trop d'information. Donc à ce moment-là, vous pouvez télécharger les éléments en point zip, venir les déziper directement sur l'ordinateur et ensuite intégrer tous ces fichiers directement à votre application là où il y a Cloud Code. Et là, il va vous passer les images du site ainsi que les fichiers.html HTML des différentes versions. Donc préciser la bonne version que vous voulez ici mettre en place directement dans votre application NextJs. N'hésitez pas aussi à lui dire où sont les assets, les images, comme ça il va faire des copiers collés et les mettre directement dans votre projet NextJs. Et puis à un moment, il aura terminé. Vous allez pouvoir lancer le serveur local pour voir le résultat de votre application. Et pour moi, j'étais vraiment très content puisque le résultat était en rapport avec ce que Cloud Design avait fait. Maintenant, une fois qu'on a fait ça, ben c'est le moment justement ici de versionner le tout. Alors, j'explique ça très bien dans une vidéo que je vous mettrai ici en haut à gauche, en haut à droite. Bref, elle sera là. Le but, c'est d'avoir beaucoup de versions de son projet. Dès qu'on avance, on vient son projet. Comme ça, s'il y a un souci, c'est pas grave. On peut revenir en arrière très simplement. et ça sera aussi indispensable pour venir tout simplement ensuite déployer le projet, faire en sorte que ce site internet soit visible par tout le monde. Donc pour cela, il faudra créer un nouveau repository et venir exécuter les commandes que vous voyez directement à l'écran. C'est des commandes d'ailleurs que Guitub viendra directement vous passer et ensuite vous le verrez, vous aurez désormais une sauvegarde de votre application directement sur Geitub et ça c'est vraiment très important. J'encourage tout le monde ici à utiliser GitHub tout le temps, quel que soit le projet. C'est vraiment très important de version travail. Comme dit, dès qu'il y a un souci avec l'IA, ça peut arriver assez souvent, on peut revenir directement en arrière. Ensuite, j'avais aussi oublié de mettre une photo de l'intérieur du restaurant. Donc, je dis directement à Claude Code de mettre cette photo et on voit très bien que le résultat est là. Il a mis ensuite la photo du restaurant. Une fois que ça c'est fait, je lui dis commit et push. On n' plus besoin de taper des commandes Guitub, il fait automatiquement ici le travail. Ensuite, ce que j'ai fait, c'est que je lui ai dit d'utiliser GSAP qui est une librairie d'animation JavaScript pour vraiment euh faire de meilleures animations ici au niveau de l'application. Une fois que les animations sont terminées, il a fait par conséquent un autre travail. Encore une fois, je commite et je push. Et là, on a désormais le résultat. Vous voyez qu'au niveau des animations, c'est beaucoup mieux qu'avant. Gsap, c'est une librairie qui existe depuis très longtemps et c'est vraiment très connu par les IA. C'est super pour faire de belles animations. Maintenant, c'est bien, on a un site internet, mais est-ce qu'il fonctionne sur mobile, sur tablette? Et là, je me suis aperçu que j'avais d'énormes problèmes au niveau de mon design. Le menu ne s'ouvrait pas. les burgers sur mobile s'afficha n'importe comment. C'était vraiment un peu la panique. Donc comment est-ce que je pourrais automatiquement corriger ça avec le meilleur outil possible qui ferait des screenshots, qui analyserait les screenshots selon les différentes résolutions mobile, tablette et aussi desktop. Qu'est-ce que je pourrais utiliser? un MCP qui s'appelle Chrome Death Tools. Donc j'ai installé directement le MCP dans le projet et ensuite je lui ai dit ben tous les problème qu'il y avait au niveau du responsive et je lui ai dit justement utilise le MCP Chrome Death Tools pour corriger tout ça. Est-ce que ça va marcher ou pas? Est-ce que c'est efficace? Ben en fait c'est diablement efficace. On a vraiment un onglet de Chrome qui s'ouvre tout seul, qui est désormais contrôlé directement par Cloud et qui viendra faire des screenshot, venir analyser les screenshots sur mobile, sur tablette, sur desktop pour voir exactement ce qui ne fonctionne pas. Et ensuite tout était réglé. J'avais un menu fonctionnel, j'avais les burgers qui s'affichaient correctement, qu'on soit sur mobile, sur tablette ou sur desktop, tout fonctionnait nickel. Et d'ailleurs, n'hésitez pas à utiliser l'inspecteur de Google Chrome pour venir voir les différentes résolutions. Ça c'est vraiment très important. À partir de là, j'ai nouveau commit et push. Pourquoi? Parce que je vais déployer mon application. Et pour déployer l'application, ben il suffit de se connecter à Versel et d'ajouter le projet. Tout est relié directement avec GitHub et le déploiement se fait littéralement en 30 secondes. Et à partir de là, ben j'avais une application tout à fait fonctionnelle et visible surtout par tout le monde. Mais il manque l'optimisation au niveau du SEO et de la sécurité. Ça c'est vraiment très important. Donc il suffit tout simplement de mettre un prompt très simple pour Claude et de lui dire ben améliore le SEO et la sécurité. N'oubliez pas cette partie parce qu'elle est absolument essentielle. À la fin de la vidéo, on va voir les différentes performances du site web et cette étape est absolument cruciale. Quand c'est terminé, vous recommiter et vous pushez et le déploiement va se faire automatiquement. Il va faire la mise à jour au niveau du site en ligne. Votre site est désormais à jour et ça serait pas mal justement de voir les performances. Et au niveau des performances, bah les miennes sont vraiment bonnes. Pourtant, il y a pas mal d'animation. Pourtant, il y a des images assez lourdes. Mais bon, on a Next JS qui gère vraiment très bien les images. Là, c'est peut-être le moment, si vous avez des performances pas top, de venir copier-coller les performances que vous a dit le site que je vous montre et dire directement à Cloud Code, "Ben voici les performances, essae d'améliorer ce qu'il faut." Et maintenant, ce qu'il vous manque, c'est d'acheter un nom de domaine. Bah, pour moi, ça serait par exemple la grange-strasbourg.com. Et pour cela, vous pourrez aller sur Cloud Flir, vous cherchez votre nom de domaine. Dès que ça vous plaît, vous l'achetez et ensuite bah vous pourrez retourner sur Versel, aller dans les domaines de votre site internet et très simplement venir chercher le domaine que vous avez acheté sur Cloud Flir, mais vous verrez, il y aura un petit bouton qui viendra s'afficher pour lier automatiquement le nom de domaine de Cloud Flir directement avec Versel. Dernière étape, ben on pourrait aller encore plus loin au niveau du polish, du design et utiliser un outil comme impeccable.style pour parcourir le site de A à Z et voir s'il n'y a pas des trucs qu'on pourrait améliorer parce que en effet l'intelligence artificielle a tendance à faire un peu tout le temps la même chose. Bah impeccable.style est vraiment très bien à ce niveau-là. N'hésitez pas à me dire si vous voulez un tuto pour cela. Et bon, alors ça m'a pris beaucoup de temps ici à faire cette vidéo. N'hésitez pas à liker, à laisser un hype, c'est très important à commenter, à partager et on se retrouve très bientôt dans la prochaine vidéo. Ciao ciao et n'oubliez pas que dans la description, il y a ma nouvelle newsletter. N'hésitez pas à aller dessus. Allez ciao ciao.