J'ai créé un site web avec Claude en un après-midi et je l'ai vendu 10 000 $. Voici la méthode exacte.

J'ai enregistré le processus complet, puis je l'ai décomposé étape par étape pour que tu puisses le reproduire. Le site ci-dessous a l'air d'avoir coûté cinq chiffres à un freelance. Personne qui le visite ne devine que l'IA a écrit le code. Coût total pour le mettre en ligne : environ 60 $.

GIF

D'abord – la vérification honnête

Je ne vais pas te vendre du rêve. Avant le « comment », voici ce qui est réel et ce qui ne l'est pas.

Ce qui est réel :

• Claude Code écrit l'intégralité du code d'un site from scratch d'après ta description. Pas de modèle, donc ton site ne ressemble pas à tous les clones Wix/Squarespace. C'est la raison principale pour laquelle le résultat peut atteindre une barre premium.
• Les deux compétences que j'utilise sont réelles et gratuites. L'une est frontend-design, créée par Anthropic — elle tourne en arrière-plan et interdit les polices et mises en page d'IA les plus galvaudées. L'autre est UI/UX Pro Max, une compétence créée par la communauté qui embarque des dizaines de styles UI, palettes de couleurs et associations de polices que tu peux utiliser à la demande.
• Le workflow image/vidéo est réel. ElevenLabs agrège désormais les meilleurs modèles visuels (GPT Image, Google Veo 3.1) plus l'upscaling Topaz dans un seul onglet — j'ai vérifié, ils ont pivoté vers l'image et la vidéo fin 2025. Tu génères une image fixe, tu l'animes, et tu l'agrandis sans quitter la page.
• Claude Code est inclus dans le plan Claude Pro à 20 $/mois (17 $ si abonnement annuel). Tu n'as pas besoin d'un plan Max pour ça. Confirmé et à jour en juin 2026.
• L'hébergement chez un hébergeur économique avec un domaine gratuit la première année revient à ~40–45 $/an.

Ce qui n'est PAS magique : Les « 10 000 $ » représentent la valeur du résultat, pas ton gain garanti. Un site comme celui-ci coûte 5 000 $ – 15 000 $ à construire en agence. Que tu gagnes vraiment cet argent dépend de ta capacité à le vendre — plus de détails sur l'argent plus bas. Les prompts ici sont des points de départ, pas un distributeur automatique.

Chaque outil cité est réel. Chaque prix est à jour en juin 2026.

Ce qui sépare un site à 10 000 $ d'un site à 200 $

Avant de construire quoi que ce soit, il te faut une cible. J'ai demandé à Claude ce qui rend un site cher visuellement, et cela se résume à 8 éléments en 3 groupes :

Le goût

1. Un point de vue — une direction de design réelle, pas un mood board
2. La typographie — des polices intentionnelles (et pas les plus utilisées)
3. La couleur — de la retenue, 4–5 valeurs hex max, pas d'arc-en-ciel

Le fond

1. La hiérarchie — la taille indique à l'œil quoi lire en 1er, 2e, 3e
2. L'imagerie — personnalisée ou générée par IA de façon crédible, jamais du stock pourri
3. Le texte — sobre, sensoriel, écrit comme un humain, pas comme une machine à adjectifs

La qualité ressentie

1. Le mouvement — des effets de curseur et micro-interactions qui donnent vie au site
2. Le mobile — conçu pour les téléphones, pas un ordinateur rétréci

Garde cette liste. À la fin, tu évalueras ton propre site sur ces 8 critères. Ce passage d'auto-évaluation est le geste unique qui sépare un résultat peaufiné d'un résultat générique.

À qui ça s'adresse

Ça marche si tu :

• Veux vendre des sites web à des commerces locaux (restaurants, salles de sport, cliniques, immobilier, etc.) sans savoir coder
• Es déjà freelance et veux multiplier par 10 ta production et tes tarifs
• Veux un site premium pour ton propre business ou ta marque personnelle
• Peux consacrer un après-midi concentré et es prêt à itérer plutôt que d'attendre la perfection en un clic

Ce n'est pas pour toi si tu veux un jouet « appuie sur un bouton, gagne de l'argent ». La qualité de ton brief et ta volonté de t'opposer quand quelque chose paraît plat est le travail.

Ce dont tu as besoin (et ce que ça coûte)

Coût total réaliste pour un site fini : ~60 $ (un mois de Claude Pro + hébergement + domaine pour l'année).

La construction complète, étape par étape

Étape 1 — Configurer Claude Code

Inscris-toi à Claude Pro sur claude.com. Télécharge l'appli de bureau (icône de téléchargement, en bas à gauche → section Claude Code → appli bureau → lance l'installateur). Connecte-toi.

Passe du mode chat au mode code (onglet en haut à gauche, ou Cmd/Ctrl + 3).

Crée un nouveau dossier vide n'importe où sur ton ordinateur — c'est ton espace de travail. Clique sur le bouton de sélection de dossier près de la zone de chat et ouvre-le dans l'appli. Claude Code fonctionne mieux quand il a son propre dossier.

L'interface se met à jour souvent, donc si un bouton n'est pas exactement là où je le décris, pas de panique — le concept est le même, trouve l'équivalent.

Étape 2 — Niveau supérieur pour Claude avec deux compétences

Par défaut, Claude est un généraliste. Son design par défaut est ok — il utilise les mêmes polices et mises en page que tous les sites IA. Les compétences corrigent ça.

Installe la compétence #1 — frontend-design (tourne en arrière-plan) : Colle le lien de la compétence frontend-design dans Claude Code avec :

1Installe cette compétence globalement.

Autorise les modifications quand il le demande.

Installe la compétence #2 — UI/UX Pro Max (tu l'appelles à la demande) : Colle le lien de UI/UX Pro Max dans Claude Code avec ce texte exact — le libellé est important car l'installation se fait proprement via le terminal :

1Installe ce plugin avec npm, globalement.

Autorise les modifications.

Étape 3 — Activer le mode automatique

En bas à gauche, sous le chat, bascule le sélecteur de mode sur mode automatique. Cela permet à Claude de travailler sans s'arrêter pour demander la permission à chaque étape. Avec le mode auto activé et les deux compétences installées, tu es prêt à construire.

Étape 4 — Rassembler des références (ton raccourci vers le goût)

Décrire le goût visuel avec des mots est difficile, surtout si tu débutes en design. Les références corrigent ça : des captures d'écran de sites que tu aimes, que tu donnes à Claude pour qu'il s'aligne sur l'ambiance. C'est bien plus facile de montrer le goût que de le décrire.

Où je les trouve :

• Dribbble — là où les designers postent leur travail
• Awwwards — sites primés, niveau très élevé
• Pinterest — cherche exactement ce que tu veux, p. ex. « design site web restaurant moderne »

Trouve 3 à 5 sites que tu aimes et sauvegarde des captures. Tu ne les copies pas — tu montres la direction à Claude.

Étape 5 — Le seul prompt qui construit le site

C'est toute la vidéo en un seul geste. Tu appelles la compétence design, tu donnes le brief, tu attaches tes captures de référence, et tu termines par la ligne magique.

Pour mon projet, j'ai fait un site pour un restaurant à Seattle. Voici la structure du prompt — adapte le brief à ton projet :

1/ui-ux-pro-max
2
3Construis un site d'une seule page pour [ENTREPRISE — p. ex. un restaurant haut de gamme à Seattle].
4
5Direction : [l'ambiance dans tes propres mots — p. ex. luxe sombre et tamisé, mais ancré dans le
6Pacific Northwest, PAS un steakhouse générique de Manhattan].
7
8Sections (dans l'ordre) : [p. ex. hero, philosophie/histoire, menu, la salle, réserver].
9Pas de galerie, pas de système de réservation — juste une page qui défile de haut en bas.
10
11Je joins 3 à 5 captures d'écran de référence pour le style visuel.
12Corresponds à *l'ambiance*, ne les copie pas.
13
14Stack technique : HTML/CSS/JS statique en un seul fichier (pas de React — reste simple).
15
16Avant d'écrire la moindre ligne de code, pose-moi des questions de clarification.

Cette dernière ligne — « pose-moi des questions de clarification » — est ce qui fait que Claude s'arrête et réfléchit avant de construire. Il m'est revenu avec environ 7 questions : le nom, la direction stylistique, les sections, qui écrit le texte, le stack technique, le niveau d'animation, etc.

La partie la plus importante : Claude m'a proposé trois directions stylistiques parmi lesquelles choisir, comme un menu. J'ai choisi le luxe sombre/tamisé avec une base Pacific Northwest, cinq sections, pas de galerie, pas de réservation — une page qui défile.

C'est le moment le plus crucial de la construction. Tes réponses ici deviennent l'intégralité du site. Plus tu es précis maintenant, moins tu devras batailler avec Claude plus tard. Prends ton temps.

Ensuite, envoie. Claude passe environ 3 minutes à lire et planifier avant d'écrire une ligne, puis 4 à 5 minutes à construire. Saute à la révélation.

Questions posées par Claude

Révélation de la 1re version

Étape 6 — Évalue-toi par rapport à la checklist en 8 points

Avant de continuer à peaufiner, vérifie le site par rapport à la barre que tu as fixée. Colle la checklist en 8 points (plus haut dans cet article) dans Claude et demande :

1Voici ma checklist en 8 points pour un site à 10 000 $. Parcours le site actuel et
2dis-moi honnêtement où il se situe sur chacun : solide, mitigé ou absent. Sois impitoyable.

Sur mon projet, Claude a répondu : point de vue — solide, couleur — solide, hiérarchie — solide, typographie — mitigé, et imagerie/mouvement/mobile/éléments invisibles — tous mitigés. Tu obtiendras une répartition similaire, et ce n'est pas grave. L'important est de savoir exactement ce qu'il reste à faire.

Étape 7 — C'est ici que ça passe de professionnel à « cher »

Ce chapitre fait toute la différence. Ne corrige pas les choses une par une — cela gaspille des tokens et le résultat donne l'impression d'être rafistolé. Guide avec l'intention, pas les détails, et demande un lot.

Voici le prompt exact que j'utilise :

1Nous avons besoin de micro-interactions plus artisanales. Les sections inférieures semblent un peu génériques.
2Il ne faut pas les alourdir — juste les rendre plus chères. Propose un lot d'améliorations
3et applique-les toutes en même temps.

Remarque : je ne dis pas à Claude quoi ajouter — je lui dis comment je veux que ça se ressente. Claude est meilleur pour transformer une intention en détails que la plupart des gens pour rédiger un cahier des charges. Il m'est revenu avec un lot : un grain argentique sur tout le site, des traits en laiton animés entre les sections, un effet de braise lumineuse, des révélations de titres mot par mot. Cinq modifications, un seul prompt, livrées ensemble.

Ensuite, fais toi-même le tour des sections. Parcours le site, trouve les sections qui semblent encore plates — il y en a toujours une ou deux — et donne à Claude un mouvement ou une interaction de curseur par section :

1La section [histoire] est statique. Ajoute un micro-mouvement élégant ou une interaction de curseur
2ici. Reste subtil et raffiné — vivant, pas bruyant.

Si la première tentative est trop évidente, corrige : « Rend-le plus subtil, ajoute un léger décalage pour qu'il suive le curseur. » Sur mon projet, cela a transformé un halo de bougie fixe en un halo qui suit ton curseur avec un doux retard. Deux prompts, deux sections — cette couche fait la différence entre un site qui a l'air cher et un site qui se ressent cher quand tu navigues.

Étape 8 — Imagerie : apporte-la ou génère-la

GIF

L'imagerie est le seul pilier que Claude ne peut pas résoudre entièrement tout seul. Meilleure option : la photographie personnalisée. Mets-la dans ton dossier de projet et dis à Claude ce que c'est et où.

Pas de budget photo ? La génération par IA est maintenant assez bonne pour que personne ne fasse la différence. L'astuce pour aller vite : n'écris pas le prompt d'image toi-même — Claude connaît déjà ton projet, donc demande-lui d'écrire le prompt à ta place :

1Écris-moi un prompt de génération d'image pour le hero de ce site. Il doit correspondre
2exactement à l'ambiance, la palette de couleurs et la direction que nous avons construites jusqu'ici. Ne sors que le prompt.

Colle-le dans ton générateur d'images et tu obtiens quelque chose de cohérent du premier coup. Dans ElevenLabs, tu peux générer une image fixe (GPT Image), placer exactement cette image dans Google Veo 3.1 pour l'animer, et agrandir avec Topaz — tout dans un seul onglet. Dépose le fichier final dans ton dossier de projet.

Étape 9 — Ajoute des composants pro depuis 21st.dev

GIF

Quand tu veux un élément visuel marquant (un effet de défilement, un hero sophistiqué), 21st.dev est une bibliothèque gratuite de composants créés par de vrais développeurs. Trouves-en un qui te plaît, clique sur Copier le prompt, colle-le dans Claude Code, attache ton fichier, et dis à Claude de construire le hero avec.

Voici la partie importante : Claude protège ton architecture. Le composant de défilement que j'ai choisi était conçu pour React ; mon projet était un simple site statique, donc Claude a refusé d'ajouter la version React car elle aurait changé le fonctionnement de tout le projet — et a reconstruit l'effet en HTML pur à la place. (Si ton projet a vraiment besoin de React — un tableau de bord, un paiement, une connexion — Claude aurait dit oui. Il ne casse pas les choses juste parce que tu le demandes.)

Quand l'effet ne marche pas du premier coup — le mien a bugué — décris simplement ce qui ne va pas :

1La vidéo s'affiche mais le défilement ne fonctionne pas comme le composant le devrait. Creuse plus —
2ouvre la page dans le navigateur, inspecte ce qui se passe réellement et corrige la vraie cause.

Claude a ouvert la page lui-même, l'a inspectée en direct et a trouvé le vrai bug trois couches plus profond. La leçon : continue d'insister. Explique ce qui a cassé et ce que tu attendais — Claude peut presque toujours résoudre le problème si tu le laisses regarder de plus près.

Étape 10 — Texte, polices et mobile (les victoires rapides)

GIF

Texte : Le texte généré par IA est par défaut trop explicatif. Un texte premium est sobre et sensoriel — « Côte de bœuf maturée. 450 g. 60 jours. Cuisson au feu de bois. » donne l'impression qu'un chef l'a écrit. La compétence frontend-design pousse Claude dans cette direction, c'est pourquoi elle mérite sa place dans chaque projet.

Polices : il y a une police — Inter — tellement utilisée qu'elle crie instantanément « fait par IA ». Si tu la vois dans ton résultat :

1Remplace Inter partout par une police moins galvaudée — Geist fonctionne bien. Garde la police du titre.

Mobile : « responsive » n'est pas « conçu pour les téléphones ». Les téléphones verront ton site bien plus souvent que les ordinateurs. Demande un passage dédié :

1Fais un passage dédié mobile. Décide ce qui doit être caché sur les petits écrans, ce qui doit
2être plus resserré et ce qui doit être redimensionné. C'est la version que la plupart des gens verront réellement.

Sur mon projet, la navigation s'est repliée, le logo a reçu un espacement plus serré et les boutons ont eu une variante plus petite. Avec ça, les 8 critères de la checklist sont remplis.

Étape 11 — Mettre en ligne (la partie que tout le monde rate)

Pour l'instant, ton site n'existe que sur ton ordinateur — cette URL localhost ne fonctionne que sur ta machine. Pour le partager, il te faut un hébergement + un vrai nom de domaine.

Choisis un hébergeur avec un domaine gratuit la première année. Pour un site statique simple (pas de connexion, pas de paiement, pas de base de données), le niveau « premium/partagé » le moins cher suffit. Règle la durée sur 12 mois — c'est le minimum pour obtenir le domaine gratuit. Cherche ton domaine, réserve-le. Mon total est ressorti à ~43 $ pour l'année : hébergement + domaine + email.

Si Claude t'a construit quelque chose avec un vrai backend (il a dit

oui

à React, a mis en place Node.js, une base de données, etc.), choisis le

business

niveau à la place — il supporte Node.js. Le moment où Claude a accepté ou refusé React à l'étape 9 te dit de quel plan tu as besoin.

L'erreur unique qui charge une page blanche : quand tu télécharges, zippe les fichiers à l'intérieur de ton dossier de projet — pas le dossier lui-même. Ouvre ton dossier de projet, sélectionne tout ce qu'il contient (Cmd/Ctrl + A), puis compresse. Tu veux un seul zip avec index.html au premier niveau. Si tu zippes le dossier entier, l'hébergeur le décompresse un dossier trop profond et ton domaine affiche une page blanche.

Dans l'assistant de l'hébergeur, choisis Migrer un site existant → Télécharger des fichiers de sauvegarde, sélectionne ton domaine, fais glisser le zip, soumets. Clique sur ton domaine — et le voilà, ton site à 10 000 $ en ligne sur une URL personnalisée.

Combien tu peux réellement gagner avec ça

Le site lui-même est un actif d'une valeur de 10 000 $. Voici comment ça se transforme en argent :

• Vendre des sites à des commerces locaux est la voie la plus rapide. Restaurants, dentistes, salles de sport, agents immobiliers et artisans paient régulièrement 1 000 $ – 5 000 $ pour un site premium d'une page. Construis-en un en un après-midi, facture en conséquence. Deux clients par mois à 2 000 $ = 4 000 $/mois à temps partiel.
• Freelances expérimentés / petites agences facturent 5 000 $ – 15 000 $ pour exactement ce genre de site personnalisé, animé et conçu pour mobile — et le livrent désormais en quelques heures au lieu de semaines. La marge est le point central.
• Service produit : vends un forfait fixe « page unique premium en 5 jours pour 1 500 $ ». Prévisible, reproductible, et tu peux en gérer plusieurs à la fois.
• Ta propre marque : si tu l'utilises pour toi, le « gain » réside dans les contrats et la crédibilité qu'un site à cinq chiffres t'apporte.

Ramp réaliste pour quelqu'un qui commence aujourd'hui : premier client payant en quelques semaines, 1 000 $ – 5 000 $/mois à temps partiel en quelques mois si tu fais vraiment de la prospection. La construction n'est plus le goulot d'étranglement — c'est la vente.

Ce qui change pour toi après ça

GIF

Avant, un site web premium personnalisé signifiait soit apprendre à coder pendant des mois, soit payer un développeur des milliers. Après ça, le mur technique a disparu. Tu peux produire un site vraiment cher, entièrement personnalisé, animé et conçu pour mobile en un après-midi — et soit le vendre, soit l'utiliser pour donner de la crédibilité à ton propre projet.

La compétence que tu obtiens vraiment n'est pas le « codage ». C'est la direction — savoir à quoi ressemble le « cher », le brief précisément, et insister jusqu'à ce que ce soit juste. Cette compétence se cumule sur tous les sites que tu construiras après celui-ci.

Ta prochaine étape (fais-le aujourd'hui)

1. Inscris-toi à Claude Pro et installe l'appli bureau.
2. Installe les deux compétences (étape 2) et active le mode automatique.
3. Sauvegarde 3 à 5 captures d'écran de référence depuis Dribbble ou Awwwards.
4. Lance le prompt de construction de l'étape 5 — y compris « pose-moi des questions de clarification » — et réponds attentivement.

Ne saute pas la collecte de références ni les questions de clarification. C'est là que viennent 80 % de la qualité. Construis un site de bout en bout avant de t'inquiéter de la vente — tu dois d'abord voir ça fonctionner.

Une chose honnête

Ce n'est pas une pilule magique. C'est un vrai outil qui fait un vrai travail — mais le résultat dépend de toi. Les prompts ci-dessus sont des points de départ, pas des scripts. La différence entre un site qui ressemble à un template et un site qui ressemble à 10 000 $, c'est le goût que tu apportes, les références que tu choisis et le nombre de fois où tu t'opposes à une section plate au lieu d'accepter le « c'est assez bien ».

Claude s'occupe de l'exécution. Ta direction et ton effort décident du résultat. Ce que tu en fais dépend entièrement de toi.

*

*Merci de bookmarker, RT et suivre @thegreatest_svpour plus d'alpha, d'outils IA et de recherches de qualité.AVERTISSEMENT (Gains & Infos) Les gains ou statistiques présentés dans cet article sont des exemples issus de mes recherches et de ma propre expérience et ne constituent pas une garantie de ce que vous gagnerez. Les résultats varient en fonction de la niche, de la qualité du contenu, du RPM/CPM, de l'engagement de l'audience, de la régularité, des efforts et d'autres facteurs. Ce n'est pas un conseil financier, fiscal, juridique ou professionnel – consultez les experts appropriés avant de prendre des décisions commerciales.Ressources & liens

Outils et ressources Claude Code : https://claude.com/

Compétence Frontend Design (par Anthropic) :

**https://github.com/anthropics/skills/tree/main/skills/frontend-design

Compétence UI/UX Pro Max :

**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

21st.dev : https://21st.dev

La checklist du site à 10K $ (PDF gratuit à télécharger) : https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view

Sites de référence en design

Dribbble : https://dribbble.com

Awwwards : https://www.awwwards.com

Pinterest : https://pinterest.com