Genesis

Genesis est un CMS et générateur de sites statiques écrit en PHP et JavaScript, sans framework ni dépendance npm. Il exporte du HTML sémantique, lisible par les moteurs comme par les agents IA ; ce site en est une sortie. Genny vit dans l'éditeur. Elle connaît le site entier, bloc par bloc, retient les règles et les faits que je lui confie et tient la liste de ce qui reste à faire. Elle rédige, traduit, génère les images, modifie la mise en page, tient le SEO et la syntaxe. Genesis est son support : je lui décris ce que je veux, elle le construit. Je relis, je poste.

Fiche technique

Informations générales

Architecte / Créateur : David Pichot

Développement : Claude Sonnet 4.5

Temps de développement : 54 jours

Technologie

Langages : PHP, JS

Base de données : SQLite, JSON

Bibliothèques/Dépendances : Masonry.js, Sortable.js, Embla Carousel

Métriques

Lignes de code : ~40000

Nombre de fichiers : ~190

Page Genesis EN : 100/100/100/100 sur ordinateur le 14/09/2026 ; performance mobile 90/100

Status

Etat du projet : En Cours

Problématique

Le web n’est plus lu seulement par des humains. Les moteurs augmentés et les agents IA analysent les pages en profondeur : structure, sémantique, temps de chargement, clarté du HTML. Pourtant, la plupart des CMS et des builders produisent des pages lourdes, saturées de scripts et de dépendances. Elles répondent à des cases marketing plus qu’à une logique lisible par une machine. Dès qu’on ajoute un contenu interactif, une scène 3D ou une démonstration, la performance de toute la page se dégrade. Et lorsque l’IA est présente, elle se résume souvent à un bouton « générer ». Elle écrit alors dans le vide, sans comprendre le site, son contexte ni ce qui existe déjà.

Réponse

Genesis rassemble la structure du site, les sections, les blocs, le design et le SEO dans une interface visuelle unique, avec aperçu en direct. L’export produit des pages HTML statiques, sémantiques, enrichies par Schema.org, les métadonnées, le sitemap, les flux et llms.txt. Le contenu est disponible en français et en anglais grâce à une traduction par modèle avec contrôle. Les scènes 3D WebGL sont intégrées dans des iframes sans casser la performance. Un seul moteur three.js est partagé par toutes les scènes. Chaque scène se tait lorsqu’elle sort de l’écran, le rendu passe par un worker hors du fil principal et le chargement est orchestré.

L’agent IA est intégré à l’éditeur plutôt qu’ajouté comme un simple générateur de texte. Il connaît la page entière bloc par bloc, garde une vue d’ensemble du site et aide à maintenir sa cohérence. Il ne crée pas la structure d’un site à la place du CMS : il aide à mettre en page à partir de modules existants. Il peut suggérer, améliorer ou prendre en charge une tâche, avec validation avant écriture. Il fonctionne avec des harnais comme Claude Code ou Codex, qui multiplient sa capacité de travail. Avec Codex, il peut aussi produire des visuels. Avant chaque écriture, l’ancien texte est conservé dans un journal, et rien n’est publié sans validation.

Fonctionnalités

Genesis est un outil qui ne ressemble à aucun autre.
Il génère des sites statiques avec la flexibilité d’un CMS dynamique, en intégrant des fonctionnalités conçues pour allier performance, contrôle absolu et simplicité d’utilisation.
Certaines existent ailleurs. D’autres sont uniques.
Voici ce qu’il sait faire.
Genesis et son agente d'écriture, démonstration jouée. Regardez l’agente d’écriture travailler dans l’éditeur Genesis : sélection d’un bloc, rédaction et reprise d’un passage cité.

Agent IA intégré à l'éditeur

Genesis a maintenant une agente d'écriture, intégrée à l'éditeur. Elle vit dans une fenêtre posée sur l'éditeur : je lui désigne un bloc, elle rédige, je cite un passage, elle ne reprend que celui-là. Elle lit la page entière avant d'écrire. Elle garde l'ancien texte dans un journal avant chaque écriture.
Tableau des scores Lighthouse du site : performance, accessibilité, bonnes pratiques et référencement, page par page, avec un bouton pour relancer la mesure. Parcourez les scores Lighthouse page par page et observez les quatre critères mesurés.

Performance des pages

Genesis génère des sites statiques. La séparation entre création et consultation réduit le travail du navigateur et les dépendances de l'export. L'audit PageSpeed Insights conservé du 14 septembre 2026 donne 100/100 dans les quatre catégories pour la page Genesis en anglais sur ordinateur, et 90/100 en performance mobile pour cette même page. Les autres pages et appareils ont des résultats différents.

Le tableau ci-contre permet de consulter les mesures page par page. Chaque résultat dépend de l'URL, de la date, du terminal et des conditions de test.
L'éditeur Genesis en fonctionnement : les panneaux de réglage à gauche et à droite, l'aperçu du site au centre, mis à jour en direct. Explorez les panneaux de réglage de Genesis et regardez l’aperçu du site au centre.

Éditeur visuel de sites

Avec Genesis, l’architecture du site est pilotée depuis une interface unique : paramètres globaux à gauche, réglages de page à droite, prévisualisation en temps réel au centre, sur plusieurs formats d’écran. Pas de drag-and-drop approximatif : la structure est maîtrisée et prévisible. Chaque bloc hérite de styles définis globalement (typos, couleurs, espacements), ce qui garantit une cohérence visuelle ; un paramètre ajusté une fois se propage partout sans risque de casser le design.

Design web adaptatif

Genesis permet de produire des designs très différents à partir du même ensemble de sections et de blocs. Tous les composants sont responsives par conception : grilles, typographies et médias s’adaptent automatiquement du mobile au desktop. Et si vous savez coder, un bloc n’est qu’un couple JS/PHP : une fois ajouté au projet, il est scanné, intégré à la bibliothèque et utilisable dans l’interface comme n’importe quel composant natif.
Le panneau de référencement de Genesis : titre, description, mots-clés, adresse canonique, type de page et champs Open Graph. Parcourez les champs du panneau de référencement : titre, description, adresse canonique et partage social.

SEO intégré

Genesis intègre nativement un panneau SEO & Social Networks qui pilote canonicals, Open Graph, Schema.org et métadonnées pour chaque page. Vous remplissez quelques champs clés, le système génère une structure HTML propre et des données structurées cohérentes : pas de plugin additionnel, un SEO solide et lisible par les moteurs comme par les agents IA.
Démonstration de mise en page : quatre boutons réorganisent des cartes autour d'un texte, des curseurs règlent les marges et les arrondis. Choisissez une des quatre dispositions, puis ajustez les marges et les arrondis avec les curseurs.

Mise en page réglable

Genesis combine la souplesse d’un CMS dynamique avec la robustesse d’un générateur statique. La démo montre le système de layout : les mêmes cartes se réorganisent instantanément selon les boutons choisis, tandis que marges, espacements et arrondis se règlent en temps réel via les sliders. En pratique, vos sections se recomposent sans casser la grille, ce qui permet d’adapter un même design à des contenus très différents sans toucher au code.
Correction automatique de la structure HTML par Genesis : l'arborescence des titres s'affiche et les niveaux fautifs sont signalés en rouge. Repérez les titres signalés et comparez leur niveau dans l’arborescence HTML corrigée.

Titres HTML corrigés

Genesis analyse et corrige automatiquement la structure HTML de vos pages, sans toucher à votre mise en page. Vous pouvez utiliser les titres pour le design (un H2 avec l’apparence d’un H3, par exemple), le moteur rétablit ensuite une hiérarchie sémantique propre lors de la génération. Les erreurs de niveaux (H1 mal placé, sauts de H2 à H5, titres isolés…) sont détectées et réordonnées en quelques millisecondes. Résultat : un HTML natif, accessible et optimisé pour le référencement comme pour les technologies d’assistance, sans travail manuel supplémentaire.

Évolutions

Genesis me permet déjà de construire les sites que je veux, avec le niveau de contrôle dont j’ai besoin. Mais pour moi, ce n’est qu’un point de départ. Je veux qu’il devienne un système réellement assisté, capable d’anticiper une partie du travail plutôt que de simplement exécuter mes choix. Relié à Homeostasis, Genesis doit pouvoir générer des pages à partir de modèles sémantiques, proposer des structures adaptées au contexte, sélectionner les bons médias, puis me laisser ajuster finement. L’objectif n’est pas de déléguer la décision, mais d’utiliser l’intelligence de la machine pour préparer le terrain, sans perdre la maîtrise du résultat.

Il reste aussi des points très concrets à faire évoluer. Je veux voir immédiatement l’impact des styles que j’applique : ombres, arrondis, variations typographiques, états de survol… directement dans les panneaux. Je veux des groupes de réglages extensibles, un éditeur de texte qui rende le contenu en direct, et des placeholders visuels qui permettent de distinguer les blocs d’un coup d’œil. Un outil de ce niveau doit être puissant, mais aussi agréable à manipuler : pas de bidouille, pas de devinettes, une relation claire entre chaque paramètre et ce qui apparaît à l’écran.

La preview doit gagner en fluidité, avec plusieurs tailles d’écran accessibles en un geste, et des blocs livrés par défaut avec des icônes ou des images pertinentes, pour garder un rendu propre même quand le contenu n’est pas encore finalisé. À plus long terme, je veux ajouter un moteur de slideshow maison, ultra-léger et ultra-optimisé, des headers et footers multiples, des menus dynamiques, ainsi qu’un générateur intégré pour les mentions légales, CGU et bannières cookies, tout ce qui fait perdre du temps sans apporter de valeur créative.

Genesis est pensé comme un système vivant. À terme, je veux qu’il devienne un écosystème autonome, capable de reconnaître des besoins récurrents, de proposer des configurations adaptées et de préparer la structure idéale avant même que je la demande explicitement. Parce qu’au fond, Genesis n’est pas seulement un outil : c’est une façon de travailler. Moins de friction, plus de contrôle, et une obsession constante : que la technique s’efface pour laisser toute la place à ce que l’on veut vraiment montrer.

Travaillons ensemble

L’innovation naît de la collaboration. Ensemble, construisons des solutions qui comptent.
Owan
Bonjour, je m'appelle Owan, je suis l'assistante de David, comment puis-je vous aider ?
0/2000