Claude Code Design Skills MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Compétence Figma-to-Next.js avec priorité de réutilisation des composants
Variante Figma → mappage d'accessoires
Types TypeScript stricts prêts à l'emploi
Paramètres d'accessibilité intégrés par défaut
Modèles de données simulés pour l'hygiène des limites frontend/backend

Démo en direct

Aperçu en pratique

claude-code-design-skills.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": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

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

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

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

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

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

Cas d'usage

Usages concrets : Claude Code Design Skills

Échafauder une nouvelle page à partir d'un cadre Figma

👤 Ingénieurs front-end convertissant les conceptions en code ⏱ ~45 min intermediate

Quand l'utiliser : Vous disposez d'un cadre Figma prêt et souhaitez un code React/Next.js qui correspond à votre base de code.

Prérequis

Configuration de Figma MCP — Installez Figma MCP et fournissez un PAT
Compétence installée — git clone dans ~/.claude-code/skills/

Déroulement

Pointez sur le cadre

Convertissez ce cadre Figma en une page Next.js : <figma URL>. Réutilisez les composants de src/components/.✓ Copié

→ L'agent inventorie les composants existants avant d'en écrire de nouveaux
Variantes de prop-map

Mappez les variantes de Figma aux accessoires typés (taille, intention, désactivé).✓ Copié

→ Types TS générés ; non
Données simulées

Utilisez des données fictives ; n'inventez pas les appels API. Gardez le back-end à l’écart.✓ Copié

→ Nettoyer le composant sans récupération avec un fichier simulé

Résultat : Une vraie page Next.js fusionnée en un seul PR – pas de réécriture du critique.

Pièges

Générer une bibliothèque de composants parallèle à côté de celle existante — Commencez par « lister les composants existants » pour que l'agent réutilise ce qui s'y trouve.

Combiner avec : figma · magic-ui-mcp

Synchronisez les accessoires d'un composant avec les variantes Figma

👤 Équipes maintenant un système de conception ⏱ ~25 min intermediate

Quand l'utiliser : Designer a ajouté une nouvelle variante dans Figma et le code doit rattraper son retard.

Déroulement

Diff Figma contre le composant

Comparez les variantes de Button (Figma) avec les accessoires src/components/Button.tsx.✓ Copié

→ Liste claire des delta : nouvelle variante, variante renommée, etc.
Appliquer la différence

Mettez à jour Button.tsx pour inclure la nouvelle variante « fantôme » ; préserver l'API.✓ Copié

→ Mise à jour tapée avec une valeur par défaut qui ne interrompt pas les appelants

Résultat : La dérive du système de conception s'est fermée sans briser les consommateurs.

Combinaisons

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

claude-code-design-skills + figma

Tirez les images Figma via MCP ; convertir via cette compétence

Récupérez le cadre Figma X ; utilisez la compétence pour convertir avec la réutilisation des composants existants.✓ Copié

claude-code-design-skills + magic-ui-mcp

Mappez les modèles Figma sur les composants Magic UI là où ils existent

Là où Figma utilise un héros flou, utilisez le fondu flou de Magic UI au lieu d'en écrire un.✓ Copié

claude-code-design-skills + claude-design-auditor-skill

Vérifier que le code généré réussit l'audit à 18 règles

Après la conversion, exécutez l'auditeur de conception et corrigez tous les résultats ÉLEVÉS.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
figma-to-code (SKILL)	Figma frame URL + repo conventions	Transformer une conception en code adapté à votre base de code	0

Coût et limites

Coût d'exécution

Quota d'API: Aucun pour la compétence ; Figma MCP a son propre quota
Tokens par appel: Cadre Figma + code existant + sortie — peut être volumineux ; définir le cadre avec précision
Monétaire: Gratuite
Astuce: Convertissez une image à la fois ; les sélections géantes gaspillent à la fois le contexte et l’énergie de révision.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Figma PAT appartient au Figma MCP, pas à cette compétence

Sortie de données : Aucun de la compétence ; les appels réseau se produisent dans Figma MCP

Le code généré doit encore être révisé. « Passe les types » ne signifie pas « fonctionne correctement au moment de l'exécution ».
N'acceptez pas aveuglément les importations de composants qui ne figurent pas dans votre liste autorisée ; la compétence préfère la réutilisation mais vous possédez toujours la révision.

Dépannage

Erreurs courantes et correctifs

L'agent écrit un nouveau bouton au lieu de réutiliser celui existant

Répertoriez explicitement le répertoire des composants du dépôt dans l'invite.

Vérifier : Include 'check src/components/ first' in the request

Accessoires manquants pour une nouvelle variante de Figma

Demandez une variante de différence avant la conversion ; mettre à jour le composant au lieu de bifurquer.

Vérifier : Agent output includes a 'variants' section

Types trop lâches (n'importe où)

Exiger « aucun ; » échouer bruyamment si une variante ne peut pas être saisie ».

Vérifier : Search the diff for ': any'

Alternatives

Claude Code Design Skills vs autres

Alternative	Quand l'utiliser	Compromis
magic-ui-mcp	Vous voulez des composants animés prédéfinis, pas un convertisseur Figma	La bibliothèque d'abord, pas le design d'abord
claude-design-auditor-skill	Vous souhaitez évaluer la qualité de la conception, pas générer du code	Auditer, pas produire
hue-brand-skill	Vous avez besoin d'un langage de conception, pas d'une conversion de cadre	Le système d'abord, pas la trame d'abord

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills