Créer un site web de A à Z avec l'IA et Claude, sans savoir coder

Avant de taper /design, répondre à ces questions construit une charte graphique claire. Voici à quoi ça ressemble, en situation réelle — ici sur l'exemple d'un institut d'esthétique :

Le socle complet compte 8 questions de ce genre (produit, nom de marque, ambiance, offres phares, clichés à éviter, assets existants, direction visuelle, émotion attendue). Puis viennent le logo et le système d'icônes, la densité de la mise en page et le mouvement, et enfin les contraintes de lisibilité (contraste, mobile ou ordinateur en priorité) — 8 questions de plus, détaillées dans le skill à télécharger ci-dessous.

En tapant /design dans Claude Code, une option apparaît : « Create a design canvas — a multi artboard visual design ». Une fois validée, un canevas visuel s'ouvre automatiquement sur la droite de l'écran — une grille infinie dans laquelle on peut zoomer et se déplacer — pendant que le chat classique de Claude Code reste actif à gauche.

Les différentes variantes demandées apparaissent côte à côte sous forme de planches numérotées (01, 02, 03…). Chacune a un bouton Play qui la rend interactive et testable comme un vrai site — hover, boutons, tout fonctionne déjà.

Demander une déclinaison à l'oral — dans le chat, à gauche :

Les nouvelles variantes apparaissent directement sur le canevas, comparables côte à côte avec l'originale.

Retoucher soi-même — double-cliquer sur un élément de la planche ouvre un panneau de propriétés proche de Figma ou Photoshop : texte modifiable, sélecteur de couleur, réglage du rayon des angles, redimensionnement.

Une fois la variante choisie (et sauvegardée si elle a été retouchée), une phrase suffit dans le chat :

Claude Code analyse la planche visuelle choisie, écrit lui-même tout le code correspondant, l'intègre dans les fichiers du projet, et donne un lien localhost à ouvrir dans le navigateur — le site tourne, avec ses liens actifs et ses animations. Si le canevas est modifié à nouveau par la suite, le site local se met à jour automatiquement.

Un dernier geste avant de passer à la suite

Une fois le site en local, une seule chose reste à faire avant d'enchaîner sur les pages suivantes : demander à Claude de résumer toute cette direction visuelle dans un fichier unique.

Ce fichier — couleurs exactes, polices, espacements, style des composants, ton de la marque — devient la référence que toutes les pages suivantes du site doivent respecter, et que des outils de vérification comme le skill Design Loop (voir plus haut dans cette section) utilisent pour juger si une nouvelle page est fidèle à la charte. Sans lui, chaque nouvelle page redémarre de zéro ; avec, chaque nouvelle page hérite automatiquement de tout ce qui a déjà été choisi ici.

Plutôt que de décrire un style en mots, on peut montrer une capture d'écran d'un site ou d'un composant qui plaît, et demander à Claude de s'en inspirer — pour le style, jamais pour copier le contenu ou le code tel quel. Quatre galeries couvrent l'essentiel :

Le « vol » de composants haut de gamme

Plutôt que de faire inventer un widget complexe (un carrousel animé, un bouton à effet spécial), on peut regarder ces mêmes galeries — 21st.dev, Magic UI, Mobbin — copier le code ou une simple capture d'écran du composant qui plaît, et demander à Claude Code de l'intégrer en remplaçant les exemples par le vrai contenu du site.

Une fois le site hébergé en local, on peut s'appuyer sur des « skills » — des compétences pré-écrites que Claude sait utiliser sur commande — pour aller au-delà du design de base. Voici les cinq qui comptent le plus pour un site web.

Une IA a du goût, mais elle ne peut pas juger objectivement son propre travail — un peu comme demander à un chef cuisinier de noter son propre restaurant. Le skill Design Loop confie ce jugement à trois « critiques » IA indépendants qui n'ont jamais vu le code en train de se construire :

Higgsfield est une plateforme de génération d'images et de vidéos par IA. Son intérêt pour un site web : produire des visuels de marque uniques — un produit filmé sous un angle précis, une matière qui se transforme, un mouvement de caméra continu — plutôt que les photos d'illustration qu'on retrouve identiques sur des centaines de sites.

Une fois connecté à Claude, il exécute directement le plan de tournage défini pour le projet : logos, textures de fond, animations de scroll, boucles vidéo en arrière-plan, rotation à 360° d'un produit à partir d'une image de départ et d'une image d'arrivée.

Higgsfield se branche à Claude Code via un MCP (le même principe de connexion que celui utilisé pour piloter Claude Design, voir Section 01). Trois commandes dans le terminal suffisent :

La deuxième commande ouvre une fenêtre de navigateur pour se connecter à un compte Higgsfield existant — aucune clé API à copier-coller à la main. Une fois ces trois étapes faites, il suffit de demander à Claude, en langage courant, de générer une image ou une vidéo pour que Higgsfield prenne le relais.

Une image générée coûte environ 12 centimes. L'ensemble des vidéos d'un site complet — la partie la plus chère de l'opération — revient à environ 250 crédits, soit approximativement 10 dollars pour tout le site. Un budget à valider avant de lancer la génération en haute qualité, comme rappelé dans le skill à télécharger ci-dessous.

Higgsfield publie plusieurs démonstrations construites avec cette méthode — de vrais sites en ligne, pas des maquettes. Cliquer sur une carte pour voir le défilement réel du site, capturé en direct :

Ce skill est un fichier texte qui contient, une bonne fois pour toutes, toute la méthode pour construire un site cinématique. Une fois donné à Claude, plus besoin de tout réexpliquer à chaque fois — Claude connaît déjà les règles.

Étape 1 — Télécharger le fichier

Le bouton en bas de ce dépliant télécharge un fichier nommé SKILL.md. C'est un simple fichier texte, il ne s'installe pas tout seul — l'étape suivante explique comment le donner à Claude.

Étape 2 — Le donner à Claude

Étape 3 — Ce que le skill fait concrètement

Une fois installé, ce skill sait construire un plan cinématique complet : il pose les bonnes questions (par où la caméra commence, par où elle finit), choisit entre une animation en code gratuite ou une vraie vidéo générée par IA, découpe le mouvement en scènes courtes pour que ça reste fluide, et vérifie à la fin que le résultat est bien léger pour ne pas ralentir le site.

Étape 4 — Quel prompt lui donner

Pas besoin d'un prompt compliqué. Une phrase simple suffit, qui décrit l'idée générale :

Le skill prend le relais à partir de là — il pose lui-même les questions qui manquent (durée, style, animation en code ou vidéo générée) avant de commencer à construire.

Avant d'écrire quoi que ce soit, on répond à quelques questions simples : à qui parle la page, quel est le message principal à retenir, quel est le fil rouge de l'argumentation, quel appel à l'action ferme la page. Ce cadrage évite le texte générique — celui qui pourrait appartenir à n'importe quelle entreprise du même secteur.

Le contenu, lui, reste strict une fois écrit : c'est le design qui s'adapte autour, jamais l'inverse. Pour ne pas partir d'une page blanche, on peut équiper Claude Code d'une compétence dédiée qui pose les bonnes questions dans l'ordre (à qui parle la page, quelle offre, quel ton, quels visuels déjà disponibles) et qui en ressort un brief complet — le contenu figé, le design resté ouvert pour l'étape suivante.

Claude Code lit ce qui existe déjà sur le projet (l'offre, les preuves, le ton déjà en place sur les autres pages) avant de poser une seule question — pas la peine de tout lui redonner à chaque fois.

Une IA générative (ChatGPT, Perplexity, les résumés IA de Google) ne lit pas une page pour l'apprécier — elle cherche une réponse qu'elle peut recopier telle quelle. La méthode Capsule consiste à lui donner cette réponse directement, sous forme d'une définition autonome de 120 à 150 caractères, placée juste sous chaque titre de section formulé en question (« Qu'est-ce que… ? », « Comment… ? », « Pourquoi… ? »). Cette phrase doit se comprendre sans aucun lien et sans avoir besoin de lire le reste de la page — un peu comme la mention « en résumé » qu'on trouve en tête d'un article, mais répétée sous chaque grande question de la page.

Le test de validité est simple : on lit la capsule seule, hors contexte, comme le ferait une IA qui ne connaît rien d'autre de la page. Si elle répond entièrement à la question posée par le titre, elle est valide. Sinon, on la retravaille.

En plus du texte visible, chaque page importante embarque un bloc de données structurées qui décrit son contenu dans un format que les machines comprennent directement : le type de page, les questions-réponses de la FAQ, le fil d'Ariane de navigation. Pour une page de service, on y ajoute aussi le prix, la zone géographique couverte, les avis.

Pas besoin de connaître ce format pour le demander — il suffit de décrire ce que la page contient et de nommer le résultat attendu :

Pour une page de service locale, on complète avec une phrase de plus :

Une page de service efficace suit à peu près toujours le même déroulé. Ce n'est pas une contrainte créative — c'est un ordre qui correspond au raisonnement naturel d'un visiteur qui découvre une offre pour la première fois :

1. Le hero. Une accroche qui va droit au but, sans jargon, avec l'appel à l'action principal déjà visible.
2. « Vous êtes au bon endroit ». Une section courte qui montre au visiteur qu'il a atterri sur la bonne page — il se reconnaît dans la situation décrite.
3. La définition du service. Sa capsule GEO juste en dessous (voir le point 2 ci-dessus).
4. Le diagnostic de la douleur. Ce qui ne va pas aujourd'hui, avec des faits concrets plutôt que des généralités.
5. Le mécanisme de la solution. Comment ça marche, étape par étape.
6. Une preuve chiffrée. Un résultat mesuré, pas une promesse.
7. Un comparatif avant/après. La différence concrète que le service change.
8. L'offre d'entrée. Ce que le visiteur peut essayer en premier, avec le moins de friction possible.
9. Les questions fréquentes. Les objections les plus courantes, désamorcées une par une.
10. Le tarif. Affiché clairement, jamais caché derrière un formulaire.
11. L'appel à l'action final. Le même que dans le hero, répété une dernière fois.

Une belle interface qui ne vend pas ressemble à une voiture de sport sans moteur. Firecrawl est un outil qui extrait le contenu d'un site web en nettoyant tout le code technique superflu, pour ne garder que le texte et la structure — connecté à Claude via un MCP, comme Higgsfield en Section 03. Il sert deux usages, l'un plutôt design, l'autre plutôt contenu :

Le principe : choisir un site à l'expérience utilisateur remarquable — même dans un secteur totalement différent du sien — analyser les principes de son ergonomie (espacements, mouvement, hiérarchie visuelle), puis demander à Claude d'appliquer cette même logique au projet en cours, sans jamais copier le contenu ni le code.

1. Choisir un site étalon. Peu importe son secteur d'activité — ce qui compte est la qualité de son expérience de navigation.
2. Demander l'extraction et l'application. Claude analyse la typographie, les espacements, le rythme du site étalon, en tire un plan technique, puis l'applique au projet.