Cette fois on y est : après des années de reports, la mission Artemis 2, première mission habitée du programme lunaire américain depuis l’ère Apollo, entre dans sa phase finale de préparation. L’agence spatiale envisage désormais le déploiement imminent de sa fusée géante Space Launch System (SLS), ce …
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.
Daegu, positioning itself as the heart of Korea’s innovation industry, took another step forward in showcasing its technological ambitions with the Future Innovation Tech Expo 2025 (FIX 2025). On October 23, the city hosted the FIX Innovation Awards ceremony at EXCO, recognizing 30 companies for breakthroughs in future mobility, robotics, AI, and ICT.The event gathered around 100 attendees, including Daegu Deputy Mayor for Economy Sungjoo Hong, representatives from domestic and […]
Envie de plonger dans la robotique sans prise de tête ? Découvrez le TPBot EDU Car Kit d’Elecfreaks pour micro:bit ! Un robot accessible, ludique et bourré de potentiel, parfait pour petits et grands bidouilleurs. Montage rapide, programmation simple avec MakeCode ou Python, défis variés (suiveur de ligne, évitement d’obstacles…)… Que vous soyez enseignant, parent ou maker […]
Connexion
