Basalt

Servidor MCP de sistema de design — consulte tokens, componentes, ícones e dados de contraste WCAG de sistemas de design com suporte Git.

GitHub

Experimente este MCPPatrocinado

Documentação

Servidor MCP Basalt

Conecte suas ferramentas de codificação com IA ao seu design system. O Basalt fornece seus design tokens, especificações de componentes, ícones e dados de acessibilidade via MCP para que ferramentas de IA gerem código alinhado à sua marca — não valores fixos codificados.

Funciona com Claude Design, Claude Code, Cursor, Windsurf e qualquer cliente compatível com MCP.

Início Rápido

1. Obtenha uma chave de API

Cadastre-se em basalt.run (gratuito) e vá em Configurações → Chaves de API → Gerar nova chave.

2. Adicione à sua ferramenta

Cursor — adicione em ~/.cursor/mcp.json ou Configurações → 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 — adicione em claude_desktop_config.json:

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

Windsurf — Configurações → Servidores MCP, mesma configuração do Cursor.

Ferramentas Disponíveis

Ferramenta	Descrição
`get_token`	Obtém um valor de token resolvido por caminho (ex.: `color.action.default`)
`list_tokens`	Lista todos os tokens de um projeto
`search_tokens`	Busca tokens por nome ou valor
`get_component`	Obtém a especificação completa do componente — uso, variantes, notas de acessibilidade, código
`list_components`	Lista todos os componentes registrados com metadados
`get_icon`	Obtém um ícone SVG por nome
`list_icons`	Lista todos os ícones disponíveis
`get_theme`	Obtém tokens de tema claro/escuro
`check_contrast`	Verifica o contraste WCAG AA/AAA entre duas cores

O Que Isso Resolve

Ferramentas de codificação com IA alucinam valores de design. Elas codificam valores fixos como #3B82F6 em vez de usar var(--color-action-default). Elas adivinham APIs de componentes em vez de usar suas props reais.

O Basalt oferece às ferramentas de IA uma fonte de verdade estruturada e consultável para o seu design system. Os tokens são armazenados no Git como JSON DTCG 2025.10, editados visualmente no editor web do Basalt e servidos via MCP.

Funciona com Claude Design

O Claude Design lê seu código durante a integração para aplicar sua marca. O Basalt é onde sua marca é definida — tokens, componentes, documentação, tudo no Git. Edite no Basalt, faça commit no seu repositório e o Claude Design detecta automaticamente.