MCP Design System Extractor

Ce qu'il fait

MCP Design System Extractor fait le pont entre votre instance Storybook et vos assistants IA. Pointez-le vers n'importe quelle URL Storybook active et votre IA pourra parcourir tous les composants disponibles, extraire le HTML rendu avec le CSS complet, rechercher par nom ou par usage, analyser les design tokens (couleurs, espacement, typographie) et vérifier les dépendances des composants — tout cela sans quitter la conversation.

Ceci est particulièrement utile pour les équipes migrant des composants entre frameworks, appliquant une cohérence visuelle ou créant de nouvelles fonctionnalités qui doivent correspondre aux modèles de design existants.

Outils

• list_components — Liste tous les composants avec filtrage par catégorie optionnel et pagination ; utilisez compact: true pour réduire la taille de la sortie
• get_component_html — Extrait le HTML rendu pour une story de composant spécifique ; s'exécute de manière asynchrone par défaut avec suivi de tâche pour gérer les composants volumineux
• search_components — Recherche des composants par nom, titre, catégorie ou usage (ex: "form inputs", "navigation")
• get_component_dependencies — Analyse quels sous-composants sont utilisés dans un composant donné
• get_theme_info — Extrait le thème du design system : propriétés CSS personnalisées, palette de couleurs, échelle d'espacement, typographie
• get_external_css — Récupère et tokenise les fichiers CSS externes ; retourne les design tokens par défaut, le CSS complet sur demande
• job_status — Interroge le résultat d'une tâche d'extraction de composant asynchrone
• job_cancel — Annule une tâche en file d'attente ou en cours d'exécution
• job_list — Liste toutes les tâches filtrées par statut (toutes / actives / terminées)

Installation

Ajoutez à Claude Desktop (claude_desktop_config.json) :

{
  "mcpServers": {
    "design-system": {
      "command": "npx",
      "args": ["mcp-design-system-extractor@latest"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

Ou utilisez le raccourci Claude CLI :

claude mcp add design-system npx mcp-design-system-extractor@latest \
  --env STORYBOOK_URL=http://localhost:6006

Pour les instances Storybook avec des certificats auto-signés, ajoutez NODE_TLS_REJECT_UNAUTHORIZED=0 au bloc env.

Hôtes supportés

Confirmé : Claude Desktop, Claude CLI.