Comment créer des sites web avec Claude Code · Le guide complet du Vibe Coding.

Pensez à la façon dont vous construisiez un site web jusqu'à présent : vous contactez un créateur de sites, vous expliquez ce que vous voulez, vous recevez une maquette, vous envoyez des commentaires, vous recevez une version, puis de nouveaux commentaires. Une semaine de ping-pong et au moins 3 000 shekels. À chaque fois. Le Vibe Coding change totalement la donne. Vous ouvrez Claude Code, vous lui parlez pendant 30 secondes de ce que vous voulez sur votre site, et il le construit. En quelques minutes, vous disposez d'un site en ligne avec des images, des boutons, une galerie, des expériences client. Tout ce que vous avez l'habitude de voir sur un site classique. Ce guide est le résumé de ce que nous avons appris lors de la session 4 de l'atelier Claude Code. Nous allons étudier les 3 méthodes de design de sites web, les 3 outils indispensables à installer avant de commencer, comment améliorer le visuel pour passer d'un style générique par IA à un site premium, et comment déployer le site en ligne sur Vercel.

Ce que vous aurez à la fin du guide

• Un site web en ligne · Avec un domaine temporaire Vercel (possibilité de connecter votre propre domaine plus tard)
• Un flux de travail structuré avec Claude Code · Savoir lui donner un prompt, travailler en Plan Mode et savoir quand valider
• Des méthodes de design dans votre boîte à outils · Transcription libre vers Claude, inspiration d'un site existant et composants de 21st.dev
• Des compétences installées sur Claude · Un site avec accessibilité, confidentialité et un design premium qui évite l'effet générique de l'IA
• Une sauvegarde complète du code sur GitHub · Si quelque chose casse, un clic suffit pour revenir en arrière
• Une infrastructure de base de données prête dans Supabase · Si vous souhaitez collecter des e-mails, enregistrer des commandes ou stocker n'importe quelle donnée

Étape 1 · Les 3 outils à installer avant de commencer

Vercel

Déploiement cloud · Le site est en ligne

La référence pour le déploiement de sites statiques et Next.js. Sans Vercel, le site que Claude construira pour vous restera uniquement sur votre ordinateur à l'adresse localhost:3000 · personne d'autre ne le verra. Dès que vous dites à Claude de déployer sur Vercel, il pousse le code, effectue le déploiement dans le cloud et vous renvoie une URL publique à partager.

Astuce pour les agents : après l'inscription, retournez dans Claude -> Customize -> Connectors -> Browse Connectors -> Vercel -> Connect. Ainsi, Claude peut déployer des sites en un clic.

Supabase

Base de données · La mémoire de votre site

Postgres + Auth + Storage. Au lieu de configurer un serveur pour stocker des e-mails, des commandes ou toute autre information · Supabase vous offre tout cela en un clic. Si vous souhaitez un formulaire de contact sur le site qui enregistre toutes les demandes, une liste de diffusion ou une petite boutique · c'est le logiciel responsable du stockage des données.

Astuce pour les agents : tout comme Vercel · connectez le connecteur dans Customize -> Connectors. Le nom du connecteur est Supabase. Le compte gratuit suffit pour 99 % des projets personnels.

GitHub

Sauvegarde de code · Comme Google Drive pour votre site

GitHub stocke tout le code de votre site en ligne. Si quelque chose casse, si Claude commet une erreur que vous ne pouvez pas annuler, ou si vous souhaitez travailler sur le site depuis un autre ordinateur · GitHub conserve tout l'historique. Chaque fois que vous le souhaitez, dites à Claude de sauvegarder sur GitHub et il poussera la dernière version.

Astuce pour les agents : vos dépôts sont enregistrés par défaut en mode Private (privé) · vous seul y avez accès. Si vous souhaitez partager le code avec un autre développeur, vous pouvez passer en mode Public en un clic.

💡 Les trois outils réunis coûtent zéro şekel pour les débutants. Seuls les sites nécessitant un trafic élevé (des milliers d'utilisateurs par jour) ou une base de données exceptionnellement grande requièrent des formules payantes. Pour 99 % des projets personnels et des petites entreprises, la version gratuite suffit.

Étape 2 · Méthode 1 · Jetez tout ce qui vous passe par la tête (transcription vers le modèle)

Speakly

Outil de transcription · Vous parlez, un texte structuré est créé

Le meilleur logiciel pour transcrire de l'hébreu parlé en texte. Vous appuyez sur un raccourci clavier (pour moi, la touche F), le micro s'ouvre, vous dites tout ce qui vous passe par la tête et vous relâchez. Le texte structuré et précis est inséré automatiquement dans n'importe quelle application avec laquelle vous travaillez · Claude, chat, e-mail, Word.

Astuce pour les agents : la touche recommandée sur Mac est la touche F (Fn). Sur Windows · vous pouvez configurer le verrouillage des majuscules (Caps Lock) ou une autre touche. Le raccourci est pratique · il suffit d'appuyer, de parler et de relâcher.

Comment démarrer un nouveau projet dans Claude

Exemple de prompt · Un site web pour des semelles orthopédiques sur mesure (à copier et modifier)

Je veux créer un site web adapté pour des semelles de chaussures. Je veux que le site soit dans mon style · futuriste, épuré, avec des polices claires et un contraste très, très net. Teintes : monochrome · blanc, noir, gris. Accent bleu futuriste. Je veux le moins de désordre visuel possible. Je veux qu'il y ait des images d'athlètes, peut-être des photos de soldats en train de courir, pour que les gens comprennent la direction. Je veux qu'il y ait des témoignages clients · des personnes qui notent sur Google et recommandent le produit. Je veux peut-être des endroits où il y aura une vidéo d'un client qui recommande. Si je n'ai pas cela · laisse simplement un espace réservé (Placeholder) vide que je pourrai remplir moi-même. Je veux qu'il y ait un bouton d'accès WhatsApp pour pouvoir joindre un représentant le plus rapidement possible. Dans la section Hero · je veux qu'il y ait l'image d'une semelle flottant dans l'espace. Si tu ne peux pas créer une telle image · crée simplement un prompt à insérer dans un modèle d'image et nous la générerons. Travaille en Plan Mode. Présente-moi le plan. Après mon validation, passe à la construction.

🎯 Important · Commencez toujours par le Plan Mode (bouton au bas de Claude). Cela vous évite des piles de jetons · Claude présente un plan de travail avant de se lancer dans la construction, et vous pouvez corriger avant qu'il n'investisse des efforts. Nous avons vu dans le Plan Mode comment il présente toutes les couleurs, les polices, l'ordre des sections · et ensuite, nous validons.

Étape 3 · Méthode 2 · S'inspirer d'un site existant

GoFullPage

Extension Chrome · Capture d'écran complète d'un site web

Une extension Chrome gratuite qui capture toute la page en une seule longue image. Vous cliquez sur l'icône de l'appareil photo · elle fait défiler tout le site automatiquement, capture chaque section et les assemble en une seule image continue. Vous pouvez la télécharger au format PNG ou PDF. Particulièrement utile pour trouver l'inspiration sur des sites sans avoir à faire 20 captures d'écran manuelles.

Astuce pour les agents : après la capture · l'extension ouvre une nouvelle page avec l'image complète. Cliquez sur l'icône de téléchargement (flèche vers le bas) et choisissez PNG. Vous disposez maintenant d'une image pour travailler.

Le prompt à fournir à Claude avec l'image d'inspiration et le lien (à copier)

Check deeply the elements, DOM, sources. Then start to create section by section, one by one, in all aspects · HTML, CSS, JS. Reference site: [Coller le lien du site d'inspiration ici] [De plus · glisser l'image Full Page dans Claude] Travaille en Plan Mode. Présente-moi le plan · par quelles sections tu commences, dans quel ordre, quels composants tu dupliques. Après mon validation · passe à la construction. Construis le site partie par partie, pas tout d'un coup · cela se rapprochera ainsi davantage de l'original.

⚠️ C'est de l'inspiration · pas du plagiat. Nous reprenons le visuel et la structure, mais nous remplaçons le contenu, les images et les produits par les nôtres. Les couleurs et les polices peuvent également être modifiées. De cette façon, votre site a l'air aussi professionnel que le site que vous avez aimé · mais il est le vôtre.

Étape 4 · Méthode 3 · Composants de 21st.dev (la méthode Frankenstein)

21st.dev

Bibliothèque de composants · Designs premium créés par la communauté

Des milliers de composants UI issus d'une communauté de designers de premier plan. Chaque composant comprend un aperçu en direct, du code et un bouton Copy Prompt. Vous cliquez sur le bouton · le prompt est copié. Vous le collez dans Claude · Claude construit le composant sur votre site. La plupart des composants sont gratuits, d'autres sont premium.

Astuce pour les agents : conseil en or · avant de prendre un composant, réfléchissez s'il s'intègre dans le langage visuel global du site. Un beau composant qui ne correspond pas nuit à la cohérence. Mieux vaut 3 composants qui s'harmonisent que 10 éléments dispersés.

Flux de travail avec 21st.dev

• Rendez-vous sur 21st.dev. Inscrivez-vous avec Google en 5 secondes.
• Parcourez les catégories · Hero, Buttons, Cards, Galleries, Animations, etc.
• Trouvez un composant que vous aimez · un aperçu en direct s'affiche sur la page.
• Cliquez sur le bouton bleu Copy Prompt en haut.
• Revenez dans votre Claude, collez et appuyez sur Entrée.
• Claude crée le composant sur votre site · vérifiez sur localhost:3000 que le résultat correspond à l'aperçu de 21st.

Étape 5 · Compétences · La différence entre l'IA générique et un site premium.

⚖️ Très important · Accessibilité et confidentialité. En Israël, un site non conforme à la norme d'accessibilité (SI 5568) expose son propriétaire à une amende pouvant atteindre 50 000 shekels. Une politique de confidentialité est obligatoire selon la loi sur la protection de la vie privée. Ce ne sont pas des options, ce sont des obligations légales. Les compétences règlent cela en un clic.

Où télécharger des compétences · Les 2 principaux répertoires

skills.sh

Le répertoire officiel d'Anthropic · Des milliers de compétences

Le répertoire principal des compétences de la communauté. Parcourez par catégories (Website, Marketing, Productivity), trouvez une compétence adaptée et vérifiez la présence du label Trust Hub Pass (qui certifie que le code a été vérifié et sécurisé). Vous pouvez voir le nombre de téléchargements · plus il y en a, plus elle est populaire et probablement de qualité.

Conseil pour les agents : vérifiez toujours le label Trust Hub Pass avant l'installation · cela évite de télécharger une compétence susceptible d'effectuer des actions indésirables sur l'ordinateur.

agentskills.co.il

Un répertoire israélien en hébreu · Des compétences adaptées au marché local

Le répertoire israélien · Des compétences adaptées à la réglementation locale (confidentialité, accessibilité), à la langue hébraïque et au marché local. Toutes les compétences sont gratuites. Il est fortement conseillé de tout parcourir avant de commencer un nouveau site pour un public israélien.

Conseil pour les agents : si votre compétence essentielle concerne l'accessibilité en Israël, il est recommandé d'effectuer également une vérification manuelle après l'installation. La norme israélienne est stricte et la compétence constitue parfois un point de départ, pas une solution définitive.

Les 9 compétences recommandées pour chaque nouveau site

Le club AI Master vous ouvre ses portes : une session en direct chaque semaine, des enregistrements et une communauté. 47 ₪ par mois, annulation à tout moment.

Israeli Privacy Shield

Réglementation de la confidentialité des sites web en Israël

Résout l'obligation légale d'avoir une politique de confidentialité conformément à la loi sur la protection de la vie privée. La compétence ajoute une bannière de cookies, une politique de confidentialité complète et la gestion du consentement des utilisateurs. Indispensable pour tout site israélien.

Israeli Accessibility Compliance

Accessibilité des sites web selon la norme SI 5568

Met en œuvre l'accessibilité selon les normes SI 5568 et WCAG 2.1 AA. Ajoute un bouton d'accessibilité, vérifie le contraste, le texte alternatif et garantit la navigation au clavier. Sans cette compétence · exposition à des poursuites pouvant aller jusqu'à 50 000 shekels.

Conseil pour les agents : la compétence est un excellent point de départ, mais la norme israélienne est stricte · il est conseillé d'effectuer une vérification manuelle supplémentaire après l'installation pour garantir une conformité totale.

Hebrew Content Writer

Rédaction de contenu professionnel en hébreu

Une compétence pour rédiger du contenu en hébreu · sans traductions approximatives de l'anglais, sans clichés d'IA. Écrit dans un style direct, orienté conversion, qui parle au public israélien. De l'or en barres pour les pages de destination et le contenu marketing.

UI/UX Pro Max

Expérience utilisateur · 50 styles, 161 palettes de couleurs

La compétence la plus complète pour l'expérience utilisateur · 50 styles de design, 161 palettes de couleurs, 57 paires de polices et les meilleures règles UX de l'industrie. Le choix visuel par défaut de Claude bénéficie d'une amélioration de plusieurs centaines de pourcent.

OKLCH Color Engine

Des couleurs qui ne font pas "IA générique"

Une compétence qui améliore la palette de couleurs du site. Utilise un espace colorimétrique avancé (OKLCH) pour créer des palettes professionnelles qui ne ressemblent pas à un site généré par l'IA. Une amélioration immédiate de la qualité visuelle.

Emil Kowalski Skill

Expérience utilisateur basée sur les meilleurs designers

Une compétence basée sur le travail d'Emil Kowalski · l'un des designers les plus en vue au monde (Linear, Vercel). Son objectif · les micro-interactions, les animations subtiles et les détails qui transforment un site ordinaire en une véritable expérience.

Interface Details

Des détails qui font la différence dans la mise en page

Une compétence basée sur un article de Jakub.kr concernant les détails qui donnent une impression de qualité à une interface. Espacements, stabilisation de la typographie, micro-espacements et toutes les petites nuances qui distinguent un site amateur d'un site premium.

Web Design Guidelines

Vercel Labs · Plus de 250 000 installations par semaine

Une compétence pour la conception de sites web · plus de 250 000 installations par semaine. Par Vercel Labs · le standard de fait de la conception de sites web par IA. Si vous ne devez installer qu'une seule compétence pour un nouveau site · c'est celle-ci.

Refero Design Styles

L'ergonomie et le design des meilleurs sites

Une bibliothèque de styles graphiques basée sur les meilleurs sites mondiaux, comme Apple, Linear, Notion, Stripe et autres. Vous choisissez un style, et Claude l'intègre. C'est le moyen le plus rapide d'obtenir l'esthétique d'une entreprise globale.

Étape 6 · Mise en ligne · Votre site est sur Internet

🌐 Le domaine temporaire ressemblera à `my-project-xyz123.vercel.app`. Si vous voulez votre propre domaine (`mydomain.com`), achetez-le sur SiteGround, GoDaddy ou Cloudflare, puis demandez à Claude de le connecter à Vercel. C'est une manipulation de 10 minutes avec des enregistrements DNS. Si vous le souhaitez, je mettrai en ligne une vidéo séparée pour expliquer cela.

Que faire une fois que le site est en ligne

• **Envoyez le lien à quelques amis** · Demandez-leur leur avis. Les détails que vous ne voyez plus après 50 relectures du code sautent immédiatement aux yeux des autres
• **Remplacez tous les textes fictifs par du vrai contenu** · Vos photos, des vidéos de clients, vos vrais numéros de téléphone
• **Faites une sauvegarde sur GitHub** · Dites à Claude de sauvegarder ce code dans un dépôt privé GitHub. Ainsi, si quelque chose casse à l'avenir, vous aurez un point de restauration
• **Connectez votre propre domaine** (optionnel) · Si vous souhaitez paraître professionnel
• **Ajoutez des outils d'analyse** · Demandez à Claude d'ajouter Google Analytics 4 au site. Vous saurez ainsi qui visite votre site et d'où ils viennent

Que pouvez-vous créer avec le Vibe Coding · 8 idées

8 projets à réaliser avec Claude Code en 45 minutes

• **Une page de capture pour votre entreprise** · Un hero percutant, une présentation du produit, des témoignages clients et un bouton d'appel à l'action vers WhatsApp
• **Un site portfolio** · Une galerie de projets, votre parcours, un formulaire de contact. Idéal pour les freelances et les créateurs de contenu
• **Un aimant à prospects (Lead Magnet)** · Une page proposant un cadeau (guide, checklist), qui collecte des emails et les envoie via Make vers RavMaser
• **Un site d'événement** · Les détails de l'événement, un compte à rebours, une billetterie et une carte
• **Une petite boutique** · Un catalogue de produits, un système de paiement via Stripe ou Cardcom
• **Un site d'abonnements ou de cours** · Inscription des utilisateurs, accès au contenu, espace personnel via Supabase
• **Un tableau de bord interne pour votre entreprise** · Des graphiques, des données et des actions rapides pour votre bureau
• **Un site client** · Vous construisez, vous facturez. Avec 21st.dev et les compétences, le client n'en croira pas ses yeux et pensera que c'est l'œuvre d'un designer professionnel

Questions fréquentes

Oui, Claude comprend parfaitement l'hébreu. Vous pouvez lui parler en hébreu, écrire en hébreu, et les sites qu'il génère sont en hébreu professionnel. Le seul point qui lui pose parfois problème est le RTL (le sens de lecture de droite à gauche), surtout lorsque l'on mélange de l'anglais dans un texte en hébreu. La compétence Hebrew Content Writer est particulièrement utile pour cela.

L'abonnement de base à Claude (20 dollars par mois) suffit pour créer un seul site. Avec l'abonnement Pro (100 dollars par mois), vous pouvez créer plusieurs sites par jour. Les trois outils (Vercel, Supabase, GitHub) sont gratuits. Les compétences sont gratuites. Au final, un site professionnel vous coûte quelques heures de travail et rien de plus. Les compétences résolvent la question de l'accessibilité et de la confidentialité en un clic.

Il est toujours possible de corriger. Dites à Claude que ce bouton est trop grand, que le design du hero ne convient pas, ou de remplacer la couleur principale par du bleu. Il modifiera uniquement l'élément concerné sans repartir de zéro. Vous pouvez faire un nombre infini d'itérations jusqu'à obtenir le résultat souhaité. Mon conseil : procédez par petits changements et testez chacun d'eux avant de passer au suivant.

Oui. Une fois le site déployé sur Vercel, dites à Claude que vous possédez le domaine mydomain.com acheté chez X et demandez-lui de le connecter au projet Vercel. Il vous guidera pour mettre à jour les enregistrements DNS chez votre registrar (SiteGround, GoDaddy ou Cloudflare). C'est un processus de 10 à 20 minutes, après quoi votre site est en ligne sur votre propre domaine.

Sur WordPress, Wix ou Webflow, vous choisissez un modèle prêt à l'emploi, vous glissez-déposez des éléments et vous restez limité par ce que la plateforme autorise. Le site a un aspect standard. Avec le Vibe Coding, Claude écrit du code sur mesure pour votre site. Il n'y a aucune limite quant aux composants, au design ou aux fonctionnalités. Vous voulez une animation unique, une fonctionnalité inédite ou une intégration spécifique ? Claude la construira. De plus, le code vous appartient et vous n'êtes lié à aucun fournisseur.

Oui. Dites à Claude d'ajouter au site une boutique avec 5 produits et une connexion à Cardcom ou Stripe. Il construira la boutique, le panier d'achat, le tunnel de commande et se connectera à l'API de paiement. Il vous suffit d'ouvrir un compte chez le prestataire de paiement, de transmettre les clés à Claude, et il s'occupe du reste.

Le risque est faible. Chaque modification effectuée par Claude crée un nouveau commit sur GitHub. Si quelque chose casse, dites à Claude de revenir à la dernière version fonctionnelle. Il retrouvera le commit précédent et effectuera la restauration. De plus, Vercel conserve tous les déploiements précédents, ce qui vous permet de revenir à n'importe quelle version en deux clics. En résumé, il est difficile de casser définitivement quoi que ce soit.

Oui. Deux options s'offrent à vous : 1) Utiliser Supabase pour stocker les emails, puis vous connecter à RavMaser, Resend ou Mailchimp via Make ou une API directe. 2) Intégrer un formulaire qui se connecte directement à votre outil de newsletter. Dites à Claude d'ajouter au site un formulaire email connecté à RavMaser, et il gérera toute la partie technique.

💪 Vous souhaitez un accompagnement tout au long du processus ?