Comparatif des outils DESIGN.md

Design Extractor crée un DESIGN.md à partir de n’importe quelle URL publique. 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.

D’autres outils suivent d’autres approches. Des collections comme getdesign.md et Refero Styles proposent des fichiers prêts à l’emploi pour des sites qu’elles ont déjà analysés ; designmd.me en génère un à partir d’une URL ; l’extension Chrome de TypeUI remplit son propre modèle à partir des styles de votre onglet. Chaque comparatif indique ce que nous avons vérifié et quand. Vous découvrez le format ? Lisez ce qu’est un DESIGN.md.

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.

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.

  • 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.