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.

Claude Code Frontend Design Toolkit