Comment créer un site web avec Claude Code · Le guide pratique en français.

Jusqu'à présent, pour créer un site web, vous aviez le choix entre deux options · embaucher un développeur et payer des milliers de sjekels, ou vous battre avec un créateur de sites web complexe pour obtenir au final quelque chose qui ressemble à un modèle préfabriqué. Claude Code change entièrement la donne. Vous ouvrez Claude, vous discutez avec lui pendant 30 secondes de ce que vous voulez sur votre site, et il le construit. En quelques minutes, vous disposez d'un site web en direct avec des images, des boutons, une galerie, un formulaire de contact et un bouton WhatsApp · sans avoir écrit une seule ligne de code. Ce guide répond précisément à la question 'comment créer un site web avec Claude Code' · des premières installations jusqu'à un site web en ligne. Nous passerons en revue les 3 méthodes de design, les compétences qui transforment un site ordinaire en site premium, et le déploiement sur le cloud. En français, étape par étape.

Ce que vous obtiendrez à la fin du guide

• Un site web en direct sur Internet · avec une adresse temporaire Vercel (possibilité de connecter votre propre domaine plus tard)
• Un flux de travail ordonné avec Claude Code · savoir donner un prompt, travailler en mode Plan, et savoir quand valider
• Des méthodes de design à votre disposition · transcription libre pour 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 et non générique par IA
• Une sauvegarde complète du code sur GitHub · si quelque chose casse, on revient en arrière en un clic
• Une infrastructure de base de données prête sur Supabase · si vous souhaitez collecter des e-mails, des commandes ou toute autre information

Qu'est-ce que Claude Code et pourquoi surclasse-t-il tous les créateurs de sites web

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

Vercel

Déploiement sur le cloud · Le site est en ligne sur Internet

Le choix par défaut pour le déploiement de sites web. Sans Vercel, le site que Claude construira pour vous résidera uniquement sur votre ordinateur à l'adresse localhost:3000 · personne d'autre ne le verra. Dès que vous dites à Claude 'déploie sur Vercel', il pousse le code, le déploie sur le cloud, et vous renvoie une adresse publique que vous pouvez partager.

Astuce pour les agents : après l'inscription, retournez dans Claude → Customize → Connectors → Browse Connectors → Vercel → Connect. C'est ainsi que Claude déploie des sites en un clic.

Supabase

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

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

Astuce pour les agents : comme pour Vercel · connectez le connecteur dans Customize → Connectors. Nom du connecteur : Supabase. Le compte gratuit suffit pour 99% des projets personnels.

GitHub

Sauvegarde de code · Comme Google Drive pour votre site web

Sur GitHub, vous stockez tout le code du site en ligne. Si quelque chose casse, si Claude a fait une erreur irréversible, 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 'sauvegarde sur GitHub' et il pousse la dernière version.

Astuce pour les agents : les 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 ensemble · coûtent zéro sjekel pour les débutants. Ce n'est que si vous souhaitez un site avec un trafic élevé (des milliers d'utilisateurs par jour) ou une base de données particulièrement grande · qu'il existe des formules payantes. Pour 99% des projets personnels et petits projets professionnels · la version gratuite suffit.

Étape 2 · Comment ouvrir un nouveau projet dans Claude

Vous voulez maîtriser Claude Code de zéro ?

Ce guide vous a donné les bases. L'atelier complet Claude Code construit ensemble étape par étape : installation, CLAUDE.md, compétences, agents et un site web en direct. 4 sessions enregistrées, accès à vie.

Étape 3 · Méthode 1 · Jetez à Claude tout ce qui vous passe par la tête

Exemple de prompt pour Claude Code (à copier et modifier)

Je veux créer un site web adapté pour des semelles orthopédiques pour chaussures. Je veux que le site soit dans mon style · futuriste, aérien, avec des polices claires et un contraste très net. Teintes : monochrome · blanc, noir, gris. Accent bleu futuriste. Le moins de désordre visuel possible. Je veux des images d'athlètes et de soldats en train de courir, pour que les gens comprennent l'orientation. Je veux des témoignages clients · des personnes qui notent depuis Google et recommandent le produit. Si je n'ai pas cela · laisse simplement un espace réservé vide que je remplirai moi-même. Je veux un bouton WhatsApp flottant pour pouvoir contacter un représentant le plus rapidement possible. Dans le Hero · je veux une image d'une semelle flottant dans l'espace. Si tu ne peux pas créer une telle image · crée un prompt à alimenter dans un modèle d'image. Travaille en mode Plan. Présente-moi le plan. Après mon validation · passe à la construction.

🎯 Important · commencez toujours en mode Plan (bouton en bas de Claude). Cela économise 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. En mode Plan, vous voyez toutes les couleurs, les polices et l'ordre des sections · puis vous validez.

Étape 4 · Méthode 2 · Inspiration à partir d'un site existant

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 ici le lien du site d'inspiration] [De plus · glisser l'image Full Page dans Claude] Travaille en mode Plan. 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 · ainsi il se rapprochera davantage de l'original.

⚠️ C'est de l'inspiration · pas du plagiat. On prend le visuel et la structure, mais on remplace le contenu, les images et les produits par les vôtres. Les couleurs et les polices peuvent également être modifiées. Ainsi, le site a l'air aussi professionnel que le site que vous avez aimé · mais il est le vôtre.

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

Flux de travail avec 21st.dev

• Entrez sur 21st.dev et inscrivez-vous avec Google (5 secondes)
• Parcourez les catégories · Hero, Buttons, Cards, Galleries, Animations
• Trouvez un composant que vous aimez · visualisez un aperçu en direct sur la page
• Cliquez sur le bouton bleu Copy Prompt en haut
• Revenez dans Claude, collez, et appuyez sur Entrée
• Claude construit le composant sur le site · vérifiez sur localhost:3000 que cela ressemble à ce que 21st a montré

L'atelier complet Claude Code rassemble tout en un seul endroit : installation, compétences, agents et création de sites web. 4 sessions enregistrées à vie.

Étape 6 · Compétences · La différence entre un site AI générique et un site premium

⚖️ Particulièrement important · accessibilité et confidentialité. En Israël, un site web qui ne respecte pas la norme d'accessibilité (norme 5568) expose son propriétaire à une plainte pouvant aller jusqu'à 50 000 sjekels. 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ésolvent cela en un clic.

agentskills.co.il

Bibliothèque de compétences israélienne en hébreu

La bibliothèque israélienne · des compétences adaptées à la réglementation israélienne (confidentialité, accessibilité), à la langue hébraïque et au marché local. Toutes les compétences sont gratuites. Cela vaut la peine de tout parcourir avant de commencer un nouveau site pour un public israélien · en particulier Israeli Privacy Shield, Israeli Accessibility Compliance et Hebrew Content Writer.

Astuce pour les agents : copiez la commande d'installation noire de la page de la compétence, collez-la dans Claude, et Claude l'installe. La compétence apparaît ensuite dans Customize → Skills.

skills.sh

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

Le répertoire principal pour les compétences de la communauté. Parcourez les catégories (Website, Marketing, Productivity), trouvez une compétence et vérifiez qu'elle possède le label Trust Hub Pass (le code a été testé et est sécurisé). La compétence UI/UX Pro Max est particulièrement intéressante · 50 styles de design, 161 palettes de couleurs et 57 paires de polices.

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.

Étape 7 · Déploiement en ligne · Le site est actif sur Internet

Vous voulez maîtriser Claude Code de zéro ?

Ce guide vous a donné les bases. L'atelier complet Claude Code vous permet de construire ensemble étape par étape : installation, CLAUDE.md, compétences, agents et site en ligne. 4 sessions enregistrées, accès à vie.

✅ C'est fait · Vous avez un site actif sur Internet construit avec Claude Code, sans écrire une seule ligne de code. À partir de là, vous pouvez continuer à l'améliorer · ajouter des pages, connecter un formulaire de prospects à Supabase ou ajouter un blog. Pour chaque modification · dites simplement à Claude ce que vous voulez, et il l'exécute et le redéploie.

Outils et liens utiles

Tout ce dont vous avez besoin pour créer un site avec Claude Code · au même endroit

Extension approfondie · Les 3 méthodes de design, 9 compétences recommandées et déploiement sur le cloud étape par étape

Guide d'installation complet de Claude Code · Le point de départ si vous ne l'avez pas encore installé

Déploiement du site en ligne · Une adresse publique en un clic. Gratuit pour les débutants

Base de données pour le site · Formulaires, prospects et commandes. Gratuit pour la plupart des projets

Bibliothèque de composants de design premium avec un prompt prêt à l'emploi pour chaque composant

Répertoire de compétences israélien · Accessibilité, confidentialité et rédaction en hébreu

Foire aux questions · Comment créer un site avec Claude Code

Oui, et c'est exactement le concept. Claude Code écrit tout le code en arrière-plan · vous décrivez simplement en langage naturel ce que vous voulez sur le site. Aucune connaissance technique, apprentissage d'un langage de programmation ou compréhension de la structure des sites n'est nécessaire. Si vous savez décrire ce que vous voulez · vous pouvez créer un site.

Un site de base ou une landing page peut être mis en ligne en moins d'une heure · installations initiales comprises. Une fois les outils installés, la construction proprement dite d'un nouveau site prend quelques minutes, et les améliorations se font en temps réel. Un site plus complexe avec de nombreuses pages et fonctionnalités peut demander quelques heures de travail cumulées.

Les outils nécessaires (Vercel, Supabase, GitHub) sont gratuits pour les débutants et suffisent pour 99 % des projets personnels et de petits projets professionnels. Le seul coût est l'abonnement à Claude et, si nécessaire, un nom de domaine payant (quelques dizaines de sjekels par an). À comparer aux milliers de sjekels que demande un développeur pour un site.

Avec un constructeur de sites, vous êtes limité aux modèles et aux composants autorisés par le système. Avec Claude Code, il n'y a aucune limite · vous pouvez demander n'importe quelle fonctionnalité vue sur un site leader et Claude la construira, et le site vous appartient entièrement (le code est sauvegardé sur GitHub). De plus, le contrôle du design est beaucoup plus précis · vous modifiez chaque détail lors d'une conversation normale.

Uniquement si vous les ajoutez. Un site israélien doit respecter la norme d'accessibilité SI 5568 et la loi sur la protection de la vie privée, sous peine de s'exposer à des poursuites pouvant aller jusqu'à 50 000 sjekels. La solution consiste à installer des compétences dédiées (telles que Israeli Accessibility Compliance et Israeli Privacy Shield depuis le répertoire agentskills.co.il) · Claude intègre automatiquement l'accessibilité, la politique de confidentialité et la bannière de cookies.

C'est précisément la raison pour laquelle on effectue des sauvegardes sur GitHub. Chaque fois qu'une fonctionnalité fonctionne bien, on dit à Claude 'sauvegarde sur GitHub'. Si par la suite Claude fait une erreur impossible à corriger · on revient en un clic à la version précédente enregistrée sur GitHub. C'est le filet de sécurité qui permet d'expérimenter sans crainte.

Ce guide constitue la base. Dans l'atelier Claude Code, nous construisons tout de zéro, étape par étape, ensemble · installation et configuration, création de compétences, agent WhatsApp en direct, et une session bonus complète sur la création de sites selon 3 méthodes (Vibe Coding, inspiration, 21st.dev). 4 sessions enregistrées avec un accès à vie, et toutes les compétences et prompts prêts à l'emploi en copier-coller. Si vous voulez créer des sites avec Claude Code correctement · c'est l'endroit où commencer.

Foire aux questions

Est-il possible de créer un site avec Claude Code sans savoir programmer ?

Oui, et c'est exactement le concept. Claude Code écrit tout le code en arrière-plan · vous décrivez simplement en langage naturel ce que vous voulez sur le site. Aucune connaissance technique, apprentissage d'un langage de programmation ou compréhension de la structure des sites n'est nécessaire. Si vous savez décrire ce que vous voulez · vous pouvez créer un site.

Combien de temps faut-il pour créer un site avec Claude Code ?

Un site de base ou une landing page peut être mis en ligne en moins d'une heure · installations initiales comprises. Une fois les outils installés, la construction proprement dite d'un nouveau site prend quelques minutes, et les améliorations se font en temps réel. Un site plus complexe avec de nombreuses pages et fonctionnalités peut demander quelques heures de travail cumulées.

Combien coûte la création d'un site avec Claude Code ?

Les outils nécessaires (Vercel, Supabase, GitHub) sont gratuits pour les débutants et suffisent pour 99 % des projets personnels et de petits projets professionnels. Le seul coût est l'abonnement à Claude et, si nécessaire, un nom de domaine payant (quelques dizaines de sjekels par an). À comparer aux milliers de sjekels que demande un développeur pour un site.

Quelle est la différence entre Claude Code et un constructeur de sites comme Wix ?

Avec un constructeur de sites, vous êtes limité aux modèles et aux composants autorisés par le système. Avec Claude Code, il n'y a aucune limite · vous pouvez demander n'importe quelle fonctionnalité vue sur un site leader et Claude la construira, et le site vous appartient entièrement (le code est sauvegardé sur GitHub). De plus, le contrôle du design est beaucoup plus précis · vous modifiez chaque détail lors d'une conversation normale.

Un site construit avec Claude Code est-il conforme à la loi en Israël ?

Uniquement si vous les ajoutez. Un site israélien doit respecter la norme d'accessibilité SI 5568 et la loi sur la protection de la vie privée, sous peine de s'exposer à des poursuites pouvant aller jusqu'à 50 000 sjekels. La solution consiste à installer des compétences dédiées (telles que Israeli Accessibility Compliance et Israeli Privacy Shield depuis le répertoire agentskills.co.il) · Claude intègre automatiquement l'accessibilité, la politique de confidentialité et la bannière de cookies.

Que faire si Claude casse quelque chose sur le site ?

C'est précisément la raison pour laquelle on effectue des sauvegardes sur GitHub. Chaque fois qu'une fonctionnalité fonctionne bien, on dit à Claude 'sauvegarde sur GitHub'. Si par la suite Claude fait une erreur impossible à corriger · on revient en un clic à la version précédente enregistrée sur GitHub. C'est le filet de sécurité qui permet d'expérimenter sans crainte.