Design Snap
Une alternative à CSS Peeper pensée pour les design tokens
CSS Peeper est un bon moyen de regarder les couleurs et les polices d'un site. Design Snap est fait pour les emporter : couleurs classées par usage réel, chaque variable :root, radius et ombres, exportés en config Tailwind, thème shadcn/ui, tokens Style Dictionary, tokens Figma ou prompt pour un agent IA — depuis le panneau latéral de Chrome, 100 % en local.
Noté 5,0/5 sur le Chrome Web Store · lire les avis · Plan gratuit · Sans compte
Design Snap vs CSS Peeper
Écrit par le développeur de Design Snap — le biais est donc annoncé d'entrée. Les capacités ci-dessous reflètent les deux outils au moment de la rédaction (septembre 2026) ; là où CSS Peeper est meilleur, le tableau le dit.
| Capacité | Design Snap | CSS Peeper |
|---|---|---|
| Couleurs classées par usage réel | Oui — par fréquence dans les styles calculés | Non — palette non ordonnée |
Toutes les variables CSS de :root |
Oui — avec valeurs et swatches | Non |
| Typographie, radius et ombres dédupliqués | Oui | Partiel — polices seulement |
| Export config Tailwind | Oui — gratuit | Non |
Export shadcn/ui + @theme Tailwind v4 |
Oui — PRO | Non |
| Tokens Style Dictionary v3 | Oui — PRO | Non |
| Tokens Figma (Tokens Studio) | Oui — gratuit | Non |
Export IA — prompt et AGENTS.md |
Oui — prompt gratuit, AGENTS.md PRO | Non |
| Audit de contraste WCAG 2.1 de la page | Oui — score gratuit, rapport complet PRO | Non |
| Recolorer la page en direct via ses variables | Oui — gratuit | Non |
| Reste ouvert pendant la navigation | Oui — panneau latéral Chrome | Non — popup |
| Inspecteur d'élément au survol | Oui — avec Copier le CSS | Oui — visuel |
| Téléchargement des images et assets | Non — ce n'est pas son rôle | Oui |
| Prix | Gratuit · PRO 9,99 € une fois (à vie) | Gratuit |
Quand CSS Peeper reste le bon choix
Un comparatif qui ne concède jamais rien ne vaut rien. Deux cas où changer serait une régression.
Vous voulez des assets, pas des tokens
CSS Peeper expose les images d'une page et permet de les récupérer. Design Snap ne le fait volontairement pas — il lit des décisions de style, pas des médias. Si télécharger des visuels est votre vrai besoin, CSS Peeper le fait et Design Snap non.
Vous voulez juste un coup d'œil
Pour « c'est quoi ce bleu, c'est quoi cette police » et rien de plus, la popup de CSS Peeper est agréable et immédiate. L'intérêt de Design Snap n'apparaît que si vous comptez réutiliser ce que vous avez trouvé dans du code.
Là où Design Snap va plus loin
Une palette classée, pas un tas de couleurs
Les couleurs reviennent ordonnées par fréquence réelle dans les styles calculés — la couleur de marque remonte donc en tête au lieu de côtoyer un gris de bordure utilisé une seule fois.
Les variables que le site déclare vraiment
Chaque custom property sur :root, avec sa valeur calculée et son swatch. Sur un site moderne, c'est le vrai design system — et c'est exactement ce qu'une popup couleurs-et-polices ne peut pas voir.
Neuf formats d'export
Config Tailwind et @theme v4, variables shadcn/ui, Style Dictionary v3, :root CSS, JSON, tokens Figma, prompt IA et fichier AGENTS.md — générés prêts à coller, sans nettoyage.
Un audit de contraste, pas juste des couleurs
Design Snap mesure le texte réellement rendu sur la page selon WCAG 2.1, en composant les fonds translucides avant de mesurer, et signale le texte sur image comme ignoré plutôt que de le deviner.
Les autres alternatives à CSS Peeper
Chacune résout un problème plus étroit. Bien choisir, c'est savoir quelle question on se pose.
Chrome DevTools
Intégrés, gratuits, et imbattables pour inspecter un élément en profondeur ou déboguer une mise en page. Ils n'ont aucune notion de design system à l'échelle de la page, et chaque valeur se recopie à la main.
VisBug
Une barre d'outils open source d'édition et de débogage visuel : sélectionner, déplacer, restyler et mesurer les éléments directement dans la page. C'est un outil d'édition, pas d'extraction — il n'y a aucun export de tokens au bout.
ColorZilla
Une pipette et un générateur de dégradés. Parfait pour prélever la couleur d'un pixel ; il ne classe pas les couleurs par usage, ne lit ni typographie ni ombres, et ne liste pas les variables CSS.
WhatFont et Fontface Ninja
Survoler pour identifier une police. Excellents sur cette seule question, muets sur les couleurs, radius, ombres, variables et exports.
Panorama complet : les meilleurs extracteurs de design tokens en 2026 · ou le comparatif Design Snap vs DevTools vs CSS Peeper.
Alternative à CSS Peeper — FAQ
Cela dépend de l'usage que vous en faisiez. Pour jeter un œil rapide aux couleurs et aux polices d'une page, CSS Peeper fait déjà très bien ce travail. Pour sortir un design system entier d'une page et l'amener dans le code — couleurs classées par usage réel, chaque variable CSS de :root, radius et ombres dédupliqués, exportés en config Tailwind, variables shadcn/ui, JSON Style Dictionary ou tokens Figma — Design Snap est conçu précisément pour ça. Pour déboguer un élément en profondeur, les DevTools de Chrome restent imbattables.
Oui, il existe un plan gratuit sans compte ni carte : extraction en un clic, inspecteur d'élément, score de contraste WCAG, édition des couleurs en direct et cinq formats d'export (variables CSS, tailwind.config.js, tokens JSON, tokens Figma et prompt IA), limités à 3 sites par jour et 5 snapshots. PRO est un paiement unique de 9,99 € à vie — sans abonnement — et ajoute les exports shadcn/ui, Tailwind v4 et Style Dictionary v3, l'export AGENTS.md, le rapport de contraste complet, l'extraction du vrai mode sombre et les snapshots illimités.
Oui, et c'est la différence principale en pratique. Design Snap transforme l'extraction en objet de thème tailwind.config.js prêt à coller (gratuit), en bloc @theme Tailwind v4, en variables sémantiques shadcn/ui pour globals.css et en tokens Style Dictionary v3 standard (PRO). CSS Peeper affiche des valeurs à lire et recopier à la main ; il n'a aucun format d'export de design tokens.
Non. CSS Peeper expose les couleurs, les polices et les images, pas les custom properties déclarées sur :root. Design Snap liste chaque variable CSS de :root avec sa valeur calculée et un swatch, et exporte l'ensemble en bloc :root prêt à coller ou en JSON.
Non. Toute l'analyse tourne 100 % localement dans votre navigateur, sans aucune bibliothèque tierce. Les seuls appels réseau possibles vont à Google Fonts, pour afficher l'aperçu du thème avec les vraies polices, et à polar.sh, pour valider une clé de licence PRO. L'extension ne transmet jamais les pages visitées, leur contenu ou votre historique, et ne contient aucun outil d'analytics.
Dans le panneau latéral. Depuis la version 3.0.0, Design Snap s'ancre dans le panneau latéral de Chrome et reste ouvert pendant que vous naviguez, changez d'onglet et faites défiler — la page et ses tokens sont donc visibles en même temps. CSS Peeper fonctionne en popup, qui se ferme dès que vous recliquez dans la page.