Couleurs
La palette de la page regroupée par usage : fonds, textes, bordures, accents
Exporter Pro
Extrayez le design system de n’importe quel site web
Smart Design Inspector parcourt une page, en extrait les tokens de design (couleurs, échelle typographique et espacements) et les exporte en Tailwind v4 @theme, en variables CSS ou dans un DESIGN_SPECS.md prêt pour votre projet ou votre assistant IA.
Fonction Pro en accès anticipé gratuit jusqu’au lancement de la Pro (date à définir)
tucliente.example
/* Tailwind v4 */
@theme {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--text-h1--line-height: 1.1;
--spacing-section: 96px;
}/* Variables CSS */
:root {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--spacing-section: 96px;
}# Design system · tucliente.example
## Couleurs
- primary #2563eb · boutons et liens
- ink #0b0b0b · texte
## Typographie
- H1 · Inter 600 · 48 px / 1,1
## Espacements
- Section · 96 px01
Le travail qu’il vous épargne
Le problèmeLe client vous envoie un site de référence : « je veux quelque chose comme ça ». Pour reproduire son style, il vous faut ses couleurs, ses tailles de police et ses espacements. Les relever à la pipette et dans les DevTools, c’est des dizaines de clics, et à la fin vous avez une liste de valeurs en vrac, pas un système utilisable.
02
Ce qu’il exporte
3 tokensTypographie
Chaque style (H1-H6, corps, boutons) avec famille, taille, graisse, interlignage et espacement, plus le @font-face ou le lien Google Fonts
Espacements
L’échelle des marges et paddings qui se répète sur la page
03
Trois formats de sortie
Copier ou téléchargerTailwind v4 @theme
À coller dans votre CSS :
@theme {
--color-primary: …;
--font-heading: …;
--spacing-section: …;
}Variables CSS
Dans :root, pour n’importe quel projet sans Tailwind.
DESIGN_SPECS.md
Un document qui explique tout le système. Utile pour l’équipe, et à donner à Claude, Cursor ou tout autre assistant IA quand vous lui demandez de construire dans ce style.
04
Mode d’emploi
3 étapes- 01
Ouvrez le site de référence.
- 02
Choisissez Design → Exporter le système.
- 03 Pro
Choisissez le format, puis copiez-le ou téléchargez-le.
| Gratuit0 €pour toujours | Pro49 €paiement unique | |
|---|---|---|
| Voir la palette, les polices et l’échelle typographique de la page | ||
| Exporter le design system : Tailwind v4 @theme, variables CSS ou DESIGN_SPECS.md | — | Accès anticipé gratuit |
06
Éthique et licences
Inspirez-vousLe style d’un site (couleurs, tailles, espacements) n’est pas protégé. Les textes, les images, les logos et les polices commerciales, si. L’extension exporte des valeurs, pas du contenu, et vous signale la licence de chaque police. Servez-vous-en pour vous inspirer, pas pour copier une marque.
Est-ce gratuit ?
C’est une fonction Pro. Jusqu’au lancement de la Pro (date à définir), elle est en accès anticipé gratuit pour tous. Ensuite, elle sera incluse dans la Pro à 49 €, en paiement unique.
Quelle version de Tailwind utilise-t-il ?
Tailwind v4, avec la directive @theme. Si vous utilisez une autre version, exportez en variables CSS.
Extrait-il le système de tout le site ou d’une seule page ?
De la page ouverte. Si les autres pages utilisent le même système, le résultat est identique.
Fonctionne-t-il avec une IA comme Claude ou Cursor ?
Oui. Le DESIGN_SPECS.md est rédigé pour qu’un assistant IA le lise et construise dans ce style.
Exporte-t-il des composants ?
Non. Il exporte des tokens. Pour copier une section sous forme de composant, utilisez la conversion d’un site web vers Tailwind.
Sur quels navigateurs et systèmes fonctionne-t-elle ?
Sur Chrome, Edge, Brave, Arc, Opera et Vivaldi, sous Windows, Mac et Linux, dès la 1.0. Elle fonctionne partout de la même façon, car c’est le navigateur qui exécute l’extension, pas le système. Le code est prêt à être porté sur Firefox et Safari sans réécriture. Pendant le développement, des changements sont possibles.
08
Continuer avec
Fonctions voisinesCouleurs
La palette de la page, la pipette et le contraste WCAG de chaque paire texte-fond.
Couleurs d’un site web →Polices
Famille, graisses, origine, licence et échelle typographique de toute la page.
Polices d’un site web →Site vers Tailwind
Copiez une section en JSX + Tailwind ou en HTML/CSS.
Convertir un site web en Tailwind →Tarifs
Gratuit pour toujours. Pro, 49 € en une seule fois.
Voir les tarifs →Liste d’attente
Soyez parmi les premiers à l’essayer
Smart Design Inspector est en cours de développement. Laissez-nous votre e-mail et nous vous préviendrons le jour de sa sortie sur le Chrome Web Store, avec les 7 fonctions Pro gratuites en accès anticipé.
Un e-mail le jour du lancement et très peu d’autres · Désinscription en un clic