Extension Chrome Design Extractor
L’extension Chrome de Design Extractor transforme le site de votre onglet actif en DESIGN.md : un fichier de design system avec les couleurs, la typographie, les espacements, les formes et les règles de composants du site, rédigé pour des agents de code comme Claude Code, Cursor et Copilot. Un clic dans la barre d’outils, aucune URL à coller.
Installation gratuite. Chaque extraction consomme des crédits de votre solde prépayé, au même prix que sur le site.
Ce qu’elle fait
Un DESIGN.md à partir de l’onglet ouvert
Extrait la page de votre onglet
Un clic envoie l’adresse de l’onglet ouvert dans la même extraction que le formulaire de la page d’accueil. Le mode Pro échantillonne aussi les pages clés du site : le résultat reflète le site, pas un seul écran.
Rédige un design system complet
Des tokens YAML pour les couleurs, la typographie, les espacements et les formes, plus les huit sections du format DESIGN.md : Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components et Do’s and Don’ts.
Une recette pour chaque composant
Les composants qu’elle repère sur la page, comme l’en-tête, les boutons, les champs et les cartes, sont chacun livrés en HTML et CSS épurés, vérifiés par rapport au site en ligne ou signalés avec la raison.
Même compte, mêmes crédits
L’extension réutilise votre session sur design-extractor.com. Pas de seconde connexion, et la fenêtre affiche votre solde de crédits.
Comment ça marche
Trois étapes de l’onglet au DESIGN.md
Ajoutez-la à Chrome et épinglez-la
Installez-la depuis le Chrome Web Store et épinglez-la via l’icône en forme de pièce de puzzle. Elle demande l’accès à design-extractor.com et à l’onglet actif, rien d’autre. Connectez-vous une fois sur le site ; la fenêtre utilise cette session.
Ouvrez une page publique et cliquez sur Extract this page
Choisissez un mode dans la fenêtre et lancez l’extraction. La progression s’affiche dans la fenêtre pendant l’exécution, et vous pouvez continuer à naviguer.
Ouvrez le DESIGN.md
Open result vous mène au DESIGN.md sur le site. Il est aussi enregistré dans Mes extractions, où vous le copiez, le téléchargez ou le modifiez avant de l’ajouter à votre dépôt.
Les détails d’installation, la connexion, les crédits et les limites actuelles sont dans le guide d’installation de l’extension. Vous préférez coller une URL ? La même extraction fonctionne depuis la page d’accueil.
Comparaison
Ce qu’elle apporte par rapport à DESIGN.md Style Extractor de TypeUI
DESIGN.md Style Extractor de TypeUI est une extension gratuite et open source qui remplit le modèle propre à TypeUI avec les styles de la page de votre onglet. L’extension de Design Extractor ajoute :
Un DESIGN.md conforme à la spécification de Google
Les tokens dans le front matter YAML et les sections canoniques dans l’ordre de la spécification. Vérifiez n’importe quel fichier avec le validateur DESIGN.md gratuit.
Une recette pour chaque composant repéré
Du HTML et du CSS épurés pour l’en-tête, les boutons, les champs, les cartes et plus encore, chacun vérifié par rapport au site en ligne avec une correspondance structurelle et une comparaison au pixel, ou signalé avec la raison.
Sites restreints par région
Quand un site bloque les visiteurs de certains pays, l’extraction peut passer par un navigateur situé dans un autre pays. Une extraction depuis un autre pays coûte le prix Pro plus un supplément de 6 (soit 16 crédits au total).
Le même compte et les mêmes crédits que sur le site
Chaque extraction est enregistrée dans Mes extractions, où vous la modifiez, la copiez ou la téléchargez, et votre agent peut la lire via MCP.
Vérifié le sur sa version 0.4.0, son README et son code source et sa fiche sur le Chrome Web Store.
| Aspect | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Comment elle lit le site | Nos serveurs ouvrent l’adresse de la page dans un navigateur et analysent la page rendue. Le mode Pro échantillonne aussi les pages clés du site. | Lit les styles calculés d’au plus 280 éléments visibles de la page ouverte dans votre onglet, dans votre navigateur. |
| Ce que suit le résultat | La spécification DESIGN.md de Google : les tokens dans le front matter YAML et les sections canoniques dans l’ordre de la spécification. | Le modèle DESIGN.md propre à TypeUI (Mission, Brand, Style Foundations, Rules, etc.), sans front matter YAML, ou un SKILL.md. |
| Composants | Une recette en HTML et CSS épurés pour chaque composant repéré sur la page, vérifiée par rapport au site en ligne avec une correspondance structurelle et une comparaison au pixel, ou signalée avec la raison. | Un décompte par type de composant, sous des consignes générales sur les composants. Le résultat n’est pas comparé à la page rendue. |
| Où va le résultat | Enregistré dans Mes extractions sur le site, où vous pouvez le modifier, le copier ou le télécharger. | Affiché dans la fenêtre de l’extension, où vous le copiez ou le téléchargez sous forme de fichier. |
| Pages lisibles | Pages publiques uniquement. Les pages derrière une connexion, en localhost ou sur un réseau privé ne sont pas encore prises en charge. | La page ouverte dans votre onglet, y compris les pages où vous êtes connecté, puisqu’elle lit directement cette page. |
| Prix | Installation gratuite. Les extractions consomment des crédits prépayés. | Gratuite et open source (MIT). |
Choisissez l’extension de Design Extractor si vous avez besoin d’un DESIGN.md conforme à la spécification de Google, avec une recette pour chaque composant vérifiée par rapport au site en ligne, enregistré dans votre compte. La comparaison complète se trouve sur TypeUI vs Design Extractor.
FAQ
Questions sur l’extension Chrome
Des réponses courtes sur l’installation de l’extension, ce qu’elle envoie et ce qu’elle coûte.
Son installation est gratuite. Chaque extraction consomme des crédits de votre solde prépayé, au même prix que sur le site. Les packs commencent à 5 $US pour 50 crédits, il n’y a pas d’abonnement et les crédits n’expirent jamais. Si une extraction échoue de notre côté, les crédits sont remboursés.
Uniquement l’adresse de l’onglet actif et le mode choisi, quand vous cliquez sur Extract this page. Elle ne lit jamais le contenu de la page, ne tourne pas en arrière-plan sur les pages que vous visitez et ne contient aucun outil d’analyse d’audience.
Pas encore. Nos serveurs capturent la page à partir de son adresse : elle doit donc être publique. Les pages derrière une connexion, en localhost ou sur un réseau privé ne sont pas prises en charge. L’extension n’est disponible que pour Chrome.
Non. La fenêtre réutilise la session ouverte sur design-extractor.com. Si vous êtes déconnecté, elle affiche un bouton Sign in qui ouvre le site. Vous déconnecter dans la fenêtre vous déconnecte aussi du site.
Tout agent qui lit les fichiers de votre dépôt. Enregistrez le DESIGN.md à côté de votre code et indiquez-le à Claude Code, Cursor, GitHub Copilot, Codex, Windsurf ou Google Stitch comme référence de style pour toute nouvelle interface.
Des extensions comme DESIGN.md Style Extractor de TypeUI lisent les styles calculés dans votre navigateur et remplissent leur propre modèle avec les valeurs. Design Extractor rédige un DESIGN.md conforme à la spécification de Google, avec une recette en HTML et CSS pour chaque composant repéré sur la page, vérifiée par rapport au site en ligne ou signalée avec la raison, et l’enregistre dans votre compte.
Obtenez un DESIGN.md à partir de l’onglet ouvert
Installation gratuite. Chaque extraction consomme des crédits de votre solde prépayé, au même prix que sur le site.