Blog
Comment l'IA génère un site WordPress complet en 2 minutes
Une plongée en profondeur dans le système de mandat de conception, la génération de palettes et l'assemblage de blocs Gutenberg qui alimentent le constructeur de sites de PAGEnza.
Chaque fois que quelqu'un tape une description d'entreprise dans PAGEnza et clique sur générer, quelque chose d'assez complexe se produit en arrière-plan — en environ 90 secondes. Cet article explique exactement ce que c'est.
Le problème avec les modèles
La plupart des constructeurs de sites Web par IA fonctionnent comme ceci : ils choisissent un modèle, remplacent votre texte et appellent cela "généré par IA". Le résultat ressemble à tous les autres sites construits sur cette plateforme.
PAGEnza fonctionne différemment. Il n'y a pas de modèles. Chaque site commence sur une toile Gutenberg vierge et est construit algorithmiquement à partir d'un ensemble de règles de conception que nous appelons le Mandat de Conception.
Qu'est-ce que le Mandat de Conception ?
Le Mandat de Conception est une invite structurée — environ 8 000 jetons — qui décrit chaque décision visuelle et structurelle pour un site spécifique. Il est construit en Python avant tout appel à l'IA, basé sur votre saisie.
Il contient six parties :
Partie A — Identité de Marque : industrie, nom de l'entreprise, ton (par exemple, "professionnel" vs "ludique"), public cible.
Partie B — Système de Couleurs : une palette de 4 couleurs (encre, bg1, bg2, accent) générée algorithmiquement et validée selon les règles de contraste WCAG AA. Chaque palette est vérifiée avec de vrais calculs de luminance — pas des suppositions.
Partie C — Typographie : un trio de polices (titre / corps / accent) choisi parmi plus de 80 Google Fonts, filtré par archétype d'industrie et vérifié pour inclure le support du jeu de caractères latin-ext.
Partie D — Plan d'Agencement : la structure de la page — quelles sections apparaissent, dans quel ordre, et avec quelle variante (par exemple, héros avec image pleine largeur vs héros avec disposition divisée).
Partie E — Contraintes de Conception : style du rayon des bordures (net / doux / arrondi), formes des séparateurs de section, traitement des images, système d'espacement.
Partie F — Règles de Contenu : quel texte va où, comment les titres sont structurés, quels CTA apparaissent.
Comment les palettes sont générées
La couleur est là où la plupart des outils d'IA échouent. Demander à un LLM de choisir des couleurs vous donne des codes hexadécimaux aléatoires qui peuvent sembler corrects isolément mais échouent aux tests d'accessibilité — ou semblent simplement génériques.
Nous adoptons une approche différente. Notre système de palette fonctionne comme suit :
- Basé sur votre industrie et votre archétype (par exemple, "luxe", "audacieux", "terreux"), nous sélectionnons parmi 20 groupes de palettes pré-audités
- Dans chaque groupe, nous choisissons une palette où
encrea un contraste ≥4.5:1 par rapport à tous les arrière-plans - Nous vérifions que
accenta un contraste ≥3.0:1 par rapport àbg1etbg2 - Nous nous assurons que les deux couleurs d'arrière-plan ont des températures de couleur contrastées (une chaude, une froide) afin que les sections soient distinctes
Si une palette échoue à un contrôle, elle est remplacée automatiquement. Aucune implication de LLM dans cette étape — c'est des mathématiques pures.
Comment les blocs Gutenberg sont assemblés
Une fois le Mandat de Conception prêt, il est envoyé à Gemini Flash avec une invite stricte qui spécifie :
- Quels blocs sont autorisés (une liste blanche d'environ 40 types de blocs Gutenberg)
- Attributs requis pour chaque type de bloc
- Format JSON exact pour la sortie
L'IA renvoie du JSON brut de blocs Gutenberg — pas du HTML, pas du React, du vrai balisage de bloc WP. Ce JSON passe ensuite par plusieurs passes de validation :
- Validation du schéma — attributs requis présents, aucun type de bloc inconnu
- Assainissement des classes CSS — les noms de classes inventés sont supprimés, remplacés par nos classes de système de conception
- Passes de réparation — attributs d'espacement synchronisés, dégradés de blocs de couverture normalisés, séparateurs de forme injectés
Le résultat est téléchargé directement sur WordPress via l'API REST WP et activé comme page d'accueil du site.
Qu'est-ce qui rend chaque site unique
Plusieurs éléments varient entre chaque génération, même pour la même industrie :
- Palette : 20+ groupes, chacun avec plusieurs palettes
- Trio de polices : 6+ combinaisons par archétype
- Ordre et variantes des sections : disposition du héros, style des statistiques, arrangement des cartes de fonctionnalités
- Séparateurs de forme : variations organiques vs géométriques, d'amplitude/fréquence
- Formes de blobs : pour les industries organiques, les blobs d'images et de cartes sont randomisés parmi 12 variantes
Le résultat est que deux pizzerias générées le même jour auront des couleurs différentes, des polices différentes, des agencements différents — et les deux seront conformes WCAG AA.
Quoi de neuf
Nous travaillons actuellement sur :
- Génération multi-pages — génération des pages
/about,/serviceset/contactà partir du même mandat - Aperçu en direct — voir le site avant son déploiement sur WordPress
- Transfert de style — télécharger une capture d'écran d'un site que vous aimez et en extraire son ADN de conception
Si vous voulez voir le système en action, le générateur est gratuit à essayer — aucun compte requis pour le premier site.