Générateur de DESIGN.md

Créez un DESIGN.md à partir d’un site en ligne. Saisissez son URL et le générateur produit le fichier que lit votre agent de code : tokens de couleurs, de typographie, d’espacements et de composants, avec les règles pour les utiliser. Vous découvrez le format ? Lisez ce qu’est un DESIGN.md.

Comment le générateur crée un DESIGN.md

  1. Saisissez l’URL d’un site

    N’importe quelle page publique convient : un site marketing, un site de documentation ou la page d’accueil d’une application web. Inscrivez-vous d’abord ; chaque extraction consomme des crédits d’un pack prépayé.

  2. Le générateur lit le site

    Il ouvre le site dans un vrai navigateur et mesure les couleurs, polices, espacements, rayons d’angle et composants réellement utilisés. Une extraction Pro échantillonne environ cinq pages du site. Chaque extraction prend au moins une minute.

  3. Vous obtenez un DESIGN.md

    Les tokens vont dans le front matter YAML, les règles d’utilisation dans le Markdown : Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components et Do’s and Don’ts. Copiez-le, téléchargez-le ou modifiez-le dans Mes extractions.

Exemple de résultat : le DESIGN.md d’Anthropic

Un extrait du fichier que le générateur a produit à partir d’anthropic.com, réduit à quelques tokens par groupe et au début de la section Overview. Le fichier complet couvre aussi la mise en page, l’élévation, les formes, les composants et les do’s and don’ts.

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

Voir le DESIGN.md complet d’AnthropicParcourir d’autres exemples de DESIGN.md

FAQ

Questions sur le générateur de DESIGN.md

Ce que produit le générateur, ce qu’il coûte et comment utiliser le fichier avec votre agent de code.

Un fichier DESIGN.md conforme à la spécification DESIGN.md de Google. Le front matter YAML contient les tokens de couleurs, de typographie, d’espacements, de rayons d’angle et de composants du site. Le corps en Markdown explique comment les utiliser, section par section, pour qu’un agent de code puisse créer une nouvelle interface fidèle au site.

Pas avec le générateur : il construit le fichier à partir d’un site public en ligne. Si vous partez de zéro, rédigez le DESIGN.md à la main en suivant la spécification, puis vérifiez sa structure et ses tokens avec le validateur DESIGN.md gratuit.

N’importe quel site public accessible en HTTP ou HTTPS, y compris les sites statiques, les applications monopage et les pages rendues côté serveur. Les pages derrière une connexion, en localhost ou sur un réseau privé ne sont pas prises en charge, et certains sites bloquent les navigateurs automatisés.

Vous vous inscrivez et achetez un pack de crédits prépayé, à partir de 5 $US pour 50 crédits. Il n’y a pas d’abonnement et les crédits n’expirent jamais. Chaque extraction consomme des crédits, et la page Tarifs indique le coût actuel par extraction. Si une extraction échoue de notre côté, les crédits sont remboursés.

Enregistrez-le sous le nom DESIGN.md à la racine de votre projet ou dans votre dossier docs, et mentionnez-le dans votre prompt. Claude Code, Cursor, GitHub Copilot, Windsurf et les autres agents ayant accès aux fichiers le lisent comme référence de style. Les agents peuvent aussi lancer eux-mêmes le générateur via le serveur MCP de Design Extractor.

Oui. Chaque DESIGN.md généré est enregistré dans Mes extractions, où vous pouvez le modifier, le télécharger à nouveau ou réextraire le site plus tard. C’est du texte brut : vous pouvez donc aussi le modifier dans votre propre éditeur.