Documentation

Comment fonctionne Design Extractor

Collez une URL, obtenez une spécification de design structurée. Couleurs, typographie, espacements et composants dans un DESIGN.md à déposer dans un dépôt.

Qu’est-ce qu’un DESIGN.md ?

Un DESIGN.md est un document de design system en texte brut, lisible à la fois par les humains et par les agents IA. Voyez-le comme l’équivalent design d’AGENTS.md. Là où AGENTS.md explique aux agents comment construire le projet, DESIGN.md leur dit à quoi il doit ressembler et quelle impression il doit donner.

Concrètement, chaque DESIGN.md comporte deux couches : un front matter YAML avec des tokens de design lisibles par une machine, et un corps en Markdown qui explique la logique du design. Les tokens donnent aux agents des valeurs précises. Le texte leur explique pourquoi ces valeurs existent.

Lire la spécification DESIGN.md complète ->

Sections canoniques

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do’s and Don’ts

Comment ça marche

  1. Entrée

    Collez une URL publique (par exemple design-extractor.com).

  2. Extraction

    Le système parcourt la page et analyse ses propriétés visuelles : couleurs, typographie, espacements, modèles de composants et langage de design global.

  3. Sortie

    Un DESIGN.md contenant :

    • Une vue d’ensemble et des consignes sur le style de la marque
    • Des palettes de couleurs avec des tokens nommés
    • Les niveaux typographiques et les propriétés des polices
    • Des tokens de mise en page, d’espacement et de forme
    • Des consignes sur les composants et des références aux tokens
    • Des choses à faire et à éviter, qui servent de garde-fous de design

Sortie

Chaque extraction produit un DESIGN.md.

Markdown

  • DESIGN.md. Le format DESIGN.md canonique a été introduit par Google Stitch. Déposez-le dans n’importe quel dépôt pour que les agents IA l’exploitent.

Extension Chrome

Extrayez la page de l’onglet ouvert sans revenir ici. L’extension réutilise votre session sur le site et consomme les mêmes crédits. Découvrir comment fonctionne l’extension ->

L’idée clé

Les agents IA produisent un meilleur design quand on leur donne à la fois des tokens précis et une explication lisible par un humain. Le front matter YAML donne les valeurs exactes. Le corps en Markdown explique comment utiliser ces valeurs en pratique.

Prêt à essayer ?

Obtenez un DESIGN.md à partir de n’importe quelle URL publique. Une extraction prend au moins une minute.

Extraire un site