Outils
Design tokens de n’importe quel site web en variables CSS
Entrez l’adresse d’un site web et obtenez ses design tokens en propriétés personnalisées CSS : couleurs, styles de texte, espacements, arrondis, ombres et largeur de contenu, mesurés sur la page telle qu’elle s’affiche.
Comment ça marche
Stylepack ouvre le site dans un vrai navigateur, mesure ce qui s’affiche (et non ce que dit la feuille de style) à quatre largeurs et dans les deux thèmes, puis enregistre le résultat sous forme de pack de design. Un site déjà mesuré répond immédiatement ; un nouveau site prend moins d’une minute. Chaque valeur de cette page vient de ce pack.
Questions
Qu’est-ce qu’un design token ?
Une valeur de design nommée (une couleur, une taille de police, un pas d’espacement) utilisée dans tout un produit. En variables CSS, les tokens permettent de restyler un site entier en changeant une seule déclaration.
D’où viennent les noms ?
Du rôle que joue chaque valeur sur la page mesurée : --color-primary est l’accent, --text-headline-lg un style de titre, --space-4 un pas d’espacement. Le tokens.json du pack porte les mêmes noms au format W3C.
Est-ce tout le design system ?
Ce sont les valeurs. Le pack de design ajoute le comportement (hover, focus, menus, animations, mise en page responsive, mode sombre), les recettes de composants et les captures d’écran, sous la forme dont les agents de code IA ont besoin pour construire.