Comment extraire un système de design de n'importe quel site web avec une seule commande terminal

Cela vous est-il déjà arrivé—vous regardez la landing page ou le service web de quelqu'un d'autre et vous vous demandez : « Quelles polices ont-ils choisies, quel espacement ont-ils utilisé, quelle palette de couleurs utilisent-ils ? » Habituellement, à ce stade, vous ouvrez DevTools, commencez le fastidieux parcours des éléments, copiez les codes hexadécimaux et parcourez les styles calculés. Si le projet est volumineux, cette routine peut prendre plusieurs heures.

Récemment, je suis tombé sur dembrandt, un utilitaire qui automatise ce processus de manière absurde. Vous lui fournissez une URL, et il génère des design tokens structurés : palette, typographie, grille d'espacement, ombres, rayons de bordure et animations.

Qu'est-ce que c'est et à qui est-ce destiné

dembrandt est un utilitaire en ligne de commande et une bibliothèque TypeScript conçue pour Node.js. Il lance un moteur de navigateur via Playwright, accède à la page spécifiée, extrait les styles calculés du DOM et les organise soigneusement.

L'outil gère plusieurs cas d'utilisation :

• Audits rapides et reverse engineering de l'interface de quelqu'un d'autre.
• Création de design tokens pour un projet legacy qui n'a jamais eu de système de design explicite.
• Surveillance de la « dérive » des styles dans les pipelines CI/CD.
• Exportation de contexte pour les assistants IA comme Cursor ou Claude Code.

Comment commencer

Vous aurez besoin de Node.js 18 ou supérieur. Comme il repose sur Playwright sans binaires intégrés, la première étape consiste à télécharger Chromium :

npm install -g dembrandt
dembrandt install-browser
dembrandt dembrandt.com

Si vous préférez ne pas installer globalement, npx fonctionne parfaitement :

npx dembrandt install-browser
npx dembrandt example.com

Le navigateur se télécharge une fois dans le cache système partagé de Playwright, puis l'utilitaire est prêt à l'emploi.

Ce qu'il y a à l'intérieur : formats et intégrations

L'outil ne se contente pas de vider un tas de propriétés CSS dans la console. Il groupe la typographie par taille et poids, analyse la fréquence d'utilisation des couleurs et calcule les niveaux de confiance pour les règles qu'il découvre.

Exporter les tokens vers les normes W3C et Tailwind

Si vous utilisez Style Dictionary ou Tokens Studio dans Figma, les tokens peuvent être exportés vers les spécifications W3C DTCG :

dembrandt example.com --dtcg

Pour les développeurs frontend qui travaillent avec Tailwind CSS moderne, il y a un flag --tailwind qui génère une directive @theme pour la version quatre du framework, ne contenant que les valeurs réellement utilisées.

Vérification du contraste WCAG

Le flag --wcag déclenche un audit d'accessibilité. L'utilitaire identifie les vraies paires texte-fond dans le DOM et les évalue par rapport aux niveaux de conformité WCAG 2.1 AA et AAA. C'est pratique pour vérifier rapidement l'accessibilité de l'interface sans extensions lourdes.

Suivi des changements de style dans la CI

L'un des cas d'utilisation les plus convaincants est d'empêcher les changements de style accidentels dans les pull requests. Vous pouvez capturer un instantané des tokens dans votre dépôt et valider les déploiements de prévisualisation dans GitHub Actions :

uses: dembrandt/[email protected]
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

Si quelqu'un modifie accidentellement la couleur primaire de la marque ou perturbe l'échelle d'espacement, l'action échouera et laissera un commentaire dans la PR listant les tokens modifiés. Pour les autres systèmes CI, l'utilitaire retourne un code de sortie non nul lors de la comparaison via le flag --compare baseline.json.

Connexion aux agents IA via le protocole MCP

Les développeurs ont ajouté le support du Model Context Protocol (MCP). Cela signifie que l'utilitaire peut se connecter directement à Claude Code, Cursor ou Windsurf :

claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

Après cela, le réseau neuronal reçoit un ensemble d'outils (get_color_palette, get_typography, get_spacing, generate_design_md) et peut étudier indépendamment l'interface et écrire du code basé sur les tokens actuels du site.

Défis potentiels

Le README décrit honnêtement les limitations techniques worth remembering :

• Le mode sombre n'est pas détecté automatiquement—vous devez le forcer avec le flag --dark-mode.
• Les sites basés sur Canvas ou WebGL ne peuvent pas être analysés car il n'y a pas d'arbre DOM conventionnel.
• Les SPA lourdes construites avec React ou Vue ont besoin de temps pour s'hydrater, il est donc préférable de passer le flag --slow dès le départ pour augmenter les délais d'attente.
• La fenêtre d'affichage mobile est activée séparément via le paramètre --mobile.

Conclusion

dembrandt comble le fossé entre le code web réel et la documentation formelle du système de design. Si vous avez besoin de nettoyer des styles dispersés dans un projet existant, configurer une vérification automatique des styles dans la CI, ou fournir à un assistant IA le contexte actuel de votre frontend, l'outil mérite définitivement d'être ajouté aux favoris. Grâce à son code open source (MIT), il est facile à intégrer dans vos scripts de build internes.