Claude Code Frontend Design Toolkit (Claude Skill) — インストール & ライブデモ

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

ライブデモ

実際の動作

frontend-design-toolkit-wilwaldon.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/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"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

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

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

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

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

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

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

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

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

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

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

context_servers に追加。保存時に Zed がホットリロード。

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

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Claude Code Frontend Design Toolkit

Get started with Claude Code Frontend Design Toolkit

使うタイミング： When you want to bring Claude Code Frontend Design Toolkit into your Claude workflow.

フロー

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

結果： Claude can interact with Claude Code Frontend Design Toolkit directly from your IDE.

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る