Reproduire un site existant, c'est un excellent exercice pour comprendre comment il est construit : sa structure, ses espacements, ses couleurs, ses composants. C'est aussi un travail long et fastidieux quand on le fait à la main, en inspectant le CSS élément par élément.
Dans la vidéo, on confie ce travail à Claude Code. La cible : higgsfield.ai, un vrai site de production avec une barre de navigation à 12 liens, un carrousel en en-tête, des galeries en mosaïque et une quinzaine de sections. Un seul prompt, et aucune intervention pendant le travail.
Le cœur du dispositif est un dépôt open source, ai-website-cloner-template, publié par JCodesMore. Il transforme le terminal en machine de rétro-ingénierie web.
Sa stack :
- Next.js 16 ;
- Tailwind CSS v4 ;
- shadcn/ui ;
- Claude in Chrome, pour piloter un vrai navigateur ;
- un skill
/clone-website, d'environ 500 lignes, qui décrit toute la méthode à Claude.
C'est un bel exemple de ce que permettent les skills : 500 lignes d'instructions qui transforment un assistant généraliste en outil spécialisé.
Le skill découpe le travail en cinq étapes.
1. Reconnaissance. Claude ouvre le site dans Chrome et l'inspecte. Il utilise getComputedStyle(), une fonction JavaScript du navigateur qui renvoie les styles réellement appliqués à un élément : taille de police exacte, marges, couleurs, après résolution de toutes les feuilles de style. C'est bien plus fiable que de lire le CSS source. Il en tire la topologie complète de la page et ses design tokens.
2. Fondations. Mise en place de la base du projet : configuration, tokens de design, typographie, structure générale.
3. Specs. Claude écrit un fichier de spécification exhaustif par composant : ce qu'il contient, comment il s'affiche, quels styles appliquer.
4. Build. Les composants sont construits à partir des specs. Le template prévoit de répartir ce travail entre plusieurs agents en parallèle, chacun dans son propre worktree Git, avant une fusion finale.
5. Assemblage. Les composants sont réunis en une page complète, puis vérifiés.
Rien de compliqué : on clone le dépôt dans un nouveau dossier, on installe les dépendances avec bun install, puis on lance /clone-website avec l'URL cible.
Au premier lancement, le skill ne trouve pas Chrome. La solution : relancer Claude Code avec l'option --chrome et activer l'extension Claude in Chrome dans le navigateur. Ensuite, tout démarre.
On voit Chrome s'ouvrir sur le site, et Claude exécuter getComputedStyle() via les outils JavaScript de l'extension. Il extrait la structure complète et les tokens de design, puis enchaîne sur les fondations et les specs.
Dans cette démo, le mode équipe d'agents ne s'est pas lancé : Claude a construit directement dans la session. Le résultat reste intéressant, et il montre qu'un pipeline bien décrit fonctionne même sans parallélisation.
Étape souvent oubliée : Claude vérifie lui-même chaque section en la comparant à l'original via Chrome. Une boucle de contrôle qualité intégrée au pipeline.
Le récapitulatif de Claude en fin de travail :
- 14 sections reproduites ;
- 13 composants TSX ;
- 84 ressources téléchargées (images, icônes…) ;
- des « gaps connus » listés honnêtement : le logo SVG, des sections décoratives non câblées.
Le clone tourne en local, et la comparaison avec l'original, section par section, montre un résultat proche de l'original sur la plupart des sections. Le pied de page est le seul vrai écart visuel marquant.
Le verdict de la vidéo : environ 70 % du résultat attendu sur un site aussi complexe. Pas une copie parfaite, mais une base solide obtenue en quelques minutes, sans intervention.
Point important : Claude in Chrome refuse certains sites. Anthropic bloque côté extension les sites sensibles, comme les sites financiers et les banques (la vidéo cite l'exemple de Stripe). Le message est explicite : « This site is not allowed ».
Pour ces cas, la vidéo évoque une alternative : Playwright, un outil d'automatisation de navigateur.
Reproduire un site pour apprendre est une excellente pratique. En revanche, publier la copie d'un site existant pose de vraies questions : droit d'auteur sur les contenus, les images et le design, droit des marques, conditions d'utilisation. Quelques repères :
- utilise le clone comme exercice ou comme point de départ, pas comme produit final ;
- remplace les contenus, images et logos par les tiens ;
- ne reproduis pas l'identité visuelle d'un tiers pour un site public ;
- et pour ton propre site, c'est un excellent moyen de migrer vers une nouvelle stack.
- Les skills sont des multiplicateurs. Un fichier d'instructions bien écrit transforme Claude Code en outil spécialisé.
- Mesurer plutôt que deviner.
getComputedStyle() donne les valeurs exactes : c'est la différence entre un clone approximatif et un clone fidèle.
- Écrire des specs avant de coder, même pour une machine, rend le build plus fiable.
- La vérification automatique attrape une bonne partie des écarts avant toi.
- Outil : le template open source ai-website-cloner-template de JCodesMore, avec son skill
/clone-website.
- Pipeline : reconnaissance, fondations, specs, build, assemblage.
- Clé : Claude in Chrome et
getComputedStyle() pour des styles exacts.
- Résultat : 14 sections, 13 composants, 84 ressources, environ 70 % de fidélité sur un site complexe.
- Limites : certains sites sont bloqués par l'extension, et une copie publique d'un site tiers pose des questions juridiques.
