Extrayez les design tokens de n'importe quel site

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'édition des couleurs en direct, un score de contraste WCAG, 5 formats d'export (variables CSS, tailwind.config.js, tokens JSON, tokens Figma et le prompt IA), 3 sites/jour et 5 snapshots sauvegardés. PRO (9,99 € une seule fois, à vie) ajoute les exports shadcn/ui, Tailwind v4 et Style Dictionary v3, l'export AGENTS.md, le rapport de contraste complet avec correctifs, 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é.

Neuf formats. Gratuit : variables CSS (bloc :root), objet de thème tailwind.config.js, tokens JSON, tokens Figma (JSON Tokens Studio) et un prompt IA — un bloc markdown à coller dans Claude, ChatGPT, v0 ou Cursor. PRO ajoute les variables sémantiques shadcn/ui prêtes pour globals.css, un bloc @theme Tailwind v4, un export Style Dictionary v3 standard ({ value, type } pour color, dimension, fontFamily, fontWeight, boxShadow et typography composite), et un fichier AGENTS.md à déposer à la racine d'un dépôt pour qu'un agent de code relise votre design system à chaque session. Chaque export est généré prêt à coller dans votre projet.

PRO ajoute les exports shadcn/ui, Tailwind v4 et Style Dictionary v3 standard, l'export AGENTS.md pour les agents de code, le rapport de contraste WCAG complet avec un correctif proposé pour chaque échec, l'export d'une édition de thème en patch CSS, 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 9,99 € une seule fois et gardez toutes les fonctionnalités PRO, mises à jour futures comprises, pour toujours. 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 et un audit de contraste WCAG des textes de la page — déjà formatés en config Tailwind, thème shadcn/ui, tokens Style Dictionary, tokens Figma ou prompt pour un agent IA. Le tout dans le panneau latéral de Chrome, qui reste ouvert pendant que vous naviguez.

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. Design Snap transforme une extraction en contexte IA, sous deux formes. Le prompt IA, gratuit, est un bloc markdown qui liste les rôles de couleur sémantiques et l'usage de chacun, les échelles typo, radius, ombre et spacing, un bloc CSS prêt à coller et des règles explicites (bg-primary, jamais bg-[#2563eb]) — à coller dans Claude, ChatGPT, v0 ou Cursor. L'export AGENTS.md, en PRO, est un fichier à déposer à la racine d'un dépôt pour que Claude Code ou Cursor relise votre design system à chaque session, avec une section Out of scope qui dit à l'agent ce qu'il n'a pas le droit d'inventer. Les valeurs complétées par un repli sont marquées comme telles : un agent ne prend jamais une valeur par défaut pour une couleur de marque.

Oui. Design Snap mesure le contraste réel des textes de la page selon WCAG 2.1 (AA 4,5:1, ou 3:1 pour le texte large ; AAA 7:1). Les fonds translucides et les textes semi-transparents sont composés avant mesure : le ratio annoncé est celui qui est réellement rendu. Un texte posé sur une image ou un dégradé est signalé comme ignoré plutôt que deviné. Le plan gratuit affiche le score et les 3 pires échecs ; PRO affiche la liste complète, chacun avec un correctif qui ne bouge que la luminosité — teinte et saturation restent intactes.

Depuis la version 3.0.0, Design Snap s'ouvre dans le panneau latéral de Chrome. Il reste ouvert pendant que vous naviguez, changez d'onglet et scrollez : vous inspectez la page avec ses tokens sous les yeux. Ouvrez-le depuis l'icône de la barre d'outils, avec Ctrl+Maj+D (⌘⇧D sur macOS), ou par un clic droit n'importe où sur une page.

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.