Refaire la base d'un site : garde sa structure, change tout le contenu

Ce soir : une page puis ton contenu

Prends une seule page, la page d'accueil du site qui te plaît. Un site entier te sort des centaines de fichiers que tu ne rouvriras jamais. Une page se relit en entier en une soirée.

Puis prépare ce qui remplacera son contenu, dans un fichier texte ou dans tes notes : ton titre, tes phrases, tes prix, les noms de tes produits. Range aussi dans un dossier les photos que tu veux mettre.

Pour comprendre, rien à faire. Le skill ouvre la page dans un vrai navigateur qu'il pilote tout seul. Il va chercher son vrai code au lieu de décrire ce qu'il croit voir. Il en tire une fiche qu'il appelle l'ADN de design : couleurs, polices, espacements, ambiance, effets quand on fait défiler la page. Puis il reconstruit la page avec ton contenu à la place du sien. Il garde la charpente, tout ce qu'on lit et tout ce qu'on voit vient de toi.

Installe l'outil, colle la demande

Il te faut Claude Code, compris dans l'abonnement Claude Pro (20 dollars par mois chez Anthropic, le prix en euros s'affiche au paiement : la version gratuite ne l'inclut pas). S'il n'est pas encore installé, l'encadré du haut donne les leçons gratuites qui le mettent en place.

Ouvre Claude Code dans un dossier neuf, celui de ton futur site. Colle cette demande : il relit le skill, l'installe puis vérifie les outils dont il a besoin. Il te demande ton accord avant d'installer ce qui manque.

Tu veux qu'il te demande avant d'écrire ? Si tu lis ⏵⏵ auto mode on tout en bas de la fenêtre, appuie une fois sur Shift + Tab (dans l'application de bureau : Manuel, à côté du bouton d'envoi).

Installe le skill web-clone depuis
https://github.com/Jane-xiaoer/claude-skill-web-clone
dans mon dossier de skills (~/.claude/skills/web-clone).
Avant, montre-moi ce que ce skill lit, ce qu'il écrit et s'il
envoie quelque chose sur internet.
Vérifie ensuite que Git et Node sont installés, puis que
Playwright est installé DANS le dossier du skill
(~/.claude/skills/web-clone), pas dans mon projet :
c'est là que ses scripts le cherchent.
S'il en manque un, dis-moi la commande officielle et attends
mon accord avant de l'installer.

Le skill est publié par une inconnue : c'est pour ça que la demande le fait relire avant. Lis ce qu'il va faire, puis réponds oui. Quand il a fini, tape /exit puis relance claude : un skill ajouté ne compte qu'au lancement suivant.

Ensuite, colle la demande qui refait la page. Remplace ce qui est entre crochets :

Utilise le skill web-clone sur cette page : [l'adresse de la page]
Une seule page, pas le site entier.
Va d'abord chercher le code source réel, ne décris rien
que tu n'aies pas ouvert.
Garde l'ADN de design, change le contenu. Mon contenu est
ici : [colle tes textes et tes prix, ou le chemin de ton fichier].
Mes photos sont dans : [le dossier de tes photos].

Garde le mode manuel : il va télécharger un site que tu ne connais pas. La démonstration qui circule affiche --dangerously-skip-permissions en clair. Ne la tape jamais : cette option dit à Claude Code de tout faire sans rien te demander, Anthropic la réserve à une machine mise à part. Ne recopie pas non plus les commandes du fichier de méthode du skill : il est en chinois, avec les chemins de son auteur (/Users/jane/).

Facultatif, si tu préfères poser le skill à la main. Une ligne dans le terminal, si Git est installé. Sous Windows, écris bien $HOME (ton dossier personnel) et pas ~ : sinon Git crée un dossier nommé « ~ ». Il faut ensuite Node, sur nodejs.org, puis npm install -D playwright lancé dans le dossier du skill, ~/.claude/skills/web-clone. Pas dans ton projet, même si le message d'erreur le dit. Sans lui, le premier script s'arrête sur Playwright not found.

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git $HOME\.claude\skills\web-clone

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone

Ce que tu récupères

Du vrai code de site, que tu peux changer, plus la fiche ADN de design. Pour voir le résultat, écris-lui « ouvre la page refaite dans mon navigateur ». Ce qui ne te plaît pas, tu le lui dis en français : « le titre plus gros », « la photo à gauche ».

Le projet n'est plus mis à jour depuis juin 2026. Les scripts qui pilotent un navigateur vieillissent : un échec n'est pas forcément ta faute. Pour un site à toi, en ligne, pars d'une page dont la licence le permet (un site sans licence déclarée est tous droits réservés), ou d'un modèle de site gratuit.