Extrayez le design system de n'importe quel site

Ce que veut dire « extraire un design system »

Un design system, c'est le petit ensemble de décisions qu'un site répète partout : quelques couleurs de marque et de neutres, une ou deux familles de polices sur une échelle typographique, un radius, deux ou trois ombres, un rythme d'espacement. La plupart des sites ne publient jamais le leur. Mais chacune de ces décisions est encodée dans le CSS que le navigateur calcule pour chaque élément.

Extraire un design system, c'est lire ces valeurs calculées sur toute la page, puis les agréger : compter combien de fois chaque couleur est utilisée, dédoublonner tailles de police et radius, et séparer les cinq couleurs qui définissent la marque des quarante qui n'apparaissent qu'une fois dans un footer. Des valeurs brutes ne font pas un système. Des valeurs classées et dédoublonnées, si.

Ce que Design Snap capture

• Les couleurs classées par fréquence d'usage réelle, avec des valeurs hex exactes issues des styles calculés — pas échantillonnées sur des pixels.
• La typographie : uniquement les familles personnalisées (les polices génériques de repli sont filtrées), tailles, graisses et interlignages.
• Les border-radius et box-shadows, dédoublonnés, avec aperçu.
• Toutes les custom properties CSS déclarées sur :root — souvent ce qui se rapproche le plus du fichier de tokens du site.
• Le mode sombre (PRO) : le vrai thème sombre du site s'il en a un, ou un thème cohérent généré sinon.
• Un audit de contraste WCAG 2.1 des textes de la page, pour savoir quelles paires du système sont réellement accessibles.

Quatre façons d'extraire un design system, comparées honnêtement

Les DevTools de Chrome sont gratuits et exacts, mais n'affichent qu'un élément à la fois. Reconstituer une palette oblige à cliquer sur des dizaines d'éléments et à tout noter à la main. Parfait pour une valeur, lent pour un système.

Les extracteurs en ligne de commande (outils à navigateur headless qui prennent une URL et écrivent des tokens JSON) sont le meilleur choix quand il faut automatiser — en CI, pour suivre les dérives d'une version à l'autre ou traiter beaucoup d'URL. Ils demandent Node et l'installation d'un navigateur, et voient la page comme un robot non connecté.

Demander à un agent IA de « lire » une URL est rapide, mais un modèle qui récupère du HTML voit rarement le CSS calculé : il devine les hex à partir des noms de classes et des captures. Bien pour l'ambiance, peu fiable pour les valeurs exactes.

Une extension comme Design Snap travaille sur la page exactement telle que vous la voyez — connecté, après interactions, avec le bon thème — et renvoie un système organisé en une seconde environ. C'est la voie la plus rapide pour un humain qui analyse un site à la fois.

Réutilisez le système, pas la marque

Extraire un design system, c'est ainsi que les designers apprennent des meilleures interfaces et que les développeurs démarrent un thème qui sonne juste. Servez-vous de l'extraction comme référence et point de départ : adaptez la palette, changez les polices, appropriez-vous le résultat. Ne reprenez pas le logo, les illustrations ou l'identité déposée d'une autre entreprise.