Pourquoi l'IA rebat les cartes de la landing page
Chez ConvertLab, on a accompagné plus de 150 clients en création de sites et de landing pages, longtemps sur Webflow. Notre obsession n'a jamais changé : la conversion. Ce qui change, c'est le chemin pour y arriver.
Avant, le goulot d'étranglement était la production : transformer une bonne idée de page en quelque chose de réel prenait du temps. Avec Claude Design pour la direction artistique et Claude Code pour la construction, ce goulot disparaît presque. Le travail se déplace là où il a toujours dû être : la stratégie de conversion, le message, et la structure.
Autrement dit, l'IA ne remplace pas le métier — elle supprime la friction entre l'intention et l'exécution. Et c'est précisément ce qui sépare ceux qui produisent des pages génériques de ceux qui produisent des pages qui vendent.
Le projet : Breakers, un format de tennis qui se vend tout seul
Pour illustrer, prenons un cas réel. Breakers est une marque de tennis social compétitif lancée à Bangkok. Ce n'est ni un club, ni une app de réservation : c'est un format de tournoi propriétaire que les joueurs veulent revivre, porté par une communauté et une identité visuelle forte (vert profond, lime électrique, fond beige premium).
Le besoin était double : un site SEO qui capte le trafic "tennis Bangkok", et des landing pages de partenariat ultra carrées pour convaincre des clubs d'accueillir un événement. C'est exactement le type de page où la qualité du design et la solidité du build comptent autant l'un que l'autre — et donc le terrain de jeu idéal pour Claude Design + Claude Code.
Claude Design vs Claude Code : qui fait quoi
C'est la confusion la plus fréquente, alors clarifions. Ce sont deux outils complémentaires, pas concurrents.
Claude Design, c'est le canvas. Vous décrivez la page au chat, Claude génère et itère un design visuel que vous ajustez en conversation. C'est là qu'on cale la direction artistique : palette, typo, hiérarchie, ambiance, structure des sections. C'est l'étape "à quoi ça ressemble".
Claude Code, c'est l'atelier de construction. C'est un agent de développement qui transforme l'intention en vrai code propre — HTML/CSS, composants, intégration au projet existant, déploiement. C'est l'étape "comment ça existe en ligne, vite et bien".
La bonne mentale : Claude Design décide quoi construire et quelle énergie la page doit dégager. Claude Code décide comment le construire proprement. Sauter la première étape, c'est laisser le code improviser le design — et c'est là que naissent les pages tristes.
Notre méthode en 4 étapes
Voici le process exact qu'on applique. Il est volontairement simple, parce que la discipline est dans les contraintes, pas dans la complexité.
Étape 1 — Cadrer avant de toucher au visuel
Avant Claude Design, on écrit noir sur blanc : l'objectif de conversion unique de la page (un seul !), l'audience, la promesse, et les design tokens (couleurs en hexa, fonts, espacements). Pour Breakers, l'objectif d'une page partenaire était limpide : faire dire "oui" à un club. Tout le reste découle de là.
Étape 2 — Designer dans Claude Design
On donne les tokens et l'intention, et on itère. On ne demande jamais "fais une belle page" — on demande "une hero qui met le nom du club au centre, une preuve sociale juste après, et un bloc data qui montre le ROI". Le design suit la logique de conversion, pas l'inverse.
Étape 3 — Construire dans Claude Code
Une fois la direction validée, Claude Code produit le code. La clé : on lui donne les mêmes contraintes qu'à un développeur senior — la grille, les tokens, les critères de performance, et l'instruction de vérifier avant de rendre. Sur Breakers, le site tourne en monorepo (Astro pour le SEO, Next.js pour l'app) ; Claude Code s'y intègre sans tout casser parce qu'on lui décrit l'existant.
Étape 4 — Vérifier comme une agence, pas comme un curieux
SEO (balises, données structurées, canonical), performance (Lighthouse), responsive mobile-first, et surtout : est-ce que le chemin vers l'action est évident en 3 secondes ? C'est l'étape que 90 % des gens zappent, et c'est celle qui fait la conversion.
Le piège n°1 : le "joli mais générique"
Le réflexe du débutant, c'est de prompter "fais-moi une belle landing page" et d'obtenir un résultat… correct. Propre, moderne, et totalement interchangeable avec dix mille autres pages. Le problème n'est pas l'outil — c'est l'absence de contrainte.
Claude Code et Claude Design sont excellents quand vous leur donnez un système : des tokens précis, une grille, une intention de conversion claire, et des critères de vérification. Vous ne dites pas "fais beau", vous dites "voici les couleurs Breakers, voici la hiérarchie, voici ce que le visiteur doit faire — vérifie que c'est le cas avant de me livrer".
C'est exactement le rôle qu'on jouait à la main sur Webflow : être le garde-fou. La différence, c'est qu'on le formalise désormais dans le brief au lieu de le corriger au pixel après coup. Le métier ne disparaît pas. Il se déplace en amont.
Le résultat concret sur Breakers
Sur le projet Breakers, cette méthode a permis de produire un site SEO complet (directory de 45+ clubs, blog optimisé, données structurées JSON-LD partout) et un système de landing pages de partenariat générées à partir de la base de données clubs — chaque page se construit quasi toute seule à partir des données du club ciblé.
Le gain n'est pas seulement la vitesse. C'est la cohérence : chaque page respecte le même design system, les mêmes standards SEO, la même logique de conversion. Là où une production manuelle aurait dérivé d'une page à l'autre, le couple Claude Design + Claude Code maintient le niveau d'exigence à l'échelle.
La leçon pour vous : l'IA ne fait pas le travail de conversion à votre place. Elle vous permet de l'appliquer dix fois plus vite — à condition de savoir ce qu'est une page qui convertit.
FAQ
Faut-il savoir coder pour utiliser Claude Code ?
Pas pour démarrer, mais comprendre les bases (structure HTML, ce qu'est un design system, ce qu'est le responsive) change tout sur la qualité du résultat. Vous obtenez ce que vous savez demander.
Claude Design remplace-t-il un designer ?
Il remplace une grande partie de la production visuelle, pas le jugement. Quelqu'un doit toujours décider de l'intention, de la hiérarchie et du message. C'est là qu'une agence conversion garde toute sa valeur.
Peut-on intégrer ces outils à un projet existant ?
Oui. Claude Code s'intègre à une base de code existante si vous lui décrivez l'architecture. Plus vous documentez l'existant, plus l'intégration est propre.
Est-ce adapté à une vraie marque, ou juste à des prototypes ?
Le cas Breakers montre que c'est du production-ready : site SEO en ligne, données structurées, déploiement réel. Le sérieux du rendu dépend du sérieux du brief.
