Claude Code : créer un site web complet en 2026 (guide pas à pas)

T'as entendu parler de Claude Code. Peut-être dans un tweet, peut-être dans une newsletter.

Et maintenant tu te demandes si c'est vraiment utilisable. Pas juste impressionnant dans une démo. Vraiment utilisable pour toi, là, maintenant.

La réponse courte : oui. Mais pas n'importe comment.

Ce guide te montre exactement comment utiliser Claude Code pour créer un site web en 2026. Étapes concrètes, prompts réels, et le piège à éviter si tu veux pas perdre 4 heures de contexte dès le départ.

Claude Code, c'est quoi exactement ?

Claude Code c'est pas Claude.ai.

Claude.ai, c'est la version navigateur. Tu poses une question, tu obtiens une réponse. T'as aucun accès à tes fichiers, à ton terminal, à ton projet.

Claude Code c'est autre chose. C'est un outil en ligne de commande. Tu l'installes sur ta machine, tu l'ouvres dans ton projet, et il a accès à tout : tes fichiers, ton arborescence, ta config.

Tu tapes une instruction en français. Il exécute.

C'est la différence entre demander à quelqu'un de t'expliquer comment changer un pneu et demander à quelqu'un de changer le pneu à ta place.

Qui peut l'utiliser ?

Claude Code est inclus dans Claude Pro à 20 $/mois. Pas besoin d'abonnement séparé. Pas besoin d'être développeur senior. Pas besoin de savoir lire du TypeScript à l'envers.

T'as juste besoin de savoir ce que tu veux. Claude Code s'occupe du comment.

Ce que Claude Code peut faire sur un site web

Concrètement, voilà ce que Claude Code sait faire sur un projet Next.js :

Modifier les fichiers de configuration (nom du site, couleurs, infos de contact)
Créer des composants React à partir d'une description
Écrire des articles de blog MDX complets avec frontmatter
Adapter le SEO, les métadonnées, l'Open Graph
Refactorer du code existant sans casser le reste
Installer des dépendances et configurer des packages
Débugger des erreurs TypeScript en lisant les logs

Et tout ça sans que tu touches à un seul fichier manuellement.

Tu décris. Il exécute. Tu valides.

C'est pas de la magie. C'est juste une boucle de travail qui change tout.

Le problème si tu pars de zéro

On va pas se mentir.

Claude Code est puissant. Mais il a un angle mort massif si tu pars d'un projet vide ou mal documenté.

Imagine la situation : tu clones un starter Next.js basique. Pas de doc, pas de conventions définies, pas de structure claire. Tu ouvres Claude Code et tu lui demandes de personnaliser le site pour ton client.

Il va commencer par explorer. Il va lire les fichiers un par un. Il va essayer de comprendre si c'est l'App Router ou le Pages Router. Il va chercher où est la configuration. Il va tenter de deviner tes conventions de nommage.

Chaque exploration brûle des tokens.

On parle pas de quelques centaines. On parle de centaines de milliers de tokens consommés juste pour comprendre l'architecture avant même de commencer à travailler.

C'est comme engager un prestataire et lui donner les clés d'un bureau en désordre. La moitié de sa journée part à comprendre où tout est rangé.

Cherche pas. Le problème vient pas de Claude Code. Il vient de l'absence de contexte.

Onyx + Claude Code : le combo qui change tout

Onyx est un template Next.js open source développé par Spectre Digital. Il inclut un fichier qui change tout : CLAUDE.md.

C'est quoi CLAUDE.md ?

CLAUDE.md c'est un fichier de documentation que Claude Code lit automatiquement dès qu'il ouvre le projet. Il y trouve :

L'architecture complète du projet expliquée fichier par fichier
Les conventions de code (TypeScript strict, App Router, Tailwind v4)
Où passe la configuration client (site.config.ts)
Comment fonctionnent les composants et le système de blog
Le workflow de duplication pour un nouveau client

Résultat : dès le premier message, Claude Code comprend exactement dans quoi il travaille.

Pas besoin d'expliquer que les couleurs sont en OKLCH dans globals.css. Il le sait. Pas besoin de préciser que tout le contenu de la home passe par src/data/home.ts. Il le sait. Pas besoin de décrire la structure des articles MDX. Il la connaît.

Des centaines de milliers de tokens économisés dès le premier prompt. Et un travail propre, cohérent, qui respecte les conventions du projet.

Consulte les fonctionnalités incluses dans Onyx pour voir ce que tu récupères dès le départ.

Guide pas à pas : créer son site avec Claude Code et Onyx

Voilà le workflow réel. Pas la version marketing. La version qui fonctionne.

Étape 1 : Cloner Onyx

git clone https://github.com/benchambolle/onyx mon-projet
cd mon-projet
npm install

Ton projet tourne en local avec npm run dev. Tu verras le site démo d'Onyx sur localhost:3000.

Étape 2 : Installer Claude Code

Si c'est pas déjà fait :

npm install -g @anthropic-ai/claude-code

Authentifie-toi avec ton compte Claude Pro. C'est tout.

Étape 3 : Ouvrir Claude Code dans le projet

cd mon-projet
claude

Claude Code lit CLAUDE.md automatiquement. Il connaît déjà l'architecture. T'as rien à lui expliquer.

Étape 4 : Configurer le site avec un seul prompt

claude "Dans site.config.ts, remplace toutes les infos placeholder par celles de mon client : nom 'Studio Lumière', url 'https://studio-lumiere.fr', email 'bonjour@studio-lumiere.fr', Twitter '@studiolumiere'."

En 30 secondes, toute la configuration est mise à jour. Nom, URL, email, réseaux sociaux, tout.

Étape 5 : Personnaliser le contenu et les couleurs

Tu continues à donner des instructions en langage naturel. Claude Code modifie les fichiers. Tu valides dans le navigateur.

C'est aussi simple que ça.

Pour un workflow plus large avec d'autres outils IA, consulte notre guide sur le workflow IA complet.

Exemples de prompts qui fonctionnent vraiment

Voilà 5 prompts testés, avec le résultat attendu pour chacun.

Configurer les infos client

claude "Dans site.config.ts, remplace toutes les infos placeholder par celles de mon client : nom 'Studio Lumière', url 'https://studio-lumiere.fr', email 'bonjour@studio-lumiere.fr', Twitter '@studiolumiere'."

Résultat : tous les champs de site.config.ts sont mis à jour. Nom dans le header, email dans le footer, liens sociaux, tout.

Créer un article de blog

claude "Crée un article MDX dans content/blog/ sur les tendances du design web en 2026. Frontmatter complet, 5 H2, environ 1200 mots, catégorie 'actualites'."

Résultat : un fichier .mdx complet, avec frontmatter valide, structure H2, contenu cohérent. Directement lisible sur le site.

Remplacer le contenu de la home

claude "Dans src/data/home.ts, remplace les 6 features par les services d'une agence créative : direction artistique, design UI/UX, développement web, motion design, branding, conseil stratégique."

Résultat : la section features de la page d'accueil affiche les vrais services du client. Icônes adaptées, descriptions courtes et propres.

Changer la palette de couleurs

claude "Adapte la palette de couleurs dans globals.css pour utiliser un vert sauge OKLCH à la place du bleu actuel. Garde la cohérence light/dark."

Résultat : toutes les variables CSS sont mises à jour en OKLCH. Le dark mode reste cohérent. Zéro conflit.

Ajouter une page de services

claude "Crée une page /services dans src/app/services/page.tsx avec 4 sections : chaque section présente un service avec titre, description courte et liste de 3 livrables. Utilise les conventions du projet."

Résultat : une nouvelle page propre, typée, qui respecte la structure App Router et les conventions Onyx.

Et tu sais quoi ? Ces prompts marchent parce que Claude Code sait déjà comment le projet est organisé. Sans CLAUDE.md, chaque prompt aurait besoin de 3 paragraphes d'explication en plus.

Les limites à connaître avant de se lancer

L'honnêteté, c'est aussi un avantage concurrentiel.

Claude Code est puissant. Il est pas infaillible.

Ce qu'il gère mal :

Le debugging complexe avec des erreurs d'état imbriquées (il peut tourner en rond)
Les animations Framer Motion très précises (il sait les créer, mais affiner au pixel demande de l'itération)
Les intégrations tierces peu documentées (APIs obscures, SDKs exotiques)
Les performances critiques (optimiser un Lighthouse de 95 à 100 demande une main humaine)

Ce que tu dois toujours faire :

Valider visuellement dans le navigateur après chaque modification importante
Lancer npm run build avant de déployer pour détecter les erreurs TypeScript
Relire le code généré sur les fichiers critiques (config, API routes)
Garder un historique git propre pour pouvoir revenir en arrière

Claude Code n'est pas un développeur senior. C'est un développeur junior très rapide, très disponible, qui ne se fatigue jamais mais qui peut faire des erreurs.

Ta valeur ajoutée : savoir quoi lui demander, valider ce qu'il produit, et corriger quand il part dans la mauvaise direction.

C'est mathématique : plus ton projet est bien structuré au départ, plus Claude Code est efficace. Et Onyx est construit exactement pour ça.

Tu préfères travailler dans un IDE plutôt qu'en terminal ? L'article sur le vibe coding couvre cette approche. Et si tu veux un workflow hybride avec un éditeur IA, jette un oeil à notre guide Cursor + Next.js.

La vraie différence

La plupart des gens qui essaient Claude Code partent d'un projet vide.

Ils passent leurs 3 premières heures à expliquer l'architecture à l'outil. Ils brûlent du contexte. Ils obtiennent des résultats approximatifs. Ils concluent que "c'est pas encore au point".

Ceux qui partent d'Onyx ont un avantage structurel dès le départ. Le CLAUDE.md fait le travail de contexte. Claude Code peut se concentrer sur ce qui compte : modifier, créer, personnaliser.

Bref tu connais la chanson. Les bons outils font pas tout. La bonne structure non plus. Mais les deux ensemble, ça change l'équation.

Regarde la documentation d'Onyx pour comprendre exactement ce que Claude Code trouve dans CLAUDE.md quand il ouvre le projet.

Onyx est open source et gratuit. Claude Pro coûte 20 $/mois. Pour créer un site web professionnel en 2026, c'est l'investissement mensuel le plus rentable que tu puisses faire.