Depuis plusieurs jours, je mène une expérimentation qui change profondément ma façon de travailler sur WordPress, Gutenberg et le webdesign assisté par intelligence artificielle.
L’objectif n’était pas simplement de générer du HTML avec une IA.
L’objectif était beaucoup plus ambitieux :
- créer un véritable workflow de production piloté par un agent ;
- structurer un Design System Gutenberg réutilisable ;
- normaliser automatiquement des pages HTML complexes ;
- travailler en local ;
- puis déployer les corrections vers le serveur réel via SSH et WP-CLI.
Et honnêtement, le résultat est impressionnant.
L’idée de départ
Depuis longtemps, le principal problème de Gutenberg n’est pas vraiment le design.
Le vrai problème, c’est la structure.
Quand on convertit des maquettes ou du HTML vers Gutenberg :
- les groupes deviennent vite illisibles ;
- les blocs sont mal nommés ;
- les structures sont incohérentes ;
- les pages deviennent difficiles à maintenir ;
- les blocs HTML personnalisés cassent facilement ;
- et les futures modifications deviennent un cauchemar.
L’idée était donc de créer un système capable de :
- normaliser automatiquement les pages ;
- imposer une structure cohérente ;
- créer des composants réutilisables ;
- conserver un design homogène ;
- et rendre les pages réellement maintenables dans Gutenberg.
L’architecture mise en place
Le système repose sur plusieurs éléments.
1. Visual Studio Code
Toute la logique est pilotée depuis :
- Visual Studio Code
- Codex
- plusieurs agents spécialisés
- des skills WordPress personnalisés
Visual Studio Code devient presque un cockpit de pilotage IA.
2. Les agents spécialisés
J’ai créé un agent WordPress dédié :
Etchenet-WordPress-Agent
Cet agent est capable de :
- comprendre Gutenberg ;
- modifier les templates ;
- intervenir sur les blocs ;
- manipuler des structures complexes ;
- travailler sur le thème ;
- intervenir sur les plugins ;
- générer des composants réutilisables ;
- appliquer un Design System.
Mais surtout :
- il est connecté à mon environnement local ;
- et à mon serveur via SSH.
3. Les Skills
Le vrai changement vient des skills.
Les skills permettent d’ajouter des capacités spécialisées à l’agent :
- WordPress ;
- Gutenberg ;
- Polyglots ;
- UI/UX ;
- normalisation ;
- structure Gutenberg ;
- validations ;
- traductions ;
- etc.
On ne parle plus simplement d’un chatbot.
On parle d’un système modulaire capable de charger des compétences spécialisées selon le contexte.
4. Le travail en local
Toute l’expérimentation se fait d’abord en local.
C’est probablement le point le plus important du workflow.
L’agent :
- modifie les pages ;
- corrige les blocs ;
- restructure Gutenberg ;
- normalise les sections ;
- teste les composants ;
- vérifie les conflits ;
- nettoie les structures.
Et moi je peux :
- tester immédiatement ;
- revenir en arrière ;
- comparer ;
- valider ;
- corriger progressivement.
C’est un énorme changement de confort.
5. La connexion SSH et WP-CLI
Une fois les tests validés localement, l’agent peut intervenir directement sur le serveur réel.
Le système utilise :
- SSH ;
- WP-CLI ;
- synchronisation de fichiers ;
- commandes distantes ;
- mises à jour ciblées.
Concrètement :
- je valide localement ;
- l’agent applique ensuite les modifications sur le serveur.
C’est extrêmement puissant.
Le Design System Gutenberg
Le plus fascinant dans cette expérimentation reste probablement la normalisation Gutenberg.
Nous avons créé :
- une nomenclature de groupes ;
- une hiérarchie cohérente ;
- des composants réutilisables ;
- des règles de structure ;
- des containers standardisés ;
- des sections transparentes ;
- des patterns de cartes ;
- des boutons homogènes ;
- des badges ;
- des conventions responsive.
Le but :
transformer Gutenberg en véritable système de design maintenable.
Pourquoi c’est important
Ce workflow change complètement la manière de produire des sites WordPress.
Avant :
- chaque page devenait un cas particulier ;
- les structures se dégradaient ;
- les blocs devenaient illisibles ;
- les modifications futures coûtaient cher.
Maintenant :
- les pages sont normalisées ;
- les structures restent propres ;
- les composants sont réutilisables ;
- l’agent applique les conventions automatiquement ;
- les corrections se propagent progressivement.
Et surtout :
on peut industrialiser le travail sans perdre la souplesse de Gutenberg.
Les outils utilisés
Visual Studio Code
Codex
WordPress
WP-CLI
Handbook WordPress Polyglots
https://make.wordpress.org/polyglots/handbook
Ce que je retiens de cette expérimentation
Nous entrons dans une nouvelle façon de travailler.
L’IA ne remplace pas le développeur ou le webdesigner.
Mais elle devient :
- un assistant structurel ;
- un normalisateur ;
- un opérateur ;
- un validateur ;
- un accélérateur de workflow.
Et combinée :
- aux agents ;
- aux skills ;
- au SSH ;
- à WP-CLI ;
- au travail local ;
- et à Gutenberg ;
… cela ouvre des possibilités assez extraordinaires.
Le plus impressionnant finalement n’est pas la génération.
C’est la capacité à construire un véritable système de travail cohérent, maintenable et évolutif autour de WordPress.