/ Directory / Playground / Claude Code Frontend Design Toolkit
← All servers ↗ GitHub
● Community wilwaldon ⚡ Instant

Claude Code Frontend Design Toolkit

by wilwaldon · wilwaldon/Claude-Code-Frontend-Design-Toolkit

Skills + plugins + MCPs that make Claude Code output better-looking frontends.

Skills + plugins + MCPs that make Claude Code output better-looking frontends.

▶ Watch demo 📦 Install 💡 Use Cases

Live Demo

What it looks like in practice

frontend-design-toolkit-wilwaldon.replay ▶ ready
0/0

Install

Pick your 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"
      ]
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "frontend-design-toolkit-wilwaldon": {
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "frontend-design-toolkit-wilwaldon": {
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "frontend-design-toolkit-wilwaldon": {
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "frontend-design-toolkit-wilwaldon",
      "command": "npx",
      "args": [
        "-y",
        "frontend-design-toolkit"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json
{
  "context_servers": {
    "frontend-design-toolkit-wilwaldon": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "frontend-design-toolkit"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

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

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Claude Code Frontend Design Toolkit

Get started with Claude Code Frontend Design Toolkit

When to use: When you want to bring Claude Code Frontend Design Toolkit into your Claude workflow.

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

Outcome: Claude can interact with Claude Code Frontend Design Toolkit directly from your IDE.

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills