Claude Code Frontend Design Toolkit (Claude Skill) — Installer & Démo en direct

Name: Claude Code Frontend Design Toolkit (Claude Skill)
Author: wilwaldon

Démo en direct

Aperçu en pratique

frontend-design-toolkit-wilwaldon.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": {
    "frontend-design-toolkit-wilwaldon": {
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  }
}

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

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

{
  "mcpServers": {
    "frontend-design-toolkit-wilwaldon": {
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  }
}

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": {
    "frontend-design-toolkit-wilwaldon": {
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "frontend-design-toolkit-wilwaldon": {
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "frontend-design-toolkit-wilwaldon",
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "frontend-design-toolkit-wilwaldon": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "frontend-design-toolkit"
        ]
      }
    }
  }
}

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

claude mcp add frontend-design-toolkit-wilwaldon -- npx -y frontend-design-toolkit

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

Cas d'usage

Usages concrets : Claude Code Frontend Design Toolkit

Get started with Claude Code Frontend Design Toolkit

Quand l'utiliser : When you want to bring Claude Code Frontend Design Toolkit into your Claude workflow.

Déroulement

Install the server in your MCP client of choice.
Authenticate if required.
Ask Claude to use its tools.

Résultat : Claude can interact with Claude Code Frontend Design Toolkit directly from your IDE.

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills