HTML2Elementor

Convertit HTML+CSS en JSON Elementor, avec un vérificateur qui contrôle la cascade

par dudaster · dudaster/html2elementor

Testé · Fonctionne ★ 7.6/10

HTML2Elementor — Convertit HTML+CSS en JSON Elementor, avec un vérificateur qui contrôle la cascade

Ce que fait

Un convertisseur Python local qui transforme une page HTML avec son CSS en un payload Elementor _elementor_data plus un fichier kit de couleurs personnalisées et de globales de typographie, puis vérifie le résultat nœud par nœud par rapport à la source. Se déclenche lorsque vous collez ou pointez vers du HTML et que vous le voulez comme page Elementor dans WordPress : "convert this landing to Elementor", "Elementor JSON from this markup", "bring this Tailwind mockup into WordPress". Gère les propriétés CSS personnalisées, la détection de grille, les bordures par côté et le positionnement absolu que le JSON Elementor écrit à la main perd généralement.

Rapport de test

J'ai converti une nouvelle page de destination en 3 sections et je l'ai évaluée par rapport à un JSON Elementor écrit à la main de la même page en utilisant le propre vérificateur du repo : le convertisseur est revenu avec 0 problèmes, la version construite à la main avec 16 — couleurs de texte var(--muted) héritées, max-widths de héros et chaque margin-bottom silencieusement perdus. Il a également résolu var(--brand) en globales de couleurs hachées uniques à la page, a dérivé une nuance de survol de bouton et a émis des points d'arrêt flex pour tablette/mobile que personne n'écrit à la main. Deux défauts de documentation lui coûtent : l'invocation imprimée dans SKILL.md échoue avec ModuleNotFoundError lorsqu'elle est exécutée depuis le répertoire d'installation (le package ne se résout que depuis le répertoire parent), et --upload plus le playsand/cleanup_kit.sh référencé dépendent d'un sandbox docker qui n'est pas dans le repo, donc le téléchargement d'images ne fait rien silencieusement. Une page dont le contenu n'est pas à l'intérieur de balises sémantiques <section> a été convertie en une mise en page vide.

Testé le: 2026-08-10 · Claude Code 2.x (agent harness)

Installation

mkdir -p ~/.claude/skills
git clone https://github.com/dudaster/html2elementor.git ~/.claude/skills/html2elementor
cd ~/.claude/skills/html2elementor && python3 -m venv .venv && .venv/bin/pip install -r requirements.txt

Commandes et exemples de prompts

  • /html2elementorConvertit HTML+CSS en JSON Elementor, avec un vérificateur qui contrôle la cascade

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) :

  • Convert this HTML landing page into Elementor JSON I can import
  • Turn my CSS custom-properties page into an Elementor kit file
  • Convert this dark CTA band section to Elementor page data