AI-First
Il y a des sites web qui valent 100 000 euros. Pas parce que le code est complexe. Parce que quelqu'un a pris le temps de comprendre les animations, les effets de scroll, le parallax, et de les assembler avec soin. Claude Code peut vous aider à démonter ces sites pièce par pièce et à reconstruire votre propre version. Voici comment.
- 🔑 Cloner un site primé en cinq étapes avec Claude Code pour apprendre le design front-end.
- 🎯 Tear down complet : HTML via Ctrl+U, CSS et JavaScript récupérés par web fetch automatique.
- 💡 Animations frame-by-frame : générer une vidéo Veo sur fond vert, puis extraire chaque frame.
- ⚠️ Le résultat reste à 90% du original, ajustez par comparaison itérative de screenshots.
- 🚀 Awards, Nano Banana et GSAP deviennent vos outils pour signer une identité visuelle distinctive.
Ce n'est pas du plagiat. C'est de l'apprentissage par imitation, la méthode la plus efficace qui existe pour progresser en design front-end.
Pourquoi copier un site à 100 000 euros
La plupart des sites générés par IA se ressemblent tous. Même structure, mêmes templates, même ennui. Si vous voulez créer quelque chose qui sort du lot, vous devez d'abord vous exposer à ce qui existe de mieux.
C'est là qu'Awards entre en jeu (awwwards.com). C'est une plateforme où des designers du monde entier soumettent leurs créations les plus ambitieuses. Vous y verrez des animations de scroll que vous ne saviez même pas qu'elles existaient, des effets de parallax bluffants, des transitions qui changent votre perception de ce qu'un site peut faire.
Le but n'est pas de voler. C'est de comprendre comment les pros assemblent leurs créations, puis d'y ajouter votre propre identité.
Voici les 5 étapes pour transformer n'importe quelle inspiration en votre propre site.
Etape 1 : Trouver l'inspiration
Allez sur Awards et parcourez les nominations récentes. Cherchez un site dont vous aimez l'esthétique et que vous pourriez imaginer adapter à votre univers. Pas besoin que ce soit parfait, juste quelque chose qui vous donne envie de comprendre comment c'est fait.
Dans la vidéo source, le choix s'est porté sur Moon, un site pour un bar à cocktails à Rome avec une animation de scroll magistrale : la lune passe d'une pleine lumière à une ombre complète en fonction de la position du curseur. Exactement le genre de détail qu'on ne sait pas reproduire sans le décortiquer.
Etape 2 : Le site tear down
C'est l'étape clé. Pour que Claude Code puisse reproduire les effets d'un site, il a besoin de trois choses : le HTML (la structure), le CSS (le style), et le JavaScript (les interactions).
Le HTML est accessible directement : Ctrl+U sur n'importe quelle page web vous donne le code source complet. Vous le copiez et le collez dans Claude Code. Ensuite, vous prenez des screenshots des effets que vous voulez reproduire.
Pour le CSS et le JavaScript, Claude Code peut les récupérer lui-même via web fetch, à partir des fichiers référencés en bas du HTML. Il est recommandé d'utiliser un skill dédié au site tear down pour maximiser la qualité de l'extraction.
Ce dont Claude Code a besoin | Comment l'obtenir |
|---|---|
HTML de la page | Ctrl+U → copier/coller |
CSS et JavaScript | Claude Code le récupère via web fetch |
Screenshots des effets | Captures d'écran des animations clés |
URL du site | A fournir directement dans le prompt |
Etape 3 : Créer les assets
Claude Code ne crée pas d'images. Vous devez lui fournir les visuels. Et pour les animations complexes comme une lune qui change d'ombre progressivement, la technique est surprenante.
Vous créez deux images : la lune en pleine lumière, la lune en ombre totale. Vous générez une vidéo de transition entre les deux (avec Google Veo ou équivalent). Vous demandez ensuite à Claude Code d'extraire chaque frame de la vidéo. Chaque frame correspond à un état de la lune selon la position du curseur.
La règle d'or pour la vidéo : fond vert. Pas de mouvement de caméra, pas de zoom, pas de dérive. La stabilité est critique car chaque frame devient une image indépendante chargée par le navigateur.
Pour les images de départ et d'arrivée, Nano Banana + un simple prompt suffit : retirez le texte, mettez le fond en vert. C'est tout.
Etape 4 : La phase de build
Vous redonnez tout à Claude Code : le résultat du site tear down, vos assets, vos screenshots. Et vous lui dites de construire votre version.
Ce que vous obtenez ne sera pas un clone parfait, c'est attendu. Le site original a été créé par un studio entier. Ce que vous obtenez, c'est une solution à 90%, avec les mêmes mécaniques : parallax, scroll animation, effets d'ombre. La structure est là.
Pour les ajustements : comparez votre version et l'original en screenshot, donnez les deux à Claude Code et demandez-lui d'identifier les différences et de les corriger. C'est un processus itératif.
Etape 5 : Faire le vôtre
C'est ici que le travail devient intéressant. Vous n'êtes pas un bar à cocktails à Rome. Qu'est-ce que vous voulez mettre à la place de la lune ? Quelle est votre identité visuelle ? Comment adapter cette mécanique de scroll à votre produit ?
C'est la vraie valeur de l'exercice. Après avoir cloné un site avec des animations de scroll, vous comprenez comment elles fonctionnent. Vous n'êtes plus intimidé par ce type d'effet. Vous savez que vous pouvez en créer un similaire pour votre propre usage.
Le langage naturel est le nouveau langage de programmation. Mais pour bien l'utiliser, il faut d'abord comprendre ce que vous demandez. Copier les pros est le raccourci le plus honnête vers cette compréhension.
Chaque site cloné est une leçon. GSAP, ScrollTrigger, les animations frame-by-frame : ce sont des outils que vous ne connaissez peut-être pas aujourd'hui. Après cet exercice, vous en avez au moins entendu parler dans un contexte concret. C'est comme ça qu'on progresse.