Recréer un site existant pixel-perfect prenait des heures. Avec Claude Code et l'extension Chrome dédiée, tu le fais en 5 à 10 minutes. Claude voit le site, analyse sa structure visuelle et son code, puis le recrée dans ton stack tech de choix.
Ce dont tu as besoin
- Claude Code — l'outil CLI d'Anthropic
- Extension Chrome Claude — pour que Claude voit ton navigateur
- Le skill ai-website-cloner-template — les instructions spécialisées pour le cloning
Setup en 3 étapes
# Étape 1 : Installer le skill de cloning
# Dans Claude Code, colle le lien du skill et demande-lui de l'installer
# Étape 2 : Installer l'extension Chrome Claude
# Télécharger depuis le Chrome Web Store : "Claude for Chrome"
# Se connecter avec ton compte Anthropic
# Étape 3 : Lancer Claude avec accès au navigateur
claude --chrome
Cloner un site
# Une fois Claude lancé avec --chrome :
/clone-website https://example.com
# Claude va :
# 1. Ouvrir le site dans Chrome
# 2. Analyser le design, la structure, les composants
# 3. Générer le code HTML/CSS/JS équivalent
# 4. Adapter selon ton stack si tu précises (React, Vue, etc.)
💡 Cas d'usage principaux
Ce n'est pas fait pour copier des sites illégalement. C'est utile pour recréer ton propre design dans un nouveau stack, s'inspirer d'une mise en page pour un projet client, ou créer des maquettes rapides à partir de références visuelles.
Personnalisation après cloning
Une fois le clone généré, Claude peut modifier n'importe quel aspect :
"Remplace la palette de couleurs par du noir/or cyberpunk"
"Adapte ce composant hero pour qu'il soit responsive mobile"
"Ajoute une section pricing avec 3 colonnes sous la hero section"
⚡ Conseil pro
Clone d'abord en HTML/CSS vanilla, puis demande à Claude de migrer vers ton framework. C'est plus fiable que de demander directement du React depuis un site complexe.