Maquette Claude vers WordPress : passer du prototype au site que le client modifie lui-même

Une maquette faite dans Claude ne passe pas dans WordPress par un simple import de fichier. La méthode qui fonctionne : demander à Claude de réécrire chaque page en blocs WordPress natifs, puis coller ce code dans l’éditeur de code de la page. Votre client clique ensuite sur un texte pour le changer et remplace une photo en deux clics.

Vos heures de travail ne sont pas perdues. L’arborescence, les textes, l’ordre des sections, les couleurs et les choix d’images sont la partie lente d’une refonte, et tout cela passe dans WordPress tel quel.

Pourquoi une maquette Claude ne s’importe pas telle quelle

Quand Claude crée une maquette, il produit un artefact : une page en HTML et CSS, parfois un composant React. C’est un prototype qu’un navigateur sait afficher. Si le mot est nouveau pour vous, voyez ce qu’est un artefact Claude et comment le partager.

WordPress enregistre une page autrement. Chaque titre, paragraphe, image ou bouton est un bloc, délimité par un commentaire du type <!-- wp:heading -->. L’éditeur ne rend modifiables que ces blocs.

Collez le HTML brut de la maquette dans une page et vous obtenez un seul bloc « Classique » qui contient toute la page, ou un bloc « HTML personnalisé » où chaque virgule se change dans le code. La maquette devient donc le plan validé, que l’on traduit en blocs.

Avant de commencer : thème, accès et sauvegarde

Vérifiez trois choses sur le site du client.

1. Le thème. Si le menu Apparence contient « Éditeur », c’est un thème à blocs, comme Twenty Twenty-Five, le thème par défaut de WordPress. S’il contient seulement « Personnaliser », c’est un thème classique. Les blocs fonctionnent dans les deux cas ; seuls les réglages globaux (couleurs, polices) changent d’endroit.
2. Votre compte. Il vous faut au minimum le droit de créer des pages. Pour le CSS et les réglages du thème, il faut un compte administrateur.
3. La sauvegarde. Faites-en une complète (fichiers et base de données) avant la première modification, avec l’outil de votre hébergeur ou votre extension de sauvegarde habituelle.

Fichiers d’exemple de ce guide, tous fictifs : maquette-accueil.html (zip) (la maquette d’un fleuriste inventé, Atelier Capucine), prompt-conversion-blocs.txt (zip) (le prompt complet) et page-accueil-blocs.html (zip) (le résultat obtenu).

Route 1 : convertir chaque page en blocs natifs, sans accès au serveur

C’est la route la plus simple. Il vous faut la maquette, un compte Claude et un accès à l’administration WordPress.

Le prompt de conversion

Ouvrez la conversation où se trouve la maquette, copiez le code de la page depuis l’artefact, puis envoyez ce prompt en collant le code à la fin. Envoyez une page par message : la réponse reste courte et vous contrôlez chaque page.

Tu es intégrateur WordPress. Je te donne la maquette d'une page (HTML et CSS
ci-dessous). Convertis-la en balisage de blocs WordPress natif, prêt à coller
dans l'éditeur de code d'une page WordPress.

Règles :
1. Utilise uniquement des blocs du cœur de WordPress : core/cover,
   core/group, core/columns, core/column, core/heading, core/paragraph,
   core/list, core/list-item, core/image, core/buttons, core/button,
   core/separator, core/spacer.
2. Chaque bloc a son commentaire d'ouverture et de fermeture, par exemple
   <!-- wp:heading --> ... <!-- /wp:heading -->, et contient exactement le
   HTML que l'éditeur WordPress enregistre pour ce bloc (classes
   wp-block-..., wp-element-button sur les liens des boutons).
3. Couleurs et marges : seulement par les attributs JSON du bloc (style,
   backgroundColor, textColor), avec le style en ligne qui leur correspond.
   Aucune classe CSS inventée.
4. Interdits : le bloc HTML personnalisé (core/html), les balises <script>
   et <style>, les shortcodes, les classes qui demanderaient une feuille de
   style externe.
5. Images : garde le texte alternatif et l'URL de la maquette ; je
   remplacerai l'URL par celle de la Médiathèque.
6. Textes : recopie mot pour mot ceux de la maquette.
7. Réponds avec un seul bloc de code, sans explication. Ensuite, en dehors
   du bloc de code, liste ce que les blocs natifs ne reproduisent pas
   (effets, polices, grilles particulières).

Maquette :
[collez ici le HTML et le CSS de la page]

Les interdits comptent autant que les règles. Un bloc HTML personnalisé s’affiche bien, mais votre client ne pourra rien y changer sans toucher au code. Une classe inventée reste sans effet tant qu’aucune feuille de style ne la définit.

Si votre maquette est en React, demandez d’abord à Claude la version HTML et CSS statique de chaque page, puis appliquez ce prompt.

Si vous convertissez des maquettes chaque semaine, rangez ce prompt dans un skill pour ne plus le recoller : voyez comment créer un skill Claude.

Coller le résultat dans WordPress

1. Dans l’administration, ouvrez Pages, puis « Ajouter une page », et saisissez le titre.
2. Passez en éditeur de code : menu Options (les trois points en haut à droite), puis « Éditeur de code ». Raccourci : Ctrl + Maj + Alt + M sous Windows, Maj + Option + Cmd + M sur Mac.
3. Collez le code fourni par Claude sous le titre.
4. Cliquez sur « Sortir de l’éditeur de code ». La page réapparaît en blocs.
5. Ouvrez la Vue en liste (bouton « Vue d’ensemble du document », en haut à gauche) : vous devez voir des blocs Bannière, Groupe, Colonnes, Titre, Paragraphe et Boutons, et aucun bloc « Classique ».
6. Cherchez le message « Le bloc contient du contenu invalide ou inattendu. » Il ne doit apparaître nulle part.
7. Cliquez sur « Enregistrer le brouillon », puis prévisualisez en mode Tablette et Mobile.

Ce qui a été vérifié pour ce guide, le 5 octobre 2026 : la maquette d’exemple a été convertie par un modèle Claude avec ce prompt (hors de l’application claude.ai), puis enregistrée en brouillon sur un WordPress 7.1.2 en français et ouverte dans l’éditeur. Résultat : 30 blocs, tous valides, aucun avertissement, tous les textes présents. La page de test a été supprimée ensuite.

Si un bloc est marqué invalide

Le même test a reproduit une cause d’erreur typique : un style écrit dans le HTML qui ne correspond pas aux attributs du bloc. Un groupe avec une couleur de fond dans le HTML, mais pas dans son commentaire <!-- wp:group -->, est refusé par l’éditeur.

Deux solutions. Cliquez sur « Tentative de récupération » sur le bloc, puis vérifiez qu’il ressemble toujours à la maquette. Ou renvoyez le bloc à Claude avec ce message : « Ce bloc est refusé par l’éditeur WordPress. Réécris-le pour que les attributs du commentaire et le style en ligne correspondent exactement. »

Images et CSS

Les images de la maquette pointent vers des adresses provisoires. Pour chacune, sélectionnez le bloc Image, cliquez sur « Remplacer », puis « Ouvrir la médiathèque » ou téléversez la photo. Remplissez le texte alternatif au passage.

Le peu de CSS que les blocs ne couvrent pas (une police, un arrondi de bouton) ne va jamais dans la page :

• thème à blocs : Apparence > Éditeur > Styles, puis le menu à trois points > « CSS additionnel ». Réglez d’abord ce qui existe dans Styles (couleurs, typographie, boutons) avant d’écrire du CSS ;
• thème classique : Apparence > Personnaliser > « CSS additionnel ».

Ces chemins ont été vérifiés dans la documentation officielle de WordPress et dans la traduction française de WordPress 7.1.2.

Route 2 : laisser Claude Code construire les pages par SSH

Claude Code est l’outil de Claude qui lit des fichiers et lance des commandes. Il fonctionne dans un terminal, dans VS Code, dans l’application de bureau et sur le web ; pour cette route, utilisez-le dans un terminal sur votre ordinateur. Il est inclus dans les formules payantes Pro, Max, Team et Enterprise, pas dans la formule gratuite, et fonctionne aussi avec un compte de la Console Anthropic (API facturée à l’usage). Pour choisir la formule, voyez quel abonnement Claude prendre.

L’intérêt ici : si l’hébergement du client donne un accès SSH, Claude Code peut se connecter au serveur et créer lui-même les pages avec WP-CLI, l’outil en ligne de commande de WordPress. Quand le site compte beaucoup de pages, cette route évite les copier-coller page par page. Le résultat doit rester le même qu’en route 1 : des blocs natifs, en brouillon.

L’hébergeur donne-t-il un accès SSH ?

Vérifié dans la documentation de chaque hébergeur le 5 octobre 2026 :

• o2switch : SSH sur l’hébergement mutualisé, après avoir autorisé votre adresse IP dans cPanel avec l’outil « Autorisation SSH » (port 22, 5 exceptions au total).
• Hostinger : SSH à partir de l’offre Premium Web, pas sur Single Web ; il s’active depuis la page « SSH Access » du tableau de bord.
• OVHcloud : SSH à partir de l’offre Pro, donc pas sur Starter ni Perso. Dans l’espace client, Web Cloud > Hébergements, onglet « FTP-SSH », puis « … » > « Modifier » sur l’utilisateur et le protocole « FTP, SFTP et SSH ». Serveur au format ssh.clusterXXX.hosting.ovh.net, port 22.
• Infomaniak : SSH sur l’hébergement web, pas sur l’offre Starter. Dans le Manager, menu « FTP / SSH », créez un compte FTP + SSH ; une « Console SSH » s’ouvre aussi dans le navigateur.

Une fois connecté, tapez wp --info. Si la commande répond, WP-CLI est disponible. Sinon, la documentation de WP-CLI explique comment l’installer dans votre dossier.

Préparer le terrain avant de lancer Claude Code

1. Travaillez sur une copie de préproduction si l’hébergeur en propose une. Sinon, exportez la base avant de commencer : wp db export sauvegarde-avant-refonte.sql.
2. Utilisez un accès SSH par clé, jamais un mot de passe collé dans une conversation.
3. Créez un utilisateur WordPress dédié au chantier, avec le rôle Éditeur : wp user create integration integration@exemple.test --role=editor. Il peut créer des pages et téléverser des images, pas installer d’extension ni changer de thème.
4. Rangez dans un dossier de votre ordinateur la maquette, un fichier par page et les photos du client, déjà renommées. Si le client vous envoie ses textes dans Google Docs, voyez comment connecter Claude à Gmail, Drive et Agenda.

Ne donnez jamais à Claude Code l’administration du site en production sans sauvegarde récente.

Attention au mode de permission. Les versions récentes de Claude Code démarrent en mode auto : un second modèle valide les commandes à votre place. Pour ce chantier, démarrez en mode Manual avec claude --permission-mode manual, ou appuyez sur Maj + Tab jusqu’à lire « manual mode on » dans la barre d’état. Claude Code vous demande alors votre accord avant chaque commande qui ne se limite pas à lire ; lisez ces demandes au lieu de tout accepter d’un bloc.

Le prompt pour Claude Code

Lancez Claude Code en mode Manual dans le dossier du chantier et envoyez ce prompt. La règle 5 guide Claude ; c’est le mode Manual qui vous garantit de valider chaque commande.

Contexte : je refais le site vitrine WordPress d'un client. La maquette
validée est dans ce dossier (un fichier HTML par page, photos dans
images/). Le site est accessible en SSH : compte@serveur, dossier www/,
WP-CLI disponible avec la commande wp.

Objectif : créer chaque page de la maquette sur le site, en brouillon,
avec l'utilisateur WordPress "integration".

Règles :
1. Convertis chaque page en blocs WordPress natifs uniquement (cover,
   group, columns, heading, paragraph, list, image, buttons). Pas de bloc
   HTML personnalisé, pas de <script>, pas de <style>, pas de classe
   inventée.
2. Téléverse les photos avec wp media import (titre et texte alternatif),
   puis remplace les URL de la maquette par celles de la Médiathèque.
3. Crée les pages avec wp post create, --post_type=page,
   --post_status=draft, --user=integration. Jamais de publication.
4. Interdits : supprimer quoi que ce soit, installer ou activer une
   extension ou un thème, modifier un réglage du site, toucher aux pages
   existantes.
5. Avant chaque commande sur le serveur, montre-la-moi et attends mon
   accord.
6. À la fin, donne-moi la liste des pages et des images créées avec leur
   identifiant.

Voici les commandes que vous verrez passer, pour les reconnaître. La première copie les fichiers sur le serveur ; les suivantes s’exécutent sur le serveur, dans le dossier du site (Claude Code les fait en général précéder de ssh compte@serveur).

scp page-accueil.html images/vitrine.jpg compte@serveur:~/
cd www
wp media import ~/vitrine.jpg --title="Vitrine de l'atelier" --alt="Vitrine avec des bouquets" --user=integration --porcelain
wp post create ~/page-accueil.html --post_type=page --post_status=draft --post_title="Accueil" --user=integration --porcelain
wp post list --post_type=page --post_status=draft

wp post create lit le contenu de la page dans un fichier et, avec --porcelain, n’affiche que l’identifiant créé. wp media import peut aussi rattacher l’image à une page avec --post_id. Ces options sont celles de la documentation officielle de WP-CLI.

Relire ce que Claude Code a fait

Ouvrez chaque brouillon dans l’éditeur et refaites les contrôles de la route 1 : Vue en liste, aucun bloc invalide, textes conformes à la maquette, aperçu mobile. Vous publiez vous-même, page par page.

Les pièges qui coûtent cher plus tard

Le bloc « HTML personnalisé » est tentant : vous collez la maquette, elle s’affiche. Mais votre client doit ensuite modifier du code pour changer un horaire, et c’est vous qu’il appellera.

Les constructeurs de pages comme Elementor ou Divi fonctionnent, mais vous reconstruisez la maquette à la main, section par section. Le site dépend alors de l’extension (Divi est payant, une bonne partie d’Elementor est dans sa version Pro) et en sortir plus tard revient à refaire les pages.

Les convertisseurs automatiques « HTML vers Elementor » existent. Leur résultat est fragile : vérifiez chaque section avant de les retenir, et prévoyez de reprendre la mise en page.

Reste l’option avancée : demander à Claude un thème complet (un fichier theme.json, des modèles et un style.css, livrés en zip) à téléverser dans Apparence > Thèmes. Cela marche, mais ce thème devient le vôtre à maintenir à chaque mise à jour de WordPress. Si vous allez dans cette direction, partez plutôt d’un thème enfant de Twenty Twenty-Five, qui reste mis à jour.

Rendre le client autonome après la livraison

Le but de toute la méthode, c’est que le client n’ait plus besoin de vous pour une virgule. Préparez quatre choses.

1. Un compte avec le rôle Éditeur pour l’usage courant. Il modifie et publie les pages, sans accès aux extensions ni aux réglages. S’il exige un compte administrateur, gardez quand même ce compte Éditeur pour le quotidien.
2. Des compositions synchronisées pour ce qui se répète (bloc contact, horaires, bandeau d’appel) : sélectionnez les blocs, menu à trois points, « Créer une composition », option « Synchronisée ». Une modification met à jour toutes les pages. Depuis WordPress 7.0, selon la documentation officielle, une composition insérée dans une page se modifie en mode contenu seul : on change les textes et les images, la mise en page est protégée des fausses manipulations.
3. Des verrous sur les sections qui structurent la page : menu à trois points du bloc, « Verrouiller », puis « Verrouiller le mouvement » et « Verrouiller la suppression ». Ces verrous évitent les déplacements et les suppressions par erreur.
4. Une formation de vingt minutes, sur sa propre page : changer un texte, remplacer une photo avec « Remplacer », ajouter un paragraphe, enregistrer, prévisualiser sur mobile, revenir en arrière avec les Révisions.

Expliquez-lui aussi où vit le style : dans Apparence > Éditeur > Styles ou le theme.json pour un thème à blocs, dans le thème enfant sinon. Il n’a aucune raison d’y toucher.

La liste de contrôle avant de dire « c’est fini »

• Sauvegarde récente, et restauration testée au moins une fois.
• Travaux faits sur la préproduction, puis reportés en production.
• Chaque page vérifiée sur ordinateur, tablette et téléphone.
• Images compressées, à la bonne taille, avec un texte alternatif.
• Titre SEO et méta-description de chaque page renseignés dans Rank Math ou Yoast.
• Anciennes adresses redirigées vers les nouvelles si des URL ont changé pendant la refonte.
• Formulaires testés par un vrai envoi, reçu dans la bonne boîte.
• Pages légales en place : mentions légales en France, informations obligatoires en Belgique (dont le numéro d’entreprise), politique de confidentialité, gestion des cookies si le site en dépose.

Où s’arrête la conversion faite par Claude

La conversion couvre le contenu des pages. Elle ne règle pas le menu de navigation, l’en-tête et le pied de page du thème, les formulaires (qui passent par une extension), les réglages des extensions ni la version multilingue. Ces éléments se configurent dans WordPress, à la main ou commande par commande avec Claude Code, et se vérifient un par un. La mise en ligne elle-même (nom de domaine, adresse e-mail pro, hébergement, sauvegardes) est expliquée dans mettre en ligne un site créé avec Claude. Pour le choix du modèle selon la tâche, la page choisir son modèle IA et organiser plusieurs agents donne une méthode de test.

Pour vos relances de devis clients, la méthode pas à pas est dans créer un agent IA sans coder.

Si votre difficulté est plutôt de suivre plusieurs clients à la fois (devis, relances, fichiers reçus, échéances), l’assistant IA de MACCUS prend en charge votre propre administratif : un assistant que vous utilisez dans Telegram, installé et hébergé pour vous, qui garde la mémoire de vos dossiers et se connecte aux outils choisis avec vous, au cas par cas. Il ne construit pas les sites WordPress à votre place.

Pour d’autres usages par profession, voyez l’IA par métier.