TypeUI vs Design Extractor
DESIGN.md Style Extractor de TypeUI est une extension Chrome gratuite qui lit les styles de la page de votre onglet et remplit le modèle DESIGN.md propre à TypeUI. Le fichier de Design Extractor suit la spécification DESIGN.md de Google et livre chaque composant repéré sur la page sous forme de recette HTML et CSS que votre agent de code peut reconstruire. Chaque recette est vérifiée sur le site en ligne ou signalée avec la raison. Il fonctionne aussi sur les sites qui ne répondent qu’aux visiteurs de certains pays.
Vous découvrez le format ? Lisez d’abord ce qu’est un DESIGN.md.
Vérifié le sur le README et le code source de l’extension, sa fiche sur le Chrome Web Store et le README de TypeUI. Les offres et les prix évoluent : vérifiez sur leur site avant de vous décider.
Pourquoi Design Extractor
Suit la spécification DESIGN.md de Google
Le front matter YAML n’utilise que les propriétés définies par la spécification, sans clé de premier niveau personnalisée. Les sections canoniques suivent l’ordre de la spécification, d’Overview à Do’s and Don’ts. Les entrées de composants du front matter n’utilisent que les huit propriétés de la spécification, avec des valeurs littérales. Vérifiez n’importe quel fichier avec le validateur DESIGN.md gratuit.
Une recette pour chaque composant repéré sur la page
L’en-tête, le pied de page, les boutons, les champs, les cartes et les autres composants repérés sur la page sont chacun livrés sous forme de recette : du HTML et du CSS épurés avec des valeurs littérales, dans la section Components du DESIGN.md. Chaque recette liste ses parties et les états de survol et de focus observés sur le site, pour que votre agent de code puisse reconstruire le composant au lieu de le deviner.
Vérifié sur le site en ligne
Chaque recette est rendue seule et vérifiée sur le site en ligne : une correspondance structurelle des parties rendues avec ce qui a été mesuré sur la page, et une comparaison au pixel avec une nouvelle capture de l’élément réel. Une recette qui échoue est reconstruite et vérifiée à nouveau. Celle qui ne passe toujours pas est signalée avec la raison, jamais livrée comme vérifiée. La page de résultat indique dans quelle mesure les composants correspondent et quelle part des couleurs et des styles de texte du site est couverte : voir Stripe dans la galerie.
Fonctionne sur les sites restreints par région
Certains sites ne répondent qu’aux visiteurs de certains pays. Quand une extraction échoue pour cette raison, la page de résultat propose un sélecteur de pays, avec en premier les pays depuis lesquels la page se charge, et lance la même extraction via un navigateur situé dans le pays choisi. Une extraction depuis un autre pays coûte le prix Pro plus un supplément de 6 (soit 16 crédits au total). Si l’extraction échoue, nous vous remboursons vos crédits.
Côte à côte
| TypeUI | Design Extractor | |
|---|---|---|
| Conformité à la spécification | Non proposé | Suit la spécification DESIGN.md de Google : un front matter limité aux propriétés de la spécification, sans clé de premier niveau personnalisée, les sections canoniques dans l’ordre de la spécification, et des entrées de composants limitées aux huit propriétés de la spécification, avec des valeurs littérales. |
| Recettes de composants | Les composants apparaissent sous forme de décompte par type (boutons, liens, champs, cartes, navigation, listes, tableaux), sous des consignes générales sur les composants. | Chaque composant repéré sur la page, comme l’en-tête, le pied de page, les boutons, les champs et les cartes, est livré sous forme de recette : du HTML et du CSS épurés dans la section Components, pour que votre agent de code puisse le reconstruire. |
| Vérifié sur le site en ligne | Non proposé | Oui. Chaque recette est rendue seule et vérifiée sur le site en ligne : une correspondance structurelle de ses parties et une comparaison au pixel. Un composant qui ne passe pas est signalé avec la raison, jamais livré comme vérifié. |
| Sites restreints par région | Non proposé | Oui. Quand un site bloque les visiteurs de certains pays, l’extraction échouée propose un sélecteur de pays, avec en premier les pays depuis lesquels la page se charge, et lance la même extraction via un navigateur situé là-bas. Une extraction depuis un autre pays coûte le prix Pro plus un supplément de 6 (soit 16 crédits au total). |
| Ce que c’est | DESIGN.md Style Extractor, une extension Chrome gratuite de Bergside SRL, l’éditeur de TypeUI. Version 0.4.0, environ 40 000 utilisateurs sur le Chrome Web Store, open source sous licence MIT. | Un générateur : donnez-lui une URL publique sur le site, via MCP ou depuis l’extension Chrome, et obtenez le DESIGN.md de ce site. |
| Ce que suit le résultat | Le modèle DESIGN.md propre à TypeUI : Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules, etc., sans front matter YAML. Elle peut aussi écrire un SKILL.md. | 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. |
| Comment il lit le site | Lit les styles calculés d’au plus 280 éléments visibles de la page de votre onglet, dans votre navigateur, sans requête réseau. | Nos serveurs ouvrent l’URL dans un navigateur et analysent la page rendue. Le mode Pro échantillonne aussi les pages clés du site. |
| Pages lisibles | La page ouverte dans votre onglet, y compris les pages où vous êtes connecté. | Pages publiques uniquement. Les pages derrière une connexion, en localhost ou sur un réseau privé ne sont pas encore prises en charge. |
| Où va le résultat | Affiché dans la fenêtre de l’extension, où vous le copiez ou le téléchargez. Un bouton Quick install écrit le SKILL.md dans le dossier de skills Claude Code, Codex ou Cursor d’un projet de votre choix. | Enregistré dans Mes extractions sur votre compte, où vous le modifiez, le copiez ou le téléchargez. Votre agent peut le lire via MCP. |
| Prix | Gratuit. Ni compte ni paiement. | Crédits prépayés, sans abonnement. Les packs commencent à 5 $US pour 50 crédits ; une extraction Pro coûte 10 crédits. La galerie et les outils gratuits ne coûtent rien. |
| Accès pour les agents | L’extension fonctionne depuis sa fenêtre. La CLI distincte de TypeUI et son serveur MCP hébergé servent ses skills de design sélectionnés et ses prompts d’interface. | Un serveur MCP distant dont l’outil d’extraction accepte n’importe quelle URL, depuis Claude Code, claude.ai, ChatGPT, Codex, Cursor et d’autres clients. |
Ce que propose TypeUI
- Une extension Chrome gratuite et open source (MIT), avec environ 40 000 utilisateurs sur le Chrome Web Store, sans compte ni paiement.
- Fonctionne entièrement dans votre navigateur, sur la page de votre onglet, y compris les pages où vous êtes connecté.
- Les valeurs de typographie, de couleurs, d’espacements, de rayons, d’ombres et d’animations dans un DESIGN.md au format propre à TypeUI, ou un SKILL.md.
- Copiez ou téléchargez le fichier depuis la fenêtre de l’extension, ou installez le SKILL.md avec Quick install dans un projet Claude Code, Codex ou Cursor.
- Au-delà de l’extension, TypeUI propose des skills de design sélectionnés, des prompts d’interface, une CLI open source et un serveur MCP hébergé, ainsi qu’une version Pro avec des fichiers de skills de design enrichis, des prompts d’interface pour les mises en page et une communauté Discord privée.
Ce qui les distingue
L’extension de TypeUI résume les valeurs de style qu’elle trouve sur une page et ajoute des consignes générales issues de son modèle. Design Extractor affiche le site, repère ses composants et rédige une recette pour chacun, puis vérifie chaque recette sur le site en ligne : votre agent sait ainsi quels composants il peut reconstruire tels quels et lesquels ont été signalés, avec la raison. Voyez-le sur Stripe dans la galerie.
Vous préférez partir de l’onglet ouvert ? L’extension Chrome de Design Extractor l’envoie dans la même extraction, avec le même compte et les mêmes crédits. Votre agent peut aussi lancer une extraction et lire le résultat via le serveur MCP. Consultez d’autres fichiers terminés dans la galerie.
Comment passer de TypeUI à Design Extractor
- Collez l’URL du site sur la page d’accueil de Design Extractor, ou cliquez sur Extract this page dans l’extension Chrome, et lancez une extraction Pro.
- Enregistrez le résultat sous le nom DESIGN.md à la racine de votre dépôt, à la place de l’ancien fichier. Votre référence dans AGENTS.md ou CLAUDE.md continue de fonctionner.
- Si vous avez utilisé Quick install, supprimez le dossier de skill design-system écrit par TypeUI et gardez votre référence au DESIGN.md.
- Pour que votre agent lance lui-même des extractions, connectez le serveur MCP.
Verdict
Choisissez Design Extractor si vous avez besoin d’un DESIGN.md qui suit la spécification de Google, avec une recette pour chaque composant repéré sur la page, chacune vérifiée sur le site en ligne ou signalée avec la raison, enregistré dans votre compte. Il accède aux sites restreints par région. Votre agent peut le lancer via MCP. L’extension de TypeUI est gratuite et lit les pages où vous êtes connecté, comme le montre le tableau.
Autres comparatifs
getdesign.md vs Design Extractor
Une collection organisée de fichiers DESIGN.md prêts à l’emploi, comparée à un DESIGN.md conforme à la spécification, avec des recettes de composants vérifiées sur le site en ligne, à partir de n’importe quelle URL.
designmd.me vs Design Extractor
Deux générateurs URL vers DESIGN.md comparés sur la conformité à la spécification, les recettes de composants, les vérifications sur le site en ligne et le prix.
Refero Styles vs Design Extractor
Une grande bibliothèque gratuite de styles de sites, comparée à un DESIGN.md conforme à la spécification, avec des recettes de composants vérifiées sur le site en ligne, à partir de n’importe quelle URL.
FAQ
TypeUI vs Design Extractor : questions
Des réponses courtes sur TypeUI et Design Extractor, vérifiées le 2026-10-20.
Oui. Le 2026-10-20, l’extension était gratuite et open source sous licence MIT, sans compte ni paiement. Design Extractor n’est pas gratuit : les extractions consomment des crédits prépayés, avec des packs à partir de 5 $US pour 50 crédits et 10 crédits pour une extraction Pro. La galerie et les outils gratuits ne coûtent rien.
Non. Le fichier suit le format open source TypeUI DESIGN.md, avec des sections comme Mission, Brand, Style Foundations et Rules, et la version 0.4.0 n’écrit pas de front matter YAML : il ne suit donc pas la spécification DESIGN.md de Google. Design Extractor suit la spécification de Google, et le validateur DESIGN.md gratuit vérifie n’importe quel fichier par rapport à celle-ci.
Un DESIGN.md qui suit la spécification de Google, avec les tokens dans le front matter et chaque composant repéré sur la page, comme l’en-tête, le pied de page, les boutons, les champs et les cartes, sous forme de recette en HTML et CSS épurés. Chaque recette est vérifiée sur le site en ligne avec une correspondance structurelle et une comparaison au pixel, et celle qui ne passe pas est signalée avec la raison.
Oui. Elle lit la page de votre onglet dans votre navigateur : elle fonctionne donc sur les pages où vous êtes connecté. Design Extractor ne lit que les pages publiques : les pages derrière une connexion, en localhost ou sur un réseau privé ne sont pas encore prises en charge.
Design Extractor peut lancer l’extraction depuis un autre pays. Quand une extraction échoue pour cette raison, la page de résultat propose un sélecteur de pays, avec en premier les pays depuis lesquels la page se charge, et lance la même extraction via un navigateur situé là-bas. Une extraction depuis un autre pays coûte le prix Pro plus un supplément de 6 (soit 16 crédits au total). Si l’extraction échoue, nous vous remboursons vos crédits.
Oui. Les deux produisent un DESIGN.md qui se trouve dans votre dépôt : la configuration de votre agent reste la même. Passez le site dans Design Extractor, sur le site ou avec son extension Chrome, et remplacez le fichier. Si vous avez utilisé Quick install, supprimez le dossier de skill design-system écrit par TypeUI et gardez votre référence au DESIGN.md.
Obtenez un DESIGN.md pour le site qu’il vous faut
Collez n’importe quelle URL publique. Le mode Pro échantillonne les pages clés du site et renvoie un DESIGN.md conforme à la spécification, avec des recettes de composants vérifiées sur le site en ligne.