Obtenez un DESIGN.md
à partir de n’importe quel site

Un DESIGN.md est un document de design system en texte brut que les agents de code IA lisent pour générer une interface cohérente. C’est l’équivalent design d’AGENTS.md : humains et agents peuvent le lire, le modifier et le faire respecter. Il repose sur deux couches. Le front matter YAML contient des tokens de design lisibles par une machine, comme les couleurs, la typographie et les espacements. Le corps en Markdown explique la logique du design.

Un DESIGN.md comprend en général huit sections canoniques, dans cet ordre : Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components et Do’s and Don’ts. Le front matter YAML encode les valeurs exactes des tokens. Le corps en Markdown explique comment et pourquoi les appliquer. Les sections non pertinentes peuvent être omises, et des sections propres à un domaine peuvent être ajoutées.

Collez l’URL de n’importe quel site public dans Design Extractor et lancez l’extraction. Inscrivez-vous, achetez un pack de crédits : chaque extraction consomme quelques crédits. Le résultat est un DESIGN.md que vous pouvez copier. Placez-le dans votre dépôt et votre agent IA le lit comme référence de style, avec Claude, Cursor, Copilot ou Stitch.

Tout outil de code IA qui lit les fichiers Markdown du dossier de votre projet peut utiliser DESIGN.md. Cela inclut Claude Code, Cursor, GitHub Copilot et les autres assistants de code qui ont accès aux fichiers. Placez le DESIGN.md à la racine du projet ou dans un dossier docs, et mentionnez-le dans votre prompt.

N’importe quel site accessible publiquement. Design Extractor analyse la page en direct, telle qu’un navigateur l’affiche. Cela fonctionne avec les sites statiques, les SPA et les pages rendues côté serveur. Le site doit être accessible via une URL HTTP/HTTPS standard.

Certains sites, comme les portails administratifs et les commerces locaux, ne s’ouvrent qu’aux visiteurs de certains pays. Si une extraction échoue parce que le site a refusé la visite, la page de résultat l’indique et propose les pays où le site se charge. Choisissez-en un : la page est chargée par un navigateur situé dans ce pays, puis extraite normalement. Une extraction depuis un autre pays coûte le prix du mode plus un petit supplément, affiché avant le lancement, et une extraction qui échoue malgré tout est remboursée. La même option existe dans l’extension Chrome et via le serveur MCP.

Oui. L’extension Design Extractor pour Chrome réutilise la session ouverte sur le site : pas de connexion séparée. Sa fenêtre affiche votre solde de crédits, et un clic envoie la page de l’onglet actif à la même extraction que le formulaire de la page d’accueil, en Lite ou en Pro, pour les mêmes crédits. Le DESIGN.md terminé s’ouvre sur le site et apparaît dans Mes extractions. Dans cette première version, la page doit être publique : c’est le serveur qui la capture, donc les pages derrière une connexion, en localhost ou sur un réseau privé ne sont pas encore prises en charge. La modification et le téléchargement se font toujours sur le site.

Oui. Design Extractor est aussi un serveur MCP. Dans claude.ai, Claude Desktop ou ChatGPT, ajoutez l’URL du serveur comme connecteur et connectez-vous avec votre compte ; dans Claude Code, Codex, Cursor ou l’Agent SDK, connectez-le avec une seule commande (la page de documentation donne le bloc pour chacun, avec une clé API depuis la page de votre compte quand le client en a besoin), puis demandez-lui d’extraire un site. L’agent lance l’extraction, revient vérifier au bout d’une minute environ et récupère le texte du DESIGN.md à enregistrer dans votre dépôt, pour les mêmes crédits que sur le site. Claude Code et Codex peuvent aussi l’installer comme plugin, qui ajoute un skill pour appliquer un DESIGN.md à une base de code.