Vous bossez sur un projet et vous vous dites "Tiens, le site de [insérez ici une grosse boîte] a un design plutôt bien foutu, j'aimerais bien voir comment ils ont structuré leurs css".

Hé bien y'a un outil pour ça, et il s'appelle Dembrandt .

Dembrandt en action

En gros, c'est un petit outil en ligne de commande qui va analyser n'importe quelle URL et en extraire tout le design system : les couleurs (primaires, secondaires, variables CSS), la typographie (familles, tailles, graisses), les espacements, les bordures, les ombres et même les patterns de composants UI.

Le truc s'installe en une ligne avec npm (npm install -g dembrandt) et après vous avez juste à taper dembrandt stripe.com par exemple. En moins d'une seconde, l'outil va alors faire un rendu de la page avec Playwright, analyser le DOM, détecter les styles et vous ressort tout ça bien structuré avec des scores de confiance pour chaque couleur.

Ce que j'aime bien, c'est que ça exporte directement en JSON ou au format W3C Design Tokens si vous voulez l'utiliser avec Style Dictionary. Pratique pour alimenter votre propre design system ou pour documenter celui d'un client qui n'a jamais pris le temps de le faire... (il en faut)

Y'a aussi quelques options sympas comme --dark-mode pour extraire la palette sombre, --mobile pour simuler un viewport iPhone, ou --browser=firefox si le site que vous voulez analyser a des protections Cloudflare qui bloquent Chromium.

Bon, ça marche pas sur les sites qui utilisent Canvas ou WebGL pour le rendu, et faut pas s'attendre à des miracles sur les SPA qui chargent tout en async. Mais pour la majorité des sites, c'est vraiment efficace.

Le projet est open source sous licence MIT, donc vous pouvez l'auditer, le forker, le modifier comme bon vous semble. Et niveau légalité, analyser du HTML/CSS public pour de la veille concurrentielle ou de la documentation, c'est considéré comme du fair use dans la plupart des juridictions, donc vous êtes good !

Bref, si vous faites du design system, de l'audit UX ou juste de la veille sur ce que font les autres, c'est un outil à garder sous le coude.

Merci à Lorenper pour le partage !