Guide

Donnez à votre agent de code des spécifications de design à la demande avec MCP

Votre agent peut récupérer une spécification de design comme il récupère de la documentation. Connectez le serveur MCP de Design Extractor et l’agent peut extraire le DESIGN.md de n’importe quel site public, attendre l’extraction, lire le fichier et construire à partir de lui, le tout dans une seule tâche.

Pas de fichiers à copier, pas d’onglet de navigateur : vous nommez un site dans le prompt, et la spécification arrive dans le contexte de l’agent.

Écrit pour les développeurs qui créent des agents et des workflows d’agents. Mis à jour le .

Ce que vous obtiendrez

  • Le serveur MCP connecté à Claude Code, Codex, Cursor ou claude.ai, avec votre compte ou une clé API.
  • L’enchaînement d’outils que suit un agent : vérifier, extraire, attendre, lire.
  • Des prompts qui font faire toute la boucle à l’agent, de l’extraction à l’interface.
  • Ce que ça coûte et les limites à prévoir.

Ce que reçoit l’agent

Le serveur se trouve à l’adresse https://www.design-extractor.com/api/mcp et parle le streamable HTTP. Grâce à lui, un agent peut lancer l’extraction d’un site public, attendre qu’elle se termine, lire le DESIGN.md final, consulter le prix et votre solde, et lister vos extractions précédentes. Chaque extraction apparaît aussi dans Mes extractions sur le site, comme toutes les autres.

Le fichier est le même que celui produit par le site : des tokens pour les couleurs, la typographie, les espacements, les rayons et les composants en haut, et les règles pour les utiliser en dessous. Il suit la spécification DESIGN.md de Google : l’agent peut donc le lire comme n’importe quelle autre spécification.

Connecter le serveur

Choisissez votre client. Claude Code, Codex, claude.ai, Claude Desktop et ChatGPT se connectent avec votre compte ; Cursor et les scripts utilisent une clé API.

  1. Ajoutez le serveur une seule fois. Aucune clé nécessaire.

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

  2. Lancez /mcp, choisissez design-extractor puis Authenticate. Connectez-vous et autorisez l’accès sur la page qui s’ouvre.

  3. Demandez un site : « extrais le design de stripe.com ».

Claude Code, Codex, claude.ai, Claude Desktop et ChatGPT se connectent avec votre compte. Cursor, n8n et les scripts utilisent une clé API personnelle créée sur la page du compte.

Pour Claude Code et Codex, il existe aussi un plugin. Il associe le serveur à un skill apply-designmd qui guide l’agent pour extraire un site de référence et appliquer son DESIGN.md à votre base de code. Après l’installation, lancez /mcp dans Claude Code et authentifiez le serveur du plugin.

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor
codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

Tous les clients, l’extrait pour l’Agent SDK et les réglages des clés se trouvent sur la page de documentation du serveur MCP.

Les outils et l’ordre dans lequel les appeler

OutilCe qu’il fait
list_my_extractionsVos extractions, de la plus récente à la plus ancienne. Appelez-le en premier pour ne pas payer deux fois un site que vous avez déjà.
get_pricingLe coût actuel d’une extraction en crédits.
get_creditsVotre solde de crédits restant.
extract_designLance l’extraction d’une URL publique et consomme les crédits. Passez tier PRO pour échantillonner les pages clés du site. Répond dès que l’extraction est en file d’attente.
get_extractionPrend le nom ou l’URL du site. Renvoie le statut pendant l’extraction, puis le texte complet du DESIGN.md. Une extraction échouée en donne la raison.

Une extraction prend au moins une minute : le principe est donc de lancer, puis d’interroger. Le serveur l’indique lui-même à l’agent ; vous n’avez qu’à nommer le site.

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

Exemple concret : Supabase

Imaginons qu’on demande à l’agent de construire dans le style de supabase.com. Quand get_extraction indique que l’extraction est terminée, il renvoie tout le DESIGN.md sous forme de texte. Le DESIGN.md de Supabase de la galerie provient du même type d’extraction Pro : il montre donc ce qui arrive dans le contexte de l’agent. Il commence ainsi :

Le haut du DESIGN.md de Supabase dans la galerie, réduit à quelques tokens par groupe.
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

Extrait du site public de Supabase, pas une charte de marque officielle. Lire le DESIGN.md complet de Supabase

Sous les tokens viennent les sections que l’agent lit pour les règles et les recettes : Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. La section Components contient à elle seule 49 recettes en HTML et CSS : l’agent reconstruit un bouton ou une carte à partir de valeurs mesurées au lieu de les deviner.

Prompts

Nommez les outils, le site et ce qu’il faut faire du fichier. Ces prompts ont été écrits pour ce guide ; changez le site et la tâche.

Extraire et construire dans une seule tâche

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

Comparer avant de choisir

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

Vous construisez votre propre agent ? Passez le serveur dans l’option mcpServers de l’Agent SDK avec une clé API et autorisez mcp__design-extractor__* ; la documentation MCP donne l’extrait complet.

Crédits et limites

  • Les mêmes crédits que sur le site. Une extraction Pro coûte 10 crédits, que vous la lanciez sur le site ou que votre agent la lance. Rechargez sur la page Tarifs.
  • Pas de double facturation pour vos extractions récentes. Demander un site que vous avez extrait récemment réutilise cette extraction.
  • Pages publiques uniquement. Les pages derrière une connexion, en localhost ou sur un réseau privé ne sont pas prises en charge.
  • Clés. Jusqu’à cinq clés API actives, chacune valable un an et révocable sur la page de votre compte. Un client connecté renouvelle son propre token ; déconnectez-le sur la même page.

FAQ

Des spécifications de design pour agents via MCP : questions

Des réponses courtes aux questions qu’on se pose avant d’essayer.

Oui. Elle utilise le même compte et les mêmes crédits prépayés : une extraction Pro coûte 10 crédits. L’agent peut appeler get_pricing pour le coût actuel et get_credits pour votre solde ; quand le solde est insuffisant, extract_design refuse et l’indique.

Pas pour les clients qui se connectent : claude.ai, Claude Desktop, ChatGPT, Claude Code et Codex ouvrent une fois une page de consentement et conservent un token qui se renouvelle seul. Cursor, n8n, les scripts et l’Agent SDK utilisent une clé API personnelle créée sur la page de votre compte.

Au moins une minute. extract_design répond tout de suite ; l’agent attend environ une minute, puis appelle get_extraction avec le site toutes les 25 secondes jusqu’à ce que le DESIGN.md soit prêt.

Pas pour un site que vous avez extrait récemment : le redemander réutilise votre extraction et la réponse indique qu’aucun crédit n’a été débité. Un site extrait uniquement par d’autres personnes coûte quand même le prix normal. list_my_extractions montre ce que vous avez déjà.

Non. Le serveur capture la page à partir de son URL : les pages derrière une connexion, en localhost ou sur un réseau privé ne sont donc pas prises en charge. Déployez un aperçu public, ou extrayez le site en ligne.

Envie de voir un DESIGN.md avant de vous connecter ?

Lancez une extraction sur le site. Votre agent reçoit le même fichier via le serveur.

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

Guides associés

Voir tous les guides DESIGN.md