contenus
Une adresse de site, son design system mesuré
Create design.md prend l’adresse d’un site web, l’affiche dans un vrai navigateur et mesure les styles appliqués à la page. Il en tire un design system prêt à réutiliser : couleurs, typographies, espacements, composants. Utile pour reprendre un site, l’auditer ou en faire hériter une nouvelle application.
Ce qu’elle fait
On donne une adresse. L’application ouvre la page dans un navigateur sans écran, à trois largeurs : mobile, tablette, ordinateur. Elle relève les styles réellement calculés par le navigateur, pas seulement ceux écrits dans les feuilles de style.
Ces mesures sont regroupées en un jeu de jetons de design : palette, échelle typographique, espacements, rayons, ombres. À partir de ce jeu, l’application produit plusieurs livrables :
- un
design.mden neuf sections, lisible par un humain ou par un agent IA ; - des jetons au format W3C DTCG, le standard d’échange des design systems ;
- une variante prête pour Figma ;
- un aperçu HTML autonome ;
- une archive qui regroupe le tout.
La prose du design.md est rédigée par un modèle de langage, qui ne fait que commenter les valeurs mesurées. Si l’IA ne répond pas, les jetons sortent quand même. Une analyse peut être régénérée sans relancer la mesure, et publiée dans une bibliothèque partagée.
Pour qui
Pour une agence ou une équipe produit qui reprend un site existant, veut en documenter l’identité visuelle, ou doit créer une application qui lui ressemble. Pour un agent IA de développement, le design.md sert de consigne de style.
Comment elle est construite
Create design.md est une application du socle V005 avec deux workers. Le premier expose les actions MCP (analyser un site, suivre une analyse, récupérer les jetons, régénérer le texte). Le second exécute les analyses en file d’attente. La progression s’affiche en direct dans l’interface.
Le rendu des pages est confié à un conteneur compagnon qui pilote Chromium par Playwright. Les adresses demandées sont filtrées avant d’être ouvertes, pour qu’on ne puisse pas viser le réseau interne. La rédaction passe par la passerelle d’IA du Hub, dont on règle en base le modèle, la température et la langue.
Les analyses et les jetons vivent dans PostgreSQL ; les livrables sont rangés dans un stockage objet compatible S3. L’interface est en React. L’accès passe par le SSO du Hub.
Points forts
Des valeurs mesurées, pas devinées
Les styles viennent du navigateur, à trois largeurs d’écran. Le design system décrit ce que voit vraiment l’utilisateur.
Un format standard
Les jetons suivent le format W3C DTCG et existent en variante Figma. Ils passent d’un outil à l’autre sans ressaisie.
L’IA commente, elle n’invente pas
Le texte du design.md s’appuie seulement sur les valeurs relevées. Sans IA, les jetons restent livrés.
Pensé pour les agents
Le design.md et les actions MCP permettent à un agent de demander l’analyse d’un site et d’en appliquer le style.
En images
Écran 1
L’accueil : une URL devient un design system.
Écran 2
Un design system généré (machinapolis.com) : aperçu, design.md, jetons DTCG et Figma.
Écran 3
Le journal des nouveautés du produit.
Écran 4
Le réglage du flux AgentIA : modèle, température, prompt système.
Sur mobile
L’accueil sur téléphone.