De Claude Design à WordPress : comment convertir votre design

Quel résultat Claude Design vous a-t-il donné ?

Claude produit deux types de résultats, et chacun suit une voie différente. Vérifiez lequel vous avez avant de commencer, car c'est lui qui détermine la durée de la conversion.

Ce que Claude vous a donné	Ce que c'est	Voie
Artefact HTML	Un fichier .html autonome : le code, les styles et les scripts sont tous dedans.	Cet article. C'est déjà du HTML plat, exactement l'entrée dont le convertisseur a besoin.
Artefact React	Un composant. La page n'apparaît qu'après l'exécution du JavaScript, et le HTML autour n'est qu'un élément vide dans lequel l'application se monte.	Le guide Lovable : le même type d'entrée, la même étape en plus.

En cas de doute, ouvrez le fichier et regardez dans le <body>. Si vous y voyez vos titres et vos paragraphes, vous avez un artefact HTML et vous êtes au bon endroit. Quand le body ne contient qu'un <div> vide et une balise script, vous avez l'autre type.

Exporter depuis Claude Design dans un dossier, images comprises

L'entrée est toujours un dossier sur votre disque. L'adresse d'un site en ligne n'est pas une entrée acceptée, et c'est voulu. La copie d'une page publiée ne garde que le résultat affiché et perd ce que sait le fichier source.

Exportez donc le design depuis Claude (téléchargez l'artefact), créez un dossier et enregistrez-y le fichier sous le nom index.html. Si le design renvoie à des images qui ne sont pas dans le fichier, placez-les à côté, aux mêmes emplacements relatifs que ceux attendus par le code.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

Une page ou plusieurs ?

Un artefact correspond à une page, et un site d'une seule page se convertit sans aucun problème. Il devient la page d'accueil du thème. Pour un site avec des pages À propos et Contact, demandez-les aussi à Claude et enregistrez chacune dans son propre fichier .html, dans le même dossier. Les noms de fichiers comptent : l'analyse les lit et comprend un fichier nommé blog.html ou about.html grâce à son nom.

Si vous restez à cinq fichiers ou moins, toute la conversion tient dans l'offre gratuite.

Ce dont votre ordinateur a besoin pour passer de Claude Design à WordPress

La route plus courte tourne elle aussi sur votre machine, et les prérequis ne diminuent pas. Le navigateur et le WordPress temporaire servent à vérifier le résultat, pas à le produire :

• Node 20 ou plus récent et Python 3 avec les paquets Playwright et Pillow.
• Docker avec la commande docker compose. Il démarre un WordPress temporaire sur votre ordinateur, et le convertisseur y installe le thème avant que vous le voyiez.
• php-cli, car chaque fichier PHP passe une vérification de syntaxe avant d'entrer dans le ZIP.
• jq, curl, bash et tar. Le WordPress cible doit être en version 6.6 ou plus récente.

La première étape vérifie tout cela. Elle sépare ce qu'elle peut installer seule dans vos propres dossiers de ce que vous devez décider. Docker, elle ne l'installe pas à votre place, sauf si vous le demandez.

Lancer la conversion de Claude Design en WordPress

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Ensuite, depuis n'importe où, tapez :

/html2wp:html2wp

convert ./my-site

Le chemin du dossier est toute l'instruction. Vous n'écrivez aucun fichier de configuration et vous ne choisissez aucune commande de build. Dans Codex, tapez convert ./my-site with html2wp. Si vous préférez ne pas travailler dans un terminal, ouvrez le même dossier dans l'app de bureau html2wp (un guide avec captures d'écran).

Flash prend environ 30 minutes et Full environ une heure, selon le nombre de pages et la vitesse de votre ordinateur. Un artefact d'une page se situe plutôt du côté court, mais les vérifications tournent toujours en entier, même pour une petite entrée.

Ce qu'il décide pour vous, et ce qu'il vous demande

Avant de générer quoi que ce soit, il mesure vos fichiers. Il liste les pages et détermine quelles parties du code sont partagées et lesquelles sont uniques. Il repère aussi les design tokens (couleurs, polices, espacements), tout ce qui ressemble à un blog et les pages qui sont autonomes. Puis il note ce qu'il prévoit de faire et convertit selon ce plan.

Un design généré bute souvent sur deux points :

• Chaque variante du design est conservée. Si vos pages n'ont pas le même en-tête, il ne désigne pas de gagnant pour aplatir les autres. Il crée une partie de modèle (template part) pour chaque variante et relie chaque page à celle qu'elle utilisait vraiment. Les artefacts issus de différentes conversations avec Claude diffèrent souvent plus que dans votre souvenir.
• Les accolades de votre texte survivent. L'étape intermédiaire utilise un format proche de JSX. Sans traitement, un exemple JSON ou CSS dans votre texte casserait le build ou s'afficherait sur la page sous la forme {. Le convertisseur s'en occupe, et les accolades restent des accolades sur la page.

Les groupes répétés, comme des cartes, des témoignages ou une FAQ, sont enregistrés comme des collections au lieu d'un balisage codé en dur. Vous pouvez donc réellement les modifier plus tard, pas seulement en apparence.

La relecture que vous ne pouvez pas sauter

Le convertisseur place chaque page dans une image à côté de son original, et vous les lisez toutes de haut en bas.

Lors d'une conversion, il manquait une section plus bas sur la page. La comparaison de pixels n'a montré qu'une différence de 0,4 %, et la page a passé la vérification. Par nature, les vérifications chiffrées ne voient pas trois types de défauts. Premier cas : un élément d'interface qui a l'air parfait mais ne fait rien. Deuxième cas : une valeur codée en dur, reprise de la seule page dont un modèle est issu. Troisième cas : tout ce qui n'apparaît qu'après un défilement, un clic ou l'envoi d'un formulaire.

Vérifiez aussi que le contenu se modifie. Une page peut correspondre au pixel près sans que personne puisse modifier sa FAQ ou sa grille de fonctionnalités depuis wp-admin. C'est déjà arrivé, et c'est cette relecture qui l'a repéré, aucune vérification automatique.

Modifier le site WordPress issu de Claude Design : thème, Visual Edit ou constructeur de pages

Deux fichiers arrivent dans votre dossier : le ZIP du thème et, à côté, CONVERSION-REPORT.md. Le rapport liste ce que la conversion a couvert, ce que la relecture a trouvé et ce qui reste ouvert. Vous installez le thème comme n'importe quel thème WordPress (Apparence → Thèmes → Ajouter un thème → Téléverser un thème).

Le thème est autonome. Pages, blog, formulaires, menus, SEO et redirections font tous partie de son propre code. Il n'a besoin d'aucune extension pour fonctionner et ne communique jamais avec notre serveur. Les articles de blog s'écrivent dans l'éditeur de blocs, et le texte des pages reste dans le HTML. Pour modifier les pages sans code, il existe deux options : Visual Edit et un constructeur de pages.

Un constructeur de pages est un bon choix quand le design n'est qu'un point de départ. C'est un mauvais choix quand le design est justement ce que vous livrez. Si vous convertissez pour que le design généré survive dans WordPress, le reconstruire en widgets annule la raison même de la démarche. Mais si quelqu'un d'autre refait la mise en page au trimestre prochain, son expérience d'Elementor peut valoir plus qu'un design fidèle.

Lite ou Pro, si vous choisissez Visual Edit

Le chat IA fonctionne avec votre propre clé API. Nous ne vous vendons pas de tokens, et vous réglez leur coût avec votre fournisseur.

Prix, et ce que la conversion refuse

Gratuit pour tout le monde, sans clé ni inscription : trois conversions de cinq pages chacune et cinq relances au total. Les deux limites comptent par adresse IP, donc un bureau avec une seule adresse n'a droit qu'à un seul quota. L'offre gratuite sert à essayer l'outil, aux sites personnels et aux projets non commerciaux.

Une licence Pro supprime la limite de pages et rend les conversions et les relances illimitées. Elle débloque aussi l'étape qui transforme une boutique en WooCommerce. Cette étape n'est jamais gratuite : l'app refuse d'emblée la conversion gratuite d'un site avec boutique, au lieu d'en faire la moitié. Vous achetez Pro au mois ou à l'année sur la page des tarifs, et pendant la bêta, le premier paiement bénéficie de 30 % de réduction.

Une réserve : c'est une bêta. Les vérifications repèrent la plupart des différences, pas toutes. C'est pourquoi lire chaque page à côté de son original fait partie du processus et n'a rien d'une finition facultative. C'est aussi pourquoi il vaut mieux convertir d'abord gratuitement un de vos propres sites, et seulement ensuite lui faire confiance.

Un guide pas à pas de tout le processus se trouve dans la documentation de l'app html2wp. Si votre artefact est en React, le guide de Lovable à WordPress décrit cette voie.