hue MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Entradas: URL da marca, nome ou captura de tela
Saídas: tokens (cor, tipo, espaçamento), biblioteca de componentes, claro/escuro, receitas de heróis, kit de ícones
Gera uma habilidade Claude reutilizável por marca
17 exemplos de marcas no repositório (atlas, veludo,…) para referência
Formato SKILL.md simples; trabalha com Claude Code e Codex

Demo ao vivo

Como fica na prática

hue-brand-skill.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

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

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "hue-brand-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "hue-brand-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/hue",
          "~/.claude/skills/hue"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add hue-brand-skill -- git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: hue

Derive um sistema de design do site de um concorrente

👤 Fundadores e designers prototipando rapidamente um produto ⏱ ~20 min beginner

Quando usar: Você adora a estética de um site e deseja um sistema inicial na mesma direção.

Pré-requisitos

Habilidade instalada — clone do git https://github.com/dominikmartn/hue ~/.claude/skills/hue

Fluxo

Aponte para um URL

Crie uma habilidade de design em cursor.com.✓ Copiado

→ A saída inclui paleta de cores, par de tipografia, escala de espaçamento, componentes e um SKILL.md gerado
Visualização

Renderize um exemplo de herói com o novo sistema.✓ Copiado

→ Exemplo de HTML mostra tokens em contexto
Instalar como uma habilidade

Salve a habilidade de marca gerada em ~/.claude/skills/brand-<name>/.✓ Copiado

→ HABILIDADE.md registrado; avisos futuros escolham a marca

Resultado: Uma voz de marca reutilizável que seu agente aplica a todas as tarefas de UI subsequentes.

Armadilhas

Usar a marca de outra pessoa literalmente — Trate isso como um ponto de partida e ajuste os tokens antes do envio

Combine com: claude-code-design-skills

Faça engenharia reversa de uma captura de tela em um sistema de design

👤 Designers com imagens de referência, mas ainda sem sistema ⏱ ~15 min beginner

Quando usar: Você tem uma foto do Dribbble que adora e deseja que ela apareça no seu aplicativo.

Fluxo

Alimente a imagem

Gere uma habilidade de matiz a partir desta captura de tela.✓ Copiado

→ Cores amostradas; tipo de família inferida; escala de espaçamento proposta
Iterar

Escureça o acento em 15%, aumente o espaçamento para 4/8/12/16.✓ Copiado

→ Tokens regenerados

Resultado: Um sistema limpo e proprietário a partir de uma única referência.

Armadilhas

Extraindo uma paleta de um JPEG com compactação agressiva — Prefira fontes PNG ou SVG para extração de paleta

Gere habilidades por marca para um produto multilocatário

👤 Equipes enviando UIs com etiqueta em branco ⏱ ~60 min intermediate

Quando usar: Você tem 5 clientes e precisa de 5 temas de marca sem trabalho de clonagem.

Fluxo

Geração em lote

Para cada URL de marca do cliente, gere uma habilidade de matiz em ~/.claude/skills/brand-<slug>/.✓ Copiado

→ N habilidades criadas com estrutura consistente
Aplicar por inquilino

Ao criar a IU para o locatário X, ative a marca X antes de escrever o código.✓ Copiado

→ O agente aplica tokens corretos automaticamente

Resultado: Temas de marca branca que você pode trocar por meio da ativação de habilidades.

Combine com: claude-code-design-skills

Combinações

Combine com outros MCPs para 10× de alavancagem

hue-brand-skill + claude-code-design-skills

Use tokens de matiz ao converter quadros Figma em código

Aplique tokens de marca acme ao converter este quadro Figma para Next.js.✓ Copiado

hue-brand-skill + magic-ui-mcp

Escolha os componentes do Magic UI e ajuste por meio de tokens de matiz

Instale o Magic UI blur-fade e pinte-o com destaque da marca.✓ Copiado

hue-brand-skill + claude-design-auditor-skill

Verifique se a marca gerada passa nas regras de contraste + a11y

Audite as paletas claras e escuras da marca Acme para WCAG AA.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
hue:generate (SKILL)	URL \| brand name \| screenshot + optional notes	Início de um novo produto ou ao integrar a marca de um cliente	0

Custo e limites

O que custa rodar

Cota de API: Nenhum
Tokens por chamada: Moderado; artefatos gerados somam
Monetário: Livre
Dica: Gere uma vez; reutilizar a habilidade resultante por marca em todas as sessões.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Sem credenciais

Saída de dados: Se a entrada de URL for usada, a habilidade buscará a URL. As capturas de tela permanecem locais.

A extração de marca de uma URL não licencia a propriedade intelectual de ninguém — use-a como inspiração, não como reprodução direta.
Capturas de tela de outros produtos estão sob seus direitos autorais. Gere sua própria marca, não clone a deles.

Solução de problemas

Erros comuns e correções

A paleta gerada parece turva

Tendência para referência SVG/PNG; JPEGs perdem saturação. Ou forneça âncoras hexagonais que a habilidade deve honrar.

Verificar: Inspect generated tokens.json for the flagged colors

A habilidade por marca não é ativada

A descrição do SKILL.md deve descrever quando disparar; certifique-se de que a descrição do frontmatter inclua o nome da marca.

Verificar: head ~/.claude/skills/brand-<name>/SKILL.md

O contraste falha no modo escuro

Peça para a matiz se regenerar com o primeiro modo escuro de 11 anos; substituir neutros.

Verificar: Run claude-design-auditor on the dark variants

Alternativas

hue vs. outros

Alternativa	Quando usar	Troca
claude-code-design-skills	Você tem um quadro para converter; você já tem uma marca	Não gera marca – consome uma
magic-ui-mcp	Você quer componentes prontos para uso, não um sistema de marca	Biblioteca, não linguagem
claude-design-auditor-skill	Você deseja avaliar um projeto existente, não produzir um	Avalia, não gera

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills