Replicate Webpage
Reconstruit une page web de référence sous forme de code source maintenable, pas un miroir d'écran ou d'iframe.
Testé · Fonctionne
Ce que fait
Guide Claude pour inspecter une URL de référence à plusieurs points de vue, inventorier sa structure/visuels/interactions via une liste de contrôle de fidélité groupée, puis la reconstruire en code sémantique, accessible et réactif avec une couche de contenu centralisée pour les substitutions de texte/image de marque. Se déclenche sur les demandes 'replicate/clone this webpage' ou '复刻这个网页', avec des limites explicites contre la reproduction de la capture d'informations d'identification, des flux de paiement, des secrets ou des identifiants de suivi.
Rapport de test
A exécuté une reconstruction A/B réelle d'une page de carte de prix : le clone de base a corrompu le séparateur '·' en '·' (méta charset manquant), a omis le style du plan mis en avant et la substitution de marque, et avait une FAQ morte ; la reconstruction guidée par la compétence a corrigé tout cela, plus ajouté des états focus-visible et un objet de contenu centralisé, sans aucune erreur de console.
Testé le: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/22duxiaoyu/replicate-webpage-skill.git mkdir -p ~/.claude/skills cp -r replicate-webpage-skill ~/.claude/skills/replicate-webpage
Commandes et exemples de prompts
/replicate-webpageReconstruit une page web de référence sous forme de code source maintenable, pas un miroir d'écran ou d'iframe.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Rebuild this competitor's pricing page as clean, accessible code.Clone this landing page but swap in our brand name and logo everywhere.Recreate this reference site's layout without copying its payment forms.