Je construis mes landing pages avec Claude Code, pour mes clients et pour jessem.fr. À force de corriger les mêmes défauts, j'ai écrit les règles quelque part. Puis j'en ai fait un plugin, pour que d'autres puissent s'en servir sur leur propre marque.
Il s'appelle Atelier web, et il est public depuis cette semaine.
Pourquoi une landing page faite avec Claude Code se ressemble partout
Claude Code construit une landing page en dix minutes. Je le vois à chaque formation : la première page sort vite, et elle a toujours la même tête.
Un dégradé violet. Des cartes blanches empilées. Une police par défaut. Un « +300 clients satisfaits » que personne n'a fourni. Et un bouton qui passe sous le pli dès qu'on ouvre la page sur un téléphone.
Le modèle fait ce qu'on lui demande. Sans contexte, il choisit la réponse la plus probable, et la réponse la plus probable ressemble à toutes les autres pages générées.
Il lui manque ce qu'un graphiste réclame le premier jour : la charte, le ton, les preuves qu'on a le droit d'afficher, les sections qui existent déjà sur le site. Et ce qu'un intégrateur sérieux fait le dernier jour : regarder le rendu sur un vrai écran avant de dire que c'est fini.
Ce que fait Atelier web
L'atelier reprend la méthode avec laquelle je construis les landings de mes clients. Je l'ai extraite de mon template de département marketing pour Claude Code, puis découplée pour qu'elle tourne dans n'importe quel dossier de site.
La doctrine de marque d'abord
Au premier lancement, /atelier-web:demarrer-projet-web lit votre site et vos contenus, puis rédige la doctrine de votre marque : couleurs exactes, polices, voix, preuves autorisées, composants du site. Vous la validez bloc par bloc, et elle s'écrit dans atelier/marque/, chez vous.
Toutes les skills la lisent avant de produire. Si elle manque, elles s'arrêtent.
Et un chiffre sans source n'existe pas. Quand il manque un témoignage ou un résultat, la page affiche le trou, marqué [À FOURNIR : …], et Claude vous le signale.
Une landing page construite en huit phases
La skill landing-page déroule un playbook en huit phases, et aucune ne se saute. Le cadrage tient en une seule salve de questions, chacune avec l'option que je recommande. Pendant ce temps, un agent cherche des références en images : des pages qui convertissent pour le même type d'offre, des galeries, des composants animés.
Claude propose ensuite deux ou trois directions, chacune nommée par son objet signature (« la page du billet », « la page de la carte »). Vous en choisissez une.
Le hero se construit et se valide en premier, parce qu'un hero raté entraîne toute la page. Puis les sections partent en parallèle, un agent par section, chacun propriétaire de ses fichiers.
Quatre revues avant de vous montrer la page
Quatre agents relisent la page, chacun avec son œil : design, marque, conversion, accessibilité (WCAG 2.2 AA). Leurs remarques sont arbitrées en une seule vague de corrections. Sans cet arbitrage, deux relecteurs qui se contredisent font tourner la page en rond.
Une QA qui mesure le rendu
Le script qa-landing.py mesure ce que l'œil rate à la quatrième relecture : débordements horizontaux, contrastes, tailles de texte, bouton visible sans défiler sur mobile, continuité des fonds entre sections, respect du mouvement réduit. À trois tailles d'écran.
Un hook lance aussi le contrôle de marque après chaque page écrite, y compris celles qu'assemble un script. La page vous arrive quand elle a passé tout ça.
Le dépôt GitHub, à un clic
Public, licence MIT, documentation en français et en anglais. Installez-le, adaptez-le, servez-vous-en pour vos clients.
Voir sur GitHubUne fabrique et trois marques
Un plugin de landing pages a un piège évident : fabriquer toujours la même page en changeant les couleurs. Pour le vérifier, je l'ai fait tourner sur trois marques fictives, avec trois doctrines différentes. Mêmes commandes, trois pages.
Les photos viennent de Pexels et tiennent la place de celles qu'une vraie marque fournirait. Les 44 sections se parcourent une à une dans le catalogue en ligne.
Installer le plugin Atelier web en deux commandes
Il vous faut Claude Code (l'application de bureau ou le terminal) et Python 3.11 ou plus récent. Dans un terminal :
claude plugin marketplace add Littlpinguin/atelier-web
claude plugin install atelier-web@atelier-webRedémarrez Claude Code. Pour la QA du rendu, ajoutez Playwright et Pillow une fois pour toutes :
pip install playwright pillow pyyaml && playwright install chromiumEnsuite, trois étapes :
- Ouvrez Claude Code dans le dossier de votre site.
- Lancez
/atelier-web:demarrer-projet-web: Claude propose la doctrine de votre marque et vous la fait valider. - Lancez
/atelier-web:landing-pagepour une landing,/atelier-web:page-webpour une page ou une section d'un site existant, ou/atelier-web:designpour moderniser un site qui fait daté.
Pour une équipe, le fichier settings-projet.json du dépôt se pose dans le .claude/settings.json du projet. Commitez-le, et chaque personne qui ouvre le dossier retrouve l'atelier.
Ce que contient le plugin
| Famille | Skills | À quoi elles servent |
|---|---|---|
| Démarrer | demarrer-projet-web |
Écrire la doctrine du projet et orienter vers la bonne skill |
| Produire une page | landing-page, page-web, lead-magnet |
Une landing en huit phases, une page sur un site existant, un outil ou un guide contre un email |
| Design | design |
Recherche visuelle, directions nommées, protocole contre le « design IA », refonte, jetons |
| Mouvement | motion |
Animations au défilement en CSS natif d'abord, GSAP pour l'épinglage, anime.js, dotLottie |
| Conversion | cro |
Page, formulaire, pop-up, tarifs |
| Textes | ecriture |
Rédiger, relire en sept passes, humaniser un texte qui sonne généré |
| Contrôle | revue, brand-check |
Rendu mesuré, interface, accessibilité, conformité à la marque |
Les 6 agents : inspiration-researcher pour la recherche visuelle, landing-section-builder pour construire une section chacun, et quatre relecteurs (design, marque, conversion, accessibilité).
La fabrique : 44 sections (hero, preuves, programme, offre, FAQ, comparateur…), 6 modèles de landing (formation, événement, prestation, démo B2B, vente longue, capture) et 10 outils interactifs avec capture d'email, dont un calculateur de ROI et un quiz.
Le plugin embarque aussi une suite d'évals claude plugin eval. Elle vérifie que chaque demande déclenche la bonne skill, et que les demandes voisines n'en déclenchent aucune.
Atelier web ou Claude Design : que choisir ?
Depuis septembre, Claude Design tourne aussi dans Claude Code. Avec frontend-design et UI/UX Pro Max, ça fait quatre outils pour un besoin qui semble le même. Ils se complètent, et je les utilise ensemble.
| Outil | Ce qu'il apporte | Quand le choisir |
|---|---|---|
| Claude Design (Anthropic) | Un canevas de design dans Claude, qui reprend votre design system importé depuis GitHub ou vos fichiers, et exporte en HTML, PDF ou PPTX | Maquetter vite, faire commenter un prototype |
| frontend-design (Anthropic) | Une direction esthétique décidée avant d'écrire le code | Donner du caractère à n'importe quelle interface |
| UI/UX Pro Max | Une base de styles, de palettes, d'associations de polices et de règles UX | Choisir un système visuel quand la marque n'en a pas |
| Atelier web | La doctrine de marque complète (voix et preuves comprises), une méthode de landing de bout en bout, 44 sections, quatre revues et une QA mesurée | Produire une page qui doit convertir et rejoindre un site existant |
Atelier web intègre des parties adaptées de frontend-design et d'UI/UX Pro Max, avec leurs crédits, et son script d'installation pose les trois côte à côte. Côté Claude Design, la version autonome de claude.ai/design ferme le 14 décembre 2026 : le produit continue dans les conversations et dans Claude Code (documentation d'Anthropic).
Si vous hésitez avec Lovable, Bolt ou v0 pour un site entier, je les compare dans mon guide pour créer un site web avec Claude Code.
Les limites de l'atelier
- Les images restent à votre charge. L'atelier réutilise vos visuels, ou appelle l'outil d'images de votre projet en annonçant le coût de chaque option avant toute dépense.
- Il produit des pages HTML autonomes. Sur Next.js, Astro ou WordPress, la page assemblée sert de maquette fidèle, puis se porte en composants à la main, avec les mêmes jetons.
- Ses skills sont écrites en français. Claude produit vos pages dans la langue que vous voulez.
- Votre offre et vos preuves viennent de vous. Sans témoignages, chiffres ou captures réels, la page montre ses trous.
- Il consomme. Une landing complète fait travailler plusieurs agents en parallèle. Dans ma pratique, un abonnement Claude Max est plus confortable qu'un Pro.
D'où vient l'atelier
Les règles de l'atelier viennent de retours réels sur des pages livrées. Pas de pastille au-dessus des titres. Des fonds qui s'enchaînent sans coupure d'une section à l'autre. Des formulaires en étapes qui tiennent chacune dans un écran de portable. Des captures entières dans l'écran, avec l'explication à côté.
Chaque retour, d'un client ou de mon propre œil, s'est écrit quelque part avant de devenir une règle. C'est ce qui rend la méthode transmissible : elle est commune, et la marque reste chez chacun.
L'atelier complète Claude Site Starter, le socle de site statique que j'ai publié en avril. Le starter pose le site, l'atelier y construit les pages qui doivent convertir.
Former votre équipe à créer ses pages
Une journée pour construire une page web avec Claude, la contrôler et la publier vous-même, sans code et sans passer par un tiers.
Voir la formation
