Basalt

Servidor MCP de sistema de diseño: consulta tokens, componentes, iconos y datos de contraste WCAG desde sistemas de diseño respaldados por Git.

GitHub
1
Prueba este MCPPatrocinado

Documentación

Servidor MCP de Basalt

Conecta tus herramientas de codificación con IA a tu sistema de diseño. Basalt sirve tus design tokens, especificaciones de componentes, iconos y datos de accesibilidad a través de MCP para que las herramientas de IA generen código fiel a tu marca, no valores codificados.

Funciona con Claude Design, Claude Code, Cursor, Windsurf y cualquier cliente compatible con MCP.

Inicio rápido

1. Obtén una clave de API

Regístrate en basalt.run (gratis) y ve a Configuración → Claves de API → Generar nueva clave.

2. Añádelo a tu herramienta

Cursor — añádelo a ~/.cursor/mcp.json o en Configuración → MCP:

{
  "mcpServers": {
    "basalt": {
      "url": "https://basalt.run/api/mcp",
      "headers": {
        "Authorization": "Bearer bsk_your_key_here"
      }
    }
  }
}

Claude Code:

claude mcp add --transport http basalt https://basalt.run/api/mcp \
  --header "Authorization: Bearer bsk_your_key_here"

Claude Desktop — añádelo a claude_desktop_config.json:

{
  "mcpServers": {
    "basalt": {
      "url": "https://basalt.run/api/mcp",
      "headers": {
        "Authorization": "Bearer bsk_your_key_here"
      }
    }
  }
}

Windsurf — Configuración → Servidores MCP, misma configuración que Cursor.

Herramientas disponibles

HerramientaDescripción
get_tokenObtén un valor de token resuelto por ruta (p. ej. color.action.default)
list_tokensLista todos los tokens de un proyecto
search_tokensBusca tokens por nombre o valor
get_componentObtén la especificación completa del componente: uso, variantes, notas de accesibilidad, código
list_componentsLista todos los componentes registrados con metadatos
get_iconObtén un icono SVG por nombre
list_iconsLista todos los iconos disponibles
get_themeObtén los tokens de tema claro/oscuro
check_contrastComprueba el contraste AA/AAA de WCAG entre dos colores

Qué resuelve

Las herramientas de codificación con IA alucinan valores de diseño. Codifican #3B82F6 en lugar de usar var(--color-action-default). Adivinan las API de los componentes en lugar de usar tus props reales.

Basalt ofrece a las herramientas de IA una fuente de verdad estructurada y consultable para tu sistema de diseño. Los tokens se almacenan en Git como JSON DTCG 2025.10, se editan visualmente en el editor web de Basalt y se sirven a través de MCP.

Funciona con Claude Design

Claude Design lee tu código durante la incorporación para aplicar tu marca. Basalt es donde se define tu marca: tokens, componentes, documentación, todo en Git. Edita en Basalt, haz commit en tu repositorio, y Claude Design lo recoge automáticamente.

Enlaces