DESIGN.md Style Extractor est une extension Chrome qui extrait les styles d’un site pour générer un fichier DESIGN.md ou SKILL.md compatible avec l’approche TypeUI. Mon verdict court : ça marche vraiment pour produire une base exploitable, surtout si vous voulez donner à une IA un contexte design propre, mais ce n’est pas un audit UX complet ni une baguette magique.
Je l’ai testé comme je testerais un outil pour un client DevOps : clone propre, lecture du code, lancement réel dans Chromium, page web de test avec composants variés, extraction, puis inspection du Markdown généré.
DESIGN.md Style Extractor, c’est quoi ?
DESIGN.md Style Extractor, dans le dépôt bergside/design-md-chrome, est une extension Chrome Manifest V3. Son objectif est simple : regarder la page active, lire ses styles calculés, puis transformer ces signaux en documentation de design system.
L’extension échantillonne des éléments visibles : titres, paragraphes, liens, boutons, champs, navigation, sections, cartes, tableaux. Elle récupère ensuite typographie, couleurs, espacements, rayons, ombres, animations et quelques signaux de structure.
La sortie prend deux formes :
DESIGN.md, pour documenter un design system à partir d’un site existant.SKILL.md, pour fournir à un agent IA une compétence réutilisable avec règles, tokens et contraintes d’accessibilité.
Pour un public non designer, l’intérêt est concret : au lieu de dire à un outil IA « refais-moi ce style », on lui donne une fiche structurée avec couleurs, échelle typo, composants détectés, règles et garde-fous.
Installation de DESIGN.md Style Extractor
Le dépôt est minimal. Pas de build compliqué, pas de dépendances npm obligatoires pour l’extension elle-même. Le README demande de charger le dossier comme extension non empaquetée dans Chrome.
J’ai cloné le projet dans /tmp, comme demandé, puis lancé les tests fournis :
git clone https://github.com/bergside/design-md-chrome /tmp/design-md-chrome
cd /tmp/design-md-chrome
node tests/run-tests.mjs
Résultat réel :
All tests passed.
J’ai aussi inspecté le manifeste. L’extension demande activeTab, scripting, storage et downloads. C’est cohérent avec son usage : injecter un script dans l’onglet actif, stocker le mode de sortie, puis télécharger le Markdown généré.
| Point testé | Résultat |
|---|---|
| Type de projet | Extension Chrome Manifest V3 |
| Version déclarée | 0.4.0 |
| Tests inclus | node tests/run-tests.mjs |
| LLM requis | Non, génération locale par code JS |
| Sorties | DESIGN.md et SKILL.md |
| Permissions sensibles | Accès à l’onglet actif et injection de script |
J’ai exporté les variables OpenAI et OpenRouter fournies avant le lancement, mais l’outil n’en a pas eu besoin. Il ne fait pas d’appel LLM dans le chemin testé.
DESIGN.md Style Extractor à l’usage
Pour avoir un vrai cas d’usage, j’ai créé une page locale fictive nommée OpsLedger : un dashboard SaaS avec hero, navigation, cartes de métriques, formulaire, tableau, boutons, états visuels et CSS custom properties.
Ensuite, j’ai lancé Chromium avec l’extension chargée et j’ai exécuté l’extraction sur cette page. Sous Xvfb, l’ouverture automatisée du popup Chrome n’a pas été fiable, donc j’ai vérifié le coeur produit par deux chemins : injection du content script sur la page réelle, puis passage dans les mêmes modules de normalisation et de génération que le service worker.
Ce n’est pas un simple test de démarrage. Le produit a bien généré des fichiers exploitables.
Sur ma page OpsLedger, l’extraction a observé :
- 73 noeuds au total.
- 39 éléments échantillonnés.
- 5 tokens typographiques.
- 8 tokens de couleur.
- 10 tokens d’espacement.
- 3 rayons.
- 2 ombres.
- 2 tokens de motion.
- 7 cartes, 4 liens, 3 boutons, 2 inputs, 2 zones de navigation, 1 liste et 1 tableau.
Le fichier DESIGN.md commence ainsi :
# OpsLedger Dashboard
## Mission
Create implementation-ready, token-driven UI guidance for OpsLedger Dashboard that is optimized for consistency, accessibility, and fast delivery across dashboard web app.
## Brand
- Product/brand: OpsLedger Dashboard
- URL: http://127.0.0.1:43117/
- Audience: authenticated users and operators
- Product surface: dashboard web app
Le plus intéressant est la section Style Foundations. L’outil a retrouvé Inter comme famille principale, une échelle typographique de 13.33 px à 56 px, des couleurs comme #111827, #2563eb, #d9e2ef, ainsi que des espacements de 12 à 22 px. Il a aussi classé la surface comme dashboard web app et l’audience comme authenticated users and operators, ce qui colle bien à la page de test.
J’ai aussi généré le SKILL.md. Il contient le frontmatter, les marqueurs TYPEUI_SH_MANAGED_START et TYPEUI_SH_MANAGED_END, puis les mêmes fondations transformées en compétence agent.
Ce que j’aime dans DESIGN.md Style Extractor
Le premier bon point, c’est la simplicité. On comprend vite le flux : l’extension lit la page active, normalise les signaux, génère du Markdown, puis valide la structure.
Le deuxième bon point, c’est la sortie. Elle n’est pas parfaite, mais elle est directement lisible par un humain et utilisable par une IA. Pour un freelance qui doit reconstruire une landing page, documenter un mini design system ou donner du contexte à Codex, Claude Code ou Cursor, c’est utile.
J’apprécie aussi l’absence de dépendance LLM. C’est plus prévisible, plus rapide, moins coûteux, et moins risqué côté données. En sécurité, c’est un détail important : analyser une page active sans envoyer son contenu à un modèle distant est un choix sain.
Enfin, le code est court et compréhensible. Les fonctions clés sont séparées : extraction, normalisation, génération DESIGN.md, génération SKILL.md, validation. Pour contribuer ou auditer, c’est agréable.
Les limites de DESIGN.md Style Extractor
La grosse limite : l’outil infère. Il ne comprend pas réellement l’intention design. Il voit des couleurs, des espacements, des titres et des composants probables, puis il assemble une documentation plausible.
Exemple concret : sur mon test, il a généré color.surface.base=#000000, probablement à cause de valeurs calculées ou de fonds par défaut. Ce n’est pas catastrophique, mais ça montre qu’il faut relire la sortie avant de la donner à une équipe ou à un agent.
Autre limite : le popup Chrome est plus difficile à tester automatiquement en environnement Linux headless. Le coeur fonctionne, les modules produisent bien les fichiers, mais l’expérience utilisateur complète dans le popup mérite un test manuel dans Chrome desktop.
Côté sécurité, les permissions sont raisonnables pour une extension de ce type, mais elles restent puissantes. activeTab et scripting signifient que l’extension peut injecter du code dans la page active après action utilisateur. Je ne vois pas d’alerte rouge dans ce dépôt, mais je garderais la règle classique : charger l’extension seulement depuis une source vérifiée.
Est-ce que DESIGN.md Style Extractor marche vraiment ?
Oui, pour son objectif principal. Dans mon test, il a produit un DESIGN.md valide et un SKILL.md valide. Les deux fichiers contiennent les sections attendues : mission, brand, style foundations, accessibilité, règles, workflow, structure de sortie, attentes composants et quality gates.
La valeur n’est pas de remplacer un designer. La valeur est de créer une première carte du territoire. Pour du contenu généré par IA, c’est déjà beaucoup mieux qu’un prompt flou basé sur une impression visuelle.
Je le vois bien dans ces cas :
- reprendre rapidement les codes visuels d’un site existant ;
- documenter une base design avant une refonte ;
- créer un contexte pour un agent de code ;
- extraire des tokens de départ pour un prototype ;
- accélérer un brief entre freelance, client et outil IA.
Je l’utiliserais moins pour une charte de grande marque ou un produit avec beaucoup d’états interactifs complexes. Là, il faut un vrai travail de design system.
Faut-il adopter DESIGN.md Style Extractor ?
Mon verdict : essayer, puis adopter si votre workflow inclut déjà des agents IA ou de la génération de pages.
Pour un freelance sécu/DevOps comme moi, ce n’est pas l’outil du quotidien pour durcir des serveurs. Par contre, pour produire du contenu, préparer des maquettes, cadrer une refonte ou alimenter un assistant de code, il a une vraie utilité.
Je le mettrais dans la catégorie « petit outil pratique » : pas assez robuste pour remplacer une démarche design, mais assez bon pour gagner du temps et éviter les prompts visuels approximatifs.
FAQ
DESIGN.md Style Extractor envoie-t-il le site à un LLM ?
Dans le chemin que j’ai testé, non. La génération est faite localement par les modules JavaScript du dépôt, sans appel OpenAI ou OpenRouter.
Peut-on utiliser le Markdown généré tel quel ?
Oui pour démarrer, non pour publier sans relecture. Les tokens et règles sont utiles, mais certaines inférences peuvent être imprécises.
DESIGN.md Style Extractor est-il utile sans équipe design ?
Oui, surtout pour les freelances, développeurs et créateurs de contenu qui veulent donner un contexte visuel structuré à une IA. Il transforme une page existante en brief technique lisible.