Design Extract (MCP server) — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Sortie tokens DTCG en trois niveaux (primitive → sémantique → composite)
Émetteurs multi-plateformes : SwiftUI, Compose, Flutter, Tailwind v4, Figma
Passe de remédiation WCAG — signale les paires qui échouent et propose des corrections
Audit de santé CSS (spécificité, règles mortes, tokens redondants)
Extension Chrome compagnon pour capture en un clic
Basé sur Playwright, Node 20+, licence MIT

Démo en direct

Aperçu en pratique

design-extract-mcp.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Design Extract

Comment cloner le système visuel d'une marque en tokens DTCG

👤 Ingénieurs design, équipes agence, équipes produit alignées sur la marque ⏱ ~25 min intermediate

Quand l'utiliser : Vous reconstruisez un site marketing ou une app à partir d'une référence et avez besoin de ses tokens en 10 minutes, pas d'une session de rip Figma.

Prérequis

URL publique du site de référence — ex. https://stripe.com — doit être accessible publiquement

Déroulement

Extraire

Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ Copié

→ tokens.json + tokens.swift + tailwind.css écrits ; rapport de couverture
Auditer

Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ Copié

→ Rapport d'audit listant les paires qui échouent + suggestions
Appliquer

Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ Copié

→ La page s'affiche avec l'identité visuelle de la marque

Résultat : Un jeu de tokens + audit + page de démarrage, tout dérivé d'une seule URL.

Pièges

Le site est fortement protégé par SSR ou derrière une connexion — Fournissez un cookie de session via l'extension ou une étape Playwright personnalisée

Combiner avec : filesystem

Auditer votre propre site pour détecter la dérive du système de design

👤 Mainteneurs internes du système de design ⏱ ~30 min intermediate

Quand l'utiliser : Vous suspectez que 47 couleurs non autorisées se sont glissées en production. Confirmez-le.

Déroulement

Inventorier

Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ Copié

→ Comptes de valeurs distinctes par catégorie
Comparer à la source

Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ Copié

→ Tableau de dérive avec références fichier/composant
Planifier le nettoyage

Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ Copié

→ Plan de PR rédigé

Résultat : Un rapport de dérive concret à remettre à l'engineering, pas une plainte floue sur l'incohérence.

Pièges

L'outil sur-rapporte à cause des variables CSS qui se résolvent au runtime — Passez --resolve-vars pour qu'il trace les chaînes var(--x) avant de compter

Combiner avec : filesystem

Générer des variables Figma depuis un site en production

👤 Designers qui doivent synchroniser le code dans Figma ⏱ ~15 min beginner

Quand l'utiliser : Votre code a été livré en premier ; le design doit rattraper son retard dans Figma.

Déroulement

Émettre le JSON Figma

Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ Copié

→ JSON de variables Figma importable
Importer

Walk me through importing this with the Figma Variables Import plugin.✓ Copié

→ Instructions pas à pas pour le plugin

Résultat : Fichier Figma synchronisé avec le code en production, sans eyedropping manuel.

Pièges

Les noms de tokens entrent en conflit avec des variables Figma existantes — Utilisez le flag --prefix pour nommer par espace ex. site/color.bg.primary

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

design-extract-mcp + filesystem

Persister les sorties tokens dans votre dépôt pour que les exécutions successives puissent faire un diff

design-extract-mcp + Figma-Context-MCP

Synchronisation bidirectionnelle — extraire du site en production, repousser vers Figma

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	Point d'entrée principal	1 crawl Playwright
audit_css_health	url	Après ou à la place de extract, quand l'objectif est la santé, pas le clonage	1 crawl
wcag_remediate	tokens	Après extract, avant de livrer les tokens	gratuit (post-traitement)
diff_tokens	url, source_tokens_path	Audit de dérive sur votre propre site	1 crawl

Coût et limites

Coût d'exécution

Quota d'API: Local — dépend de votre machine
Tokens par appel: 1500 à 6000 par résumé d'extraction
Monétaire: Gratuit (MIT)
Astuce: Ne faites pas d'extraction à chaque PR — mettez en cache le résultat et exécutez sur les changements

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucun sauf si la cible nécessite une authentification (via fichier cookie dans ce cas)

Sortie de données : Uniquement vers l'URL que vous ciblez. Playwright s'exécute localement.

Respectez robots.txt et les CGU du site cible — cela récupère comme un navigateur mais à grande échelle c'est quand même du scraping.

Dépannage

Erreurs courantes et correctifs

Playwright Chromium ne démarre pas

Exécutez npx playwright install chromium une fois

Vérifier : `npx playwright --version` affiche une version

Le site bloque le navigateur headless

Passez --headed ou fournissez un proxy résidentiel / fichier cookie

Les tokens de sortie semblent incomplets

Le site utilise beaucoup de CSS-in-JS — essayez --wait-for-selector main pour s'assurer que le rendu SPA est complet

Alternatives

Design Extract vs autres

Alternative	Quand l'utiliser	Compromis
Figma-Context-MCP (GLips)	La source de vérité est Figma, pas un site en production	Le MCP Figma nécessite un fichier Figma ; design-extract fonctionne depuis n'importe quelle URL
Plugin Tokens Studio	Vous êtes déjà dans Figma et voulez une interface de gestion des tokens	Manuel ; design-extract automatise l'extraction initiale

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills