Refero Styles vs Design Extractor
Design Extractor crée un DESIGN.md à partir de n’importe quelle URL publique que vous lui donnez. Le fichier 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.
Refero Styles est une grande bibliothèque gratuite de styles de sites, chacun avec ses couleurs, sa typographie, ses espacements et ses composants dans plusieurs formats. Vous découvrez le format ? Lisez ce qu’est un DESIGN.md.
Vérifié le sur styles.refero.design, l’une de ses pages de style et son sitemap des styles. 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
| Refero Styles | 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 | Chaque composant est décrit en prose, avec son rôle et ses mesures, sans HTML. | 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 | Une bibliothèque gratuite de styles de sites, en bêta, par Refero, le produit de références d’interface sur refero.design. | Un générateur : vous lui donnez une URL publique, il renvoie le DESIGN.md de ce site. |
| N’importe quel site à la demande | Non proposé | Oui. Collez n’importe quelle URL publique et l’extraction démarre aussitôt. |
| Couverture | 1 342 pages de style, telles que listées dans son sitemap des styles. | N’importe quel site public, plus une galerie de marques déjà extraites. |
| Formats par style | DESIGN.md (compact et étendu), Tailwind v4, variables CSS et tokens de design. | Un seul DESIGN.md, avec les tokens dans le front matter et des recettes de composants en HTML et CSS. |
| Prix | Consultation et copie gratuites. | Crédits prépayés, sans abonnement. Les packs commencent à 5 $US pour 50 crédits ; une extraction Pro coûte 10 crédits. |
| Fraîcheur | Des instantanés. Le style Apple a été extrait le 2026-09-20. | Créé à partir du site en ligne au moment où vous lancez l’extraction. |
| Accès pour les agents | Chaque page de style renvoie vers le MCP de Refero pour Claude, ChatGPT, Cursor, Codex et d’autres. | 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. |
| Extension de navigateur | Non proposé | Une extension Chrome qui extrait l’onglet ouvert. |
Ce que propose Refero Styles
- Une bibliothèque gratuite de styles de sites, à parcourir par ambiance, comme SaaS en mode sombre ou mises en page éditoriales.
- Plusieurs formats par style : DESIGN.md (compact et étendu), Tailwind v4, variables CSS et tokens de design.
- Des liens vers le MCP de Refero pour Claude, ChatGPT, Cursor, Codex et d’autres.
Une bibliothèque ou n’importe quelle URL à la demande
Une bibliothèque couvre les sites que quelqu’un y a déjà ajoutés. Design Extractor lit le site en ligne que vous indiquez : il couvre donc votre propre produit, un client, un concurrent ou une marque de niche, tel qu’il est aujourd’hui.
Collez l’URL sur la page d’accueil, ou laissez votre agent s’en charger via le serveur MCP. Consultez des fichiers terminés, avec leurs recettes et les résultats des vérifications, dans la galerie.
Comment passer de Refero Styles à Design Extractor
- Collez l’URL du site sur la page d’accueil de Design Extractor et lancez une extraction Pro.
- Enregistrez le résultat sous le nom DESIGN.md à la racine de votre dépôt et gardez la référence dans AGENTS.md ou CLAUDE.md. Vérifiez vos modifications manuelles avec le validateur DESIGN.md gratuit.
- Ou laissez votre agent s’en charger : connectez le serveur MCP et demandez-lui d’extraire le site.
Verdict
Choisissez Design Extractor si vous avez besoin d’un DESIGN.md pour n’importe quel site public, pas seulement ceux d’une bibliothèque, avec des recettes de composants vérifiées sur le site en ligne. Il lit le site tel qu’il est aujourd’hui et suit la spécification de Google, avec une recette pour chaque composant repéré sur la page, signalée avec la raison quand elle ne passe pas. Il accède aux sites restreints par région. Votre agent peut le lancer via MCP.
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.
TypeUI vs Design Extractor
L’extension Chrome gratuite de TypeUI, qui remplit son propre modèle à partir des styles de votre onglet, comparée à un DESIGN.md conforme à la spécification avec des recettes de composants vérifiées sur le site en ligne.
FAQ
Refero Styles vs Design Extractor : questions
Des réponses courtes sur Refero Styles et Design Extractor, vérifiées le 2026-10-20.
Oui. Le 2026-10-20, consulter et copier des styles sur styles.refero.design était gratuit. Ses pages renvoient vers le MCP de Refero sur refero.design.
Non. Refero Styles ne permet pas de soumettre votre propre URL : vous choisissez dans sa bibliothèque. Design Extractor crée un DESIGN.md à partir de n’importe quelle URL publique quand vous lancez l’extraction.
Non. Design Extractor produit un seul fichier : 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 sous forme de recette en HTML et CSS épurés. Votre agent de code le lit et écrit les styles qu’utilise votre projet.
Chaque recette de composant est rendue seule et comparée au site en ligne : une correspondance structurelle de ses parties 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 ne passe pas est signalée avec la raison, jamais livrée comme vérifiée.
Le 2026-10-20, son sitemap des styles listait 1 342 pages de style.
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.
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.