Design Snap
Extrayez les design tokens de n'importe quel site
Design Snap est une extension Chrome gratuite qui extrait les design tokens — couleurs, typographie, ombres et variables CSS — de n'importe quel site web, et les exporte en config Tailwind, thème shadcn/ui, JSON Style Dictionary ou tokens Figma.
Plan gratuit · Sans compte · Analyse 100 % locale
- 100 % local — zéro tracking
- 0 dépendance · Manifest V3
- 4 formats d'export, prêts à coller
- Interface français & anglais
Ce que Design Snap extrait
Design Snap transforme n'importe quel site en design system structuré : couleurs classées par usage réel, typographie custom, radius et ombres uniques avec aperçu, et toutes les CSS custom properties déclarées sur :root — capturés en un clic, organisés en onglets, prêts à exporter.
Un clic extrait tout le design system
Appuyez sur Extract : Design Snap lit les styles calculés de toute la page — pas un élément à la fois.
- Couleurs classées par fréquence d'usage réelle sur la page, valeurs hex
- Typographie : familles custom uniquement (les génériques sont filtrées), tailles, graisses, line-heights
- Border-radius et box-shadows uniques, chacun avec un aperçu live
- Toutes les CSS custom properties déclarées sur
:root
Inspectez le CSS de n'importe quel élément au survol
L'inspecteur intégré affiche les styles calculés de ce que vous survolez — sélecteur, couleurs avec swatches, police, taille, radius et ombre — dans un panneau flottant.
- Survolez pour inspecter, cliquez pour épingler le panneau
- Copy element CSS vous donne un bloc CSS propre, prêt à coller
Échappour fermer — sans fouiller les DevTools
Transformez un site en thème shadcn/ui ou Tailwind v4 PRO
Design Snap mappe la palette extraite sur des rôles de couleur sémantiques — background, foreground, primary, secondary, muted, border — et génère des fichiers de thème prêts pour la production.
- Variables shadcn/ui prêtes à coller dans
globals.css - Bloc
@themeTailwind v4 - Le vrai dark mode du site, extrait automatiquement — ou une variante sombre cohérente générée si le site n'en a pas
Prévisualisez le thème en live, gardez chaque snapshot
Un aperçu live reconstruit une mini-interface avec les couleurs, la typographie et les radius exacts extraits de la page — vous voyez le design system, pas juste une liste de valeurs.
- Aperçu clair et sombre avec les vraies polices du site
- 1 snapshot sauvegardé en local sur le plan gratuit
- Snapshots illimités avec PRO : la bibliothèque de tous les design systems analysés
Aperçu de thème live
Voyez le design system extrait appliqué à de vrais composants d'interface avant d'exporter.
Vrai dark modePRO
La variante sombre réelle du site, extraite — ou générée de façon cohérente s'il n'en a pas.
Design DNA cardPRO
Une carte visuelle téléchargeable qui résume le design system d'un site — faite pour être partagée.
Snapshots illimitésPRO
Chaque extraction sauvegardée en local. Retrouvez le design system de n'importe quel site déjà analysé.
Interface bilingue
L'extension et ce site existent intégralement en français et en anglais. Changez à tout moment.
Privé par conception
100 % vanilla JS, 0 dépendance, aucun backend. L'analyse ne quitte jamais votre navigateur.
Exportez les tokens en Tailwind, shadcn/ui, JSON ou Figma
Chaque extraction se copie en 4 formats sur le plan gratuit — JSON Style Dictionary, variables CSS, tailwind.config.js et Figma (Tokens Studio) — plus shadcn/ui et @theme Tailwind v4 avec PRO. Chaque export est généré prêt à coller, sans nettoyage.
{
"color": {
"primary": { "value": "#6366f1" },
"background": { "value": "#f8fafc" }
},
"font": {
"sans": { "value": "Inter" }
},
"radius": {
"md": { "value": "8px" }
}
}:root {
--color-primary: #6366f1;
--color-background: #f8fafc;
--font-sans: 'Inter', sans-serif;
--radius-md: 8px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.1);
}theme: {
extend: {
colors: {
primary: '#6366f1',
surface: '#f8fafc',
},
fontFamily: { sans: ['Inter'] },
borderRadius: { md: '8px' },
},
}{
"global": {
"color-primary": {
"value": "#6366f1",
"type": "color"
},
"font-sans": {
"value": "Inter",
"type": "fontFamilies"
}
}
}:root {
--background: 0 0% 98%;
--foreground: 222 47% 11%;
--primary: 239 84% 67%;
--primary-foreground: 0 0% 100%;
--muted: 215 20% 65%;
--radius: 0.5rem;
}@theme {
--color-primary: #6366f1;
--color-surface: #f8fafc;
--font-sans: 'Inter', sans-serif;
--radius-md: 8px;
--shadow-sm: 0 1px 3px rgb(0 0 0 / .1);
}Les valeurs ci-dessus viennent d'une vraie extraction. Design Snap remplit chaque format avec les tokens du site que vous analysez.
Pour aller plus loin : générateur de thème Tailwind · générateur de thème shadcn/ui · extraire les variables CSS · extracteur de palette · vs DevTools & CSS Peeper
Comment extraire les design tokens d'un site web
Extraire les design tokens d'un site avec Design Snap tient en trois étapes : installer l'extension, cliquer sur Extract sur n'importe quelle page, puis copier les tokens dans le format de votre stack. Sans compte, sans configuration, et rien ne quitte jamais votre navigateur.
-
Installer
Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte, sans inscription.
-
Extraire
Ouvrez n'importe quel site, cliquez sur l'icône Design Snap, puis sur Extract. Couleurs, polices, radius, ombres et variables CSS apparaissent en une seconde environ.
-
Exporter
Copiez les tokens en config Tailwind, thème shadcn/ui, JSON Style Dictionary, variables CSS ou tokens Figma — et collez-les dans votre projet.
Des tarifs simples, sans compte
Design Snap est gratuit avec toutes les fonctionnalités de base. PRO coûte 4,99 €/mois, 39 €/an (4 mois offerts) ou 49 € une seule fois pour une licence à vie — paiement via Polar, activation par clé envoyée par email.
Gratuit
Tout ce qu'il faut pour démarrer
0 €
- Extraction de tokens en un clic
- Couleurs, typo, radius, ombres, variables :root
- 4 formats d'export (JSON, CSS, Tailwind, Figma)
- Inspecteur d'éléments
- Aperçu de thème live
- 1 snapshot sauvegardé
PRO Mensuel
Tout PRO, sans engagement
4,99 €/mois
- Tout le plan Gratuit
- Exports shadcn/ui & Tailwind v4
- Extraction du vrai dark mode
- Design DNA card
- Snapshots illimités
PRO Annuel
3,25 €/mois, facturé à l'année
39 €/an
- Tout le plan Gratuit
- Exports shadcn/ui & Tailwind v4
- Extraction du vrai dark mode
- Design DNA card
- Snapshots illimités
À vie
Offre de lancement 50 premières licences
49 € une fois
- Toutes les fonctionnalités PRO, à vie
- Toutes les mises à jour futures incluses
- Un paiement, zéro abonnement
- Licence déplaçable entre appareils
Clé de licence envoyée par email après l'achat · Activation/désactivation par appareil · Paiement via Polar · Aucun compte à créer
Questions fréquentes
Oui. Le plan gratuit comprend l'extraction en un clic des couleurs, de la typographie, des radius, des ombres et des variables CSS, l'inspecteur d'éléments, l'aperçu de thème live, 4 formats d'export et 1 snapshot sauvegardé. PRO (4,99 €/mois, 39 €/an ou 49 € à vie) ajoute les exports shadcn/ui et Tailwind v4, l'extraction du vrai dark mode, la Design DNA card et les snapshots illimités.
Design Snap lit les styles calculés (computed styles) de la page de l'onglet actif, entièrement dans votre navigateur. Il classe les couleurs par fréquence d'usage réelle, ne garde que les familles de polices custom, dédoublonne border-radius et box-shadows, et liste toutes les CSS custom properties déclarées sur :root. Un clic, environ une seconde.
Non. Toute l'analyse se fait 100 % localement dans votre navigateur. Les deux seuls appels réseau possibles vont vers Google Fonts (afficher l'aperçu de thème avec les vraies polices) et polar.sh (valider une clé de licence PRO). L'extension ne transmet jamais les pages que vous visitez, leur contenu ni votre historique. Aucun analytics, aucune librairie tierce. Lire la politique de confidentialité.
Le plan gratuit exporte en JSON Style Dictionary, variables CSS (bloc :root), objet de thème tailwind.config.js et tokens Figma (JSON Tokens Studio). PRO ajoute les variables sémantiques shadcn/ui prêtes pour globals.css et un bloc @theme Tailwind v4. Chaque export est généré prêt à coller dans votre projet.
PRO ajoute les exports de thème shadcn/ui et Tailwind v4, le vrai dark mode du site extrait automatiquement (ou une variante sombre cohérente générée si le site n'en a pas), la Design DNA card téléchargeable et les snapshots illimités. La clé de licence arrive par email après l'achat et s'active ou se désactive par appareil — sans compte à créer.
Vous payez 49 € une seule fois et gardez toutes les fonctionnalités PRO, mises à jour futures comprises, pour toujours. L'offre de lancement est limitée aux 50 premières licences. Votre clé arrive par email juste après le paiement via Polar et peut être déplacée d'un appareil à l'autre à tout moment.
Il fonctionne sur toute page web classique que Chrome autorise les extensions à lire : sites en production, environnements de staging, localhost. Les pages internes du navigateur (chrome://) et le Chrome Web Store lui-même sont restreints par Chrome pour toutes les extensions.
Les DevTools montrent les styles d'un élément à la fois. Design Snap analyse toute la page d'un coup et restitue un design system organisé : couleurs classées par usage, typographie dédoublonnée, radius et ombres, toutes les variables CSS de :root — déjà formatés en config Tailwind, thème shadcn/ui, JSON Style Dictionary ou tokens Figma.
Jamais. La version gratuite s'installe et fonctionne immédiatement. PRO utilise une clé de licence envoyée par email après l'achat ; les snapshots et la clé sont stockés localement dans votre navigateur via chrome.storage.local.
Oui. Avec PRO, Design Snap mappe la palette extraite sur les rôles sémantiques shadcn/ui — background, foreground, primary, secondary, muted, border… — et produit un bloc prêt pour globals.css, plus un équivalent @theme Tailwind v4, chacun avec une variante sombre réelle ou générée.
Toute l'analyse se fait localement dans votre navigateur
Rien n'est jamais envoyé à un serveur. Pas d'analytics, pas de tracking, pas de compte, pas de librairie tierce — toute l'extension est du JavaScript vanilla qui tourne sur votre machine.
Lire la politique de confidentialité