Si vous vous fiez aux outils, vous pouvez rapidement obtenir quelque chose qui semble « correct ». Cependant, le résultat finit souvent par avoir un look générique que vous avez déjà vu ailleurs. C'est l'essence du « look IA », et c'est là que la plus grande différence se fait désormais.
En m'appuyant sur mon expérience de création de trois sites distincts avec des personnalités différentes à partir d'une même base, en utilisant une chaîne de production construite sur Claude Code (le projet makeLP), je vais résumer brièvement une méthode reproductible.
Une Usine, Pas un Tour de Magie Unique
Même si vous produisez quelque chose de bon une fois, cela ne devient pas un actif si ce n'est pas reproductible. C'est pourquoi nous passons par quatre étapes.
Production → Qualité → Vérification → Amélioration.
Il existe quatre types de composants de support :
・Compétences : Modèles méthodologiques (motion-lp-builder pour la création, frontend-design pour les principes anti-IA, bulk-categorize pour la classification de masse)
・Sous-agents : Rôles spécialisés (lp-visual-verifier pour le dessin et la critique, design-reference-analyst pour transformer les références en spécifications, bulk-classifier pour la catégorisation)
・Bibliothèque de référence : Une étagère de 4 074 entrées SANKOU classées par « type de site × secteur d'activité »
・Règles évolutives : CLAUDE.md (flux de travail/discipline standard) + Mémoire (rendre les critiques permanentes)
Préparation et Prérequis
La base est fixée à Vite + React + GSAP (ScrollTrigger) + Lenis. La clé est de « lier directement la progression du défilement à la production ». La quantité de défilement devient l'entrée pour l'expression (scrubbing d'images vidéo d'arrière-plan, pinning, parallaxe, révélations à l'entrée).
Il existe deux types d'actifs, choisis en fonction du sujet :
・Génération IA (Higgsfield) : Lorsque des images réalistes (comme des complexes hôteliers) sont nécessaires
・Dessin par code (SVG/Canvas/CSS) : Cela semble plus « juste » pour le B2B et la tech. Pas de crédits requis
En cas de doute, décidez en fonction de « devrait-ce être une photo ou un diagramme ? »
ÉTAPE 1 : Production
L'ordre est crucial. Ne commencez pas à écrire immédiatement ; solidifiez d'abord un brief de marque (à qui vous promettez quoi, couleur, typographie, intensité du mouvement) sur une seule page. Même avec la même base, c'est le brief, pas le code, qui différencie le résultat.
Si vous choisissez la génération IA, suivez une discipline de crédits :
- Vérifier le solde
- Obtenir un devis préliminaire avec get_cost
- Créer d'abord une image hero
- Générer les autres en utilisant celle-ci comme référence pour unifier la texture
- Attendre la fin et télécharger.
Pour l'implémentation, liez la production directement au défilement (frame scrub/pin/parallaxe/reveal). Et rendez-la toujours robuste : fallback statique avec prefers-reduced-motion, assurez-vous que npm run dev fonctionne même avec des actifs manquants, et pensez aux économies d'énergie pour le tactile et le canvas.
ÉTAPE 2 : Qualité - S'Éloigner du Design de Masse
Déconstruisez et éliminez le « look IA » en six parties :
- Utilisation excessive de dégradés (surtout les dégradés de texte et violet) → Réduisez à une seule couleur + un accent
- Se contenter d'aligner des pièces standard dans un ordre standard → Créez avec un concept unique pour la structure elle-même (par exemple, la page entière comme un canevas de workflow)
- Chiffres « gonflés » et arrondis → Soyez précis (par exemple, « 600 factures/mois → 0 » avant/après)
- Icônes d'émojis → Ne les utilisez pas. Dessinez des SVG si nécessaire
- Barres de couleur uniquement sur le bord gauche des blocs → Ne les utilisez pas. Utilisez la couleur dans les surfaces, les marges et la typographie
- Tout est symétrique, uniforme, arrondi et ombré avec des ombres douces → Introduisez de l'asymétrie et des variations dans la force des marges
Le principe est : Schéma de couleurs = une seule couleur + un accent, typographie poussée avec une police de caractères distinctive, force dans les marges, et mouvement pour la « concentration ».
ÉTAPE 3 : Vérification - Construction Réussie ≠ Bon
Même si le code passe, les pins, scrubs et révélations peuvent être cassés à l'écran. Par conséquent, le lp-visual-verifier démarre un serveur de développement, opère un Chrome/Edge existant via puppeteer-core, rend et capture chaque section, puis la « critique à l'œil nu ».
Trois points clés :
・Le vérificateur ne corrige pas le code (pour isoler la cause)
・La capture avec prefers-reduced-motion permet une visualisation statique des zones épinglées et des sections inférieures attendant les révélations
・Capturez toujours également aux largeurs mobiles
Un seul cycle de critique → correction élève considérablement la qualité. Ne vous contentez pas d'une construction réussie.
ÉTAPE 4 : Amélioration + Bibliothèque de Référence
Le design-reference-analyst lit les sites de référence et les traduit en « motifs communs » et « spécifications d'amélioration (où et comment) » plutôt que de simples impressions. La bibliothèque sankou-reference contient 4 074 éléments classés sur deux axes, vous permettant d'extraire instantanément « uniquement les exemples de tourisme × LP spéciale » (le contenu est clair à partir des notes dans chaque ligne).
La classification de masse elle-même est également modélisée (bulk-categorize : diviser → parallélisation des sous-agents → agrégation → correction).
Des Règles Qui Grandissent
C'est la plus grande découverte. Ne laissez pas les critiques du client se terminer par une correction unique ; élevez-les au rang de règles permanentes.
Exemple :
« Les icônes d'émojis font penser à de l'IA » « Les barres de couleur à gauche font penser à de l'IA » → Transformez-les en règles interdites dans la mémoire et CLAUDE.md → Évitez-les automatiquement dans chaque site par la suite.
En d'autres termes, plus vous l'utilisez, plus le « look IA » disparaît. Avoir des compétences et des sous-agents permet également une expansion horizontale facile.
Créer Trois Sites Distincts
・AZURE BAY (LP piscine d'été / B2C) : Turquoise + Or. Généré par Higgsfield. Vidéo de piscine en frame scrubbing au défilement.
・FLOWGEAR (Support d'implémentation n8n / B2B) : Couleur corail unique + plat, pas de génération d'images. La page entière est un canevas de workflow n8n. Avant/après spécifique au lieu de chiffres gonflés.
・STATIK (Laboratoire expérimental pour un studio fictif) : Noir presque pur + mono + une couleur acide. Grille de texte cinétique Canvas + curseur personnalisé. Une expérience immersive plutôt qu'un simple LP.
Les points communs sont « une seule couleur + un accent », « parler avec des spécificités » et « percée via un concept unique ». Choisir le moyen en fonction du sujet est le premier pas loin de la moyenne.
Configuration Minimale pour Construire Vous-même
- Modélisez la base liée au défilement (ne réécrivez pas à partir de zéro à chaque fois)
- Mettez les principes anti-production de masse dans une seule feuille de règles (pas de dégradés/émojis/barres à gauche...)
- Capturez et regardez toujours l'écran réel après la création
- Élevez les critiques en règles à chaque fois
Pièges courants et contre-mesures : Gaspillage de crédits (hero d'abord + devis préliminaire), omissions de vérification (capturer les écrans réels), accessibilité du mouvement (reduced-motion), et casse mobile (toujours capturer à différentes largeurs).
Résumé
L'IA est une « main rapide », pas un « œil ».
Dès que vous intégrez l'œil (vérification) et les règles (apprentissage) dans le système, les sites créés par IA se libèrent du look IA.
