Thumbnail for J'ai créé un site à 10 000€ avec CLAUDE (copie-moi) by Henri · ExplorIA

J'ai créé un site à 10 000€ avec CLAUDE (copie-moi)

Henri · ExplorIA

12m 50s3,200 words~16 min read
Auto-Generated

[0:00]En ce moment, tout le monde parle de Claude et c'est bien normal, c'est une IA qui a progressé au point de devenir l'outil le plus puissant du moment. Que ce soit pour répondre à toutes vos questions, créer des agents autonomes qui font le travail à votre place. Et maintenant grâce au tout nouvel outil Claude Design associé à Claude Code, vous pouvez créer des applications et des sites web au design parfait. Le genre de projet qu'une agence spécialisée pourrait facturer jusqu'à 10000 €. Mais tout ça, c'est des paroles. Et dans les prochaines minutes, je vais vous montrer concrètement comment le faire. On va se mettre dans un scénario, on veut lancer sa marque e-commerce et on va construire un site e-commerce hyper clean disponible dans toutes les langues et tout ça grâce à seulement trois outils bien précis et en seulement quelques minutes. Et donc on va imaginer qu'on veut lancer notre marque de cosmétique Made in France, on vient de se lancer, on a quatre produits. Mais on a déjà envie d'attaquer l'étranger, notre cible c'est les 25 45 ans, on a des prix entre 35 et 65 €. Notre marché principal, c'est la France, on a déjà des prospects sur Instagram, mais on a envie d'attaquer la Belgique, la Suisse, l'Allemagne, l'Italie. Bref, on va pas se mettre de limites car vous allez voir grâce à Lia, on peut faire des choses absolument folles. Et évidemment, si on avait fait appel à une méthode traditionnelle, à savoir de passer par une agence, on aurait rapidement pu avoir ce genre de devis. C'est un exemple type, mais par rapport à ce qu'on vise, on peut vite monter sur des tarifs assez importants. L'idée, c'est pas de dire que les agences sont des arnaques, mais si on se lance et qu'on veut se payer ce type de prestation, il faut vendre des centaines et des centaines de produits pour être rentable et au début, forcément, c'est compliqué. Et évidemment, vous avez déjà des solutions qui existent aujourd'hui, des alternatives plus habituelles, comme Wix, Squarespace qui peuvent être limitées niveau design. Vous avezble qui peut être intéressant pour un MVPI rapide, mais qui peut parfois être limité ou alors faire appel à un développeur freelance, mais ça peut quand même vous coûter assez cher et vous maîtrisez pas l'ensemble du processus. Et donc évidemment à l'air de Lia, on a plein d'outils pour nous aider sur ce genre de tâche, Claude en fait partie et surtout Claude Design qui vient de sortir et qui fait des choses assez folles. On va donc démarrer avec Claude Design parce que grâce à ce tout nouvel outil, on va pouvoir designer la structure, la maquette de notre site avec une esthétique parfaite. Claude Design est disponible avec un abonnement classique à Claude et pour vous montrer comment ça fonctionne, je vais simplement créer un nouveau projet. Je vais l'appeler site cosmétique, on va prendre un design classique et on va lancer la création de notre projet. Et ici en bas à gauche, on va simplement décrire ce qu'on souhaite créer. Et on va lui partager un maximum d'informations qui vont tenir dans un prompt. Alors le prompt est détaillé donc il apparaît pas juste ici en bas à gauche et vous pourrez le récupérer comme d'habitude gratuitement dans ma communauté School. Mais le prompt le voici, voici la marque qu'on lance avec mon associé, j'aimerais que tu me crées le site e-commerce complet à partir de ces infos. On met du détail sur la marque, une marque de cosmétique clean, fabriquée en France, quatre produits comme évoqué, les prix vont de 35 à 65 €. Notre cible sont les femmes et les hommes de 25 45 ans, on a du détail sur le site à construire, vous pourrez récupérer tout ça, je vous montre le style visuel et on va demander de tout générer d'un coup. Donc on va lancer la demande et ça y est, vous voyez que Claude est en train de tout préparer, il s'est fait sa propre to-do list, il a trouvé un nom pour la marque, il a designé automatiquement une palette de couleur, il a imaginé quatre produits et il est maintenant en train de tout préparer. Et au bout de quelques minutes, on a en une demande notre site qui est prêt. Alors j'ai changé le nom et j'ai simplement demandé de rajouter des images mais vous voyez la qualité du design qu'on a pu récupérer. En une seule demande, il a mis des faux avis, il faudrait les retravailler, une photo de la potentielle créatrice, une partie question-réponse qui fonctionne. Évidemment tout ça on pourrait le retravailler avec du langage naturel, mais la cohérence dans les tons est juste impressionnante. Et sincèrement, à ce stade, le design n'a pas besoin d'aller plus loin. On a déjà en quelques instants ce qu'il nous faut au niveau de l'interface et maintenant, on va passer à la suite, à savoir la construction réelle de notre site. Et pour ça, vous l'avez peut-être deviné, on va utiliser Claude Code. Claude Code, c'est un outil extrêmement puissant qui vous permet de coder, sans coder et en tout cas de créer des sites, des applications, d'effectuer des tâches directement sur votre ordinateur. Et là, on va s'en servir pour donner vie à notre site. Mais avant ça, on va avoir besoin de préparer le terrain, à savoir quel va être l'endroit où on va pouvoir héberger le site. Si vous n'êtes pas familier avec cette notion, ne vous inquiétez pas, c'est extrêmement simple et pour ça on va utiliser un outil classique, hyper facile d'accès. Cet outil, c'est Vercel qui vous permet de déployer en un clic, vous pouvez vous créer un compte gratuitement, ça suffit largement. Et maintenant, comme promis, on va passer sur Claude Code et on va simplement dire à cet agent IA qu'on veut déployer notre site de cosmétique sur Vercel. Donc on va créer un nouveau projet, on va créer un dossier, on va l'appeler site cosmétique. On va travailler à l'intérieur de ce dossier et on va simplement parler avec du langage naturel. Je vous rappelle qu'on n'est pas technique et on dit à Claude Code, je viens de créer mon compte Vercel avec mon compte Google. Maintenant, je veux que tu te connectes à ce compte Vercel depuis ici pour qu'on puisse déployer mon site dessus tout à l'heure. Guide-moi étape par étape, en langage simple. Si tu as besoin d'installer quelque chose ou de lancer une commande, fais-le et explique-moi en français ce que tu fais et pourquoi. Si tu as besoin que je clique quelque part dans mon navigateur pour valider, dis-le-moi. Je ne sais pas coder, donc parle-moi comme à quelqu'un qui ne connaît rien à la technique. Il nous dit effectivement qu'il a tout pour comprendre la situation, on est en mode planification, donc il va préparer un plan détaillé pour tout exécuter et ça y est, le plan est prêt. Il nous dit, est-ce que tu veux checker le plan ? Ben écoutez, on va lui faire confiance. Je lui ai simplement précisé que l'adresse du compte Google était celle-ci et là on est parti, j'ai mis toutes les autorisations, il se lance dans la création et ça y est, Vercel est installé. Il me demande de donner l'autorisation, vous voyez qu'on ne fait rien de technique et à priori, ça y est. Si on retourne dans Claude, il nous dit que tout est en place, on a déjà effectué la connexion et pour la partie hébergement, le terrain est déjà prêt. Bon, maintenant, ça va être très simple, on va prendre la maquette faite par Claude Design et la donner à Claude Code pour réellement donner vie au site. On va donc se retrouver sur Claude Design avec notre site de cosmétique et on va aller en haut à droite sur la partie share et sélectionner Hand off to Claude Code. Quand on clique là-dessus, on va avoir un prompt qu'on va pouvoir copier et on va retourner dans Claude Code. On va coller ce qu'on vient de copier et simplement juste au-dessus on va donner du contexte à Claude Code en lui disant, tu vas transformer la maquette qu'on vient de faire dans Claude Design en un vrai site qui marche, déployé sur internet, accessible à tous via une vraie adresse web. Ensuite, on va positionner le prompt qu'on a copié et on finit par des instructions supplémentaires que vous pourrez récupérer encore une fois dans ma communauté gratuite pour avoir un maximum de performance. Voilà ce dont j'ai besoin, le site doit être rapide, propre et marcher aussi bien sur ordinateur que sur téléphone. On veut que les boutons ajouter au panier marchent vraiment, on peut ajouter un produit, que le panier s'incrémente bien et un bouton commander mène à un formulaire de précommande et cetera. Là, c'est des consignes supplémentaires pour s'assurer que tout fonctionne du premier coup. Et d'ailleurs, ce prompt et tous ceux que vous allez voir dans cette vidéo, vous pouvez le retrouver dans un playbook complet que j'ai créé spécialement pour vous avec toutes les ressources pour bien utiliser Claude Design, comment mettre en ligne le site, comment bien utiliser Claude Code. Vous allez voir, il y a énormément de valeur et ce playbook, je vous l'offre dans ma communauté School disponible directement en description. Vous voyez que l'agent intelligent a déjà récupéré la maquette, est en train de l'analyser et de la traduire en code pour donner vie à notre projet. Et vous voyez, on ne code rien mais tout a déjà été créé, on a des vrais fichiers de code qui sont en train d'être créés et d'être positionnés dans le bon dossier sans qu'on touche à rien. Il est en train d'absolument tout gérer, là, il est en train de travailler sur la fonctionnalité d'ajout au panier. Actuellement, il y a quelques erreurs sur la partie gestion des images, il n'a pas le droit d'accéder directement au lien, donc il est en train de les télécharger de manière autonome. Je lui ai rien dit, il comprend quels sont les problèmes et les corrige automatiquement. Il semblerait que ça y est, ça fonctionne, on a un premier aperçu en tout cas. L'intérêt aussi de Claude Code, c'est qu'il crée et derrière, il analyse son travail pour faire des corrections jusqu'à ce que ce soit parfait. Là, il est en train de tester toutes les fonctionnalités, le fait d'ajouter un nouveau produit au panier. Vous voyez qu'il y a un agent autonome qui fait les tests, ça fonctionne tout seul, il est en train de voir si la page de pré-commande fonctionne et il a récupéré le design à la lettre près. Vous voyez qu'il est en train de remplir le formulaire de manière complètement autonome et ça y est, pour la partie précommande, ça a l'air de fonctionner. Le flow complet marche, précommande envoyée, page de remerciement affichée, panier remis à zéro. Il continue les tests maintenant sur la version mobile, c'est juste parfait, il teste le scrolling et ça y est, il vient de déployer en ligne sur un lien accessible à tous grâce à l'hébergement sur Vercel qu'on veut faire. Et ça y est, voici ce qu'on a, notre site complet, il a bien récupéré toutes les images. On va voir si ça fonctionne mais ça a l'air d'être le cas, de toute façon, il a testé et ce qui est intéressant, c'est qu'ici, on a la fenêtre Claude Design qui est bah, vous le voyez, exactement la même chose. Là, c'était la maquette, c'était pas purement fonctionnel et ici, on a notre site qui est complètement déployé. Vous pourriez y accéder à travers le lien, vous voyez même en haut à droite qu'il y a bien le flacon qui apparaît alors que sur la maquette, c'était pas parfait. Il a tout testé jusqu'au passage de commande, toutes les pages ont l'air parfaites, il a tout récupéré et sur mobile, je l'ai également, j'ai le site complet, ça fonctionne, on peut ajouter au panier. Bref, on a un site de A à Z avec le design qu'on avait créé sur Claude Design et maintenant grâce à Claude Code et Vercel, on peut le partager à n'importe qui et avoir nos premiers clients. Donc si on récapitule, on a une maquette premium, un site en production, accessible, responsif donc disponible sur mobile et tout ça pour quelques euros. Là où une agence classique nous en aurait déjà facturé pour plusieurs milliers. Mais le vrai point qui change tout pour une marque qui se lance aujourd'hui, c'est l'international. Et la bonne nouvelle, c'est qu'on va utiliser un outil hyper simple pour faire ça en quelques instants, ça s'appelle Weglot et ça va nous permettre de traduire automatiquement notre site dans toutes les langues. On va donc arriver sur le site de Weglot, pour voir, créer un compte gratuitement et tester tout ça. Une fois qu'on a le compte, on donne un nom de projet, projet cosmétique. La langue de base, on va sélectionner français et on va pouvoir traduire dans toutes les langues, à commencer par l'anglais. Ensuite, pour le site, on va simplement coller l'URL de Vercel, on va sélectionner use a preview URL. Et si on clique sur le lien, notre site apparaît et juste en bas à droite, vous voyez qu'on peut passer en anglais de manière automatique et vous voyez que la traduction s'est faite automatiquement en respectant le design que ce soit au niveau des témoignages, au niveau des questions et des réponses. C'est juste parfait et ça a pris seulement quelques secondes. Et derrière, évidemment, on peut aller beaucoup plus loin, là, on est sur un plan gratuit mais vous pouvez avoir accès au plan pro pour avoir jusqu'à 5 langues et c'est ce qui nous intéresse pour se déployer dans tous les pays. Et grâce à un partenariat avec Weglot pour cette vidéo, vous pouvez utiliser le code Henri X Weglot 3 pour avoir 3 mois complètement offert. Et ça y est, j'ai le plan pro, j'aurais pu prendre un meilleur plan aussi et ça aurait été disponible avec le code, mais maintenant, on va pouvoir ajouter jusqu'à 5 langues. Donc on va pouvoir ajouter l'allemand en un clic, on peut également ajouter l'italien et on va terminer avec l'espagnol. Et si on retourne sur la configuration, maintenant, on va le connecter en live à notre site et on va aller chercher la connexion en JavaScript, vous allez voir, c'est très simple. On va simplement copier cette partie du code, on colle ce bout de code comme tout à l'heure avec le prompt dans la même logique et on va mettre du contexte au-dessus pour Claude. Je viens de créer un compte sur Weglot pour rendre mon site accessible dans plusieurs langues, ils m'ont donné un petit bout de code à insérer, voici le bout de code et juste en dessous, on va lui donner la consigne à savoir l'insérer au bon endroit dans le code de mon site. Puis redéployer le site en ligne pour que le changement soit visible. Et donc concrètement, qu'est-ce qui est en train de se passer ? On est en train de débloquer en quelques secondes 5 marchés. Alors j'ai pas mis les Pays-Bas, mais on pourrait le débloquer en un clic, c'est littéralement 500 nouveaux millions d'acheteurs potentiels pour nos produits cosmétiques. Et ça y est, Claude a fini le travail, on va aller tester, on a bien le widget en bas à droite et on a toutes les langues qui sont disponibles sur le site. On va pouvoir tester l'allemand par exemple, on avait testé l'anglais tout à l'heure. On est parfait au niveau de la traduction, on pourrait juste retravailler la disposition au niveau du titre, mais sinon je pense que c'est nickel. On a la traduction en littéralement une seconde, on peut passer en italien comme ceci, on va tester également l'espagnol. Vous voyez à quel point c'est puissant, si on retourne sur Weglot, on va pouvoir retrouver notre projet, on va pouvoir faire appel à l'éditeur visuel ce qui va nous permettre justement de gérer les problèmes de disposition. Si on passe sur le site en allemand, on peut faire toutes les modifications qu'on veut, on peut réajuster, demander des modifications au niveau du langage pour la traduction. Si on veut mettre une description plus chaleureuse par exemple, on peut le faire sans souci, on peut enlever des parties, on peut également l'adapter à notre ton. Bref, tout est possible pour avoir quelque chose d'hyper personnalisé et vous voyez que Weglot gère parfaitement la partie SEO. On va avoir des tags pour le site en allemand, pour le site en français, pour le site en italien, ce qui va nous permettre d'être hyper bien référencé dans tous les pays et d'attirer des visiteurs du monde entier. Et donc voilà maintenant pourquoi c'est aussi intéressant de mettre en place ce type d'outil, bah tout simplement parce qu'un site uniquement en français va vous faire rater une grande partie de votre marché potentiel. Et garder en tête que 70 % des acheteurs préfèrent acheter dans leur langue natale. Donc c'est très important d'avoir un site personnalisé avec la bonne langue et ce qu'on a vu aujourd'hui dans cette vidéo, c'est vraiment une suite complète d'outils qui vous permet d'avoir un site professionnel. On a démarré avec Claude Design pour la maquette et la rédaction du contenu, on a ensuite tout codé et déployé ça hyper rapidement avec Claude Code et Vercel. Et maintenant grâce à Weglot, notre site est disponible dans de nombreux pays avec un SEO optimisé et tout ce travail, c'est certain. Si on avait fait appel à des professionnels pour nous aider là-dessus, avec des équipes design, des vrais développeurs, ça nous aurait coûté c'est certain plusieurs milliers d'euros. Tout ça, on l'a fait beaucoup plus rapidement en quelques dizaines de minutes, notre site est disponible, on a des ajustements illimités, on n'a pas besoin de faire appel à une agence tierce et on est disponible dans une multitude de pays. Vous voyez à quel point c'est puissant ce qu'on vient de construire et également si vous voulez tester Weglot, vous pouvez utiliser ce code promo et surtout passer par le lien en description. Et voilà, c'est tout pour cette vidéo, j'ai essayé de vous apporter le maximum de valeur avec un workflow complet avec trois outils qui sont clés si vous voulez mettre en place votre site. Si c'est un besoin que vous avez de votre côté, je vous invite vraiment à reprendre toutes les étapes de cette vidéo, ça va vous faire gagner énormément de temps et énormément d'argent. Si vous voulez récupérer toutes les ressources qu'on a vu dans cette vidéo et bien plus, il y a le playbook complet qui est disponible en description dans ma communauté School accessible à tous et comme d'habitude, si vous voulez continuer sur YouTube pour devenir un vrai crack de Lia, vous pouvez aller regarder cette vidéo.

Need another transcript?

Paste any YouTube URL to get a clean transcript in seconds.

Get a Transcript