Claude Code Frontend Design Toolkit (Claude Skill) — Instalar & Demo en vivo

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

Demo en vivo

Cómo se ve en la práctica

frontend-design-toolkit-wilwaldon.replay ▶ listo

0/0

Instalar

Elige tu cliente

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

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

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

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Claude Code Frontend Design Toolkit

Get started with Claude Code Frontend Design Toolkit

Cuándo usarlo: When you want to bring Claude Code Frontend Design Toolkit into your Claude workflow.

Flujo

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

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

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills