Design Snap
Récupérez la charte graphique de n'importe quel site
Design Snap est une extension Chrome gratuite qui génère la charte graphique du site que vous avez sous les yeux : la palette de couleurs classée par usage, l'échelle typographique, les radius, les ombres et les variables CSS, avec un aperçu live reconstruit à partir de ces valeurs. Partagez-la en carte Design DNA téléchargeable (PRO) ou exportez-la en tokens Tailwind, shadcn/ui, CSS, Figma ou Style Dictionary.
Noté 5,0/5 sur le Chrome Web Store · lire les avis · Plan gratuit · Sans compte · Analyse 100 % locale
Comment trouver la charte graphique d'un site internet
Documenter à la main la charte graphique d'un site existant prend des heures de DevTools. Design Snap fait l'inventaire en une seconde environ, à partir des styles calculés de la page.
-
Installer
Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte.
-
Extraire
Ouvrez le site et cliquez sur Extraire. Couleurs, typographie, radius, ombres et variables s'affichent par onglets, avec un aperçu live dans l'onglet Thème.
-
Partager ou exporter
Téléchargez la carte Design DNA (PRO) pour partager la charte, ou exportez-la en code pour votre projet.
Ce que contient la charte graphique d'un site
Une charte graphique web (ou guide de style) documente les règles visuelles d'une interface : la palette de couleurs (marque, neutres, couleurs de feedback), la typographie (familles, échelle, graisses), le langage des formes (border-radius, ombres) et, dans les projets modernes, les tokens qui encodent tout ça en variables. Design Snap extrait chacun de ces éléments depuis la page en ligne.
Trois raisons courantes d'en générer une
- Auditer votre propre site. Des années de correctifs laissent 14 gris et 9 radius. Extraire les vraies valeurs montre la dérive, classée par usage : vous savez lesquelles garder.
- Reprendre un projet sans documentation. Pas de fichier Figma, pas de dépôt de tokens — juste un site en production. L'extraction vous donne une charte de départ en quelques secondes.
- Préparer un moodboard ou un brief client. Capturez la charte de sites de référence et comparez-les grâce aux snapshots.
Une charte que vous pouvez livrer, pas seulement lire
Une charte en PDF finit par dater. Design Snap fournit la même information en code — tailwind.config.js, variables CSS, thème shadcn/ui, tokens Figma ou tokens Style Dictionary v3 standard — et la charte devient la source de vérité de votre projet. Pour travailler avec l'IA, les exports prompt IA et AGENTS.md la transforment en règles qu'un agent de code respecte.
L'inventaire, fait pour vous
Tout ce que documente une charte graphique, lu sur la page en ligne et rangé au même endroit.
- Palette classée par usage réel, valeurs hex exactes
- Échelle typo, graisses et interlignages
- Radius et ombres dédoublonnés avec aperçu
- Aperçu live reconstruit à partir des valeurs extraites
- Carte Design DNA téléchargeable (PRO) et neuf exports en code
Charte graphique d'un site — FAQ
Installez l'extension Chrome Design Snap, ouvrez le site et cliquez sur Extraire. Vous obtenez la palette de couleurs classée par usage, l'échelle typographique, les radius, les ombres et les variables CSS, à partager en carte Design DNA (PRO) ou à exporter en code.
Oui. L'export tokens Figma (gratuit) produit un fichier JSON Tokens Studio importable dans Figma.
Oui. Les snapshots sauvegardent les extractions pour y revenir — 5 avec le plan gratuit, illimités avec PRO.
Oui. Design Snap fonctionne sur toute page que Chrome peut ouvrir, y compris localhost et les environnements de recette derrière une connexion.
Outils et guides liés
Extraire un design system
La même extraction, centrée sur le système et les exports.
Qu'est-ce qu'un design token ?
Comment une charte graphique devient des tokens en code.
Export Style Dictionary
Des tokens { value, type } standard pour un pipeline de build.
Vérificateur de contraste WCAG
Vérifiez quelles paires de votre palette sont accessibles.