/ Diretório / Playground / hue
← Todos os servidores ↗ GitHub
● Comunidade dominikmartn ⚡ Instantâneo

hue

por dominikmartn · dominikmartn/hue

Alimente o matiz de uma marca (URL, nome ou captura de tela) → obtenha uma linguagem de design completa: tokens, tipografia, espaçamento, claro/escuro, receitas de heróis, kit de ícones e uma habilidade de sistema de design gerada.

dominikmartn/hue é uma habilidade de código aberto de Claude que transforma qualquer referência de marca em um sistema de design completo. Aponte para cursor.com ou Raycast, cole uma captura de tela ou nomeie um clima – ele analisa e gera tokens de cor + tipografia + espaçamento, uma pequena biblioteca de componentes, variantes claro/escuro, receitas de heróis e um kit de ícones correspondente. O pacote de linguagem de design inclui arquivos de modelo YAML e amostras de páginas iniciais HTML; ele também gera uma habilidade Claude por marca que você pode reutilizar em sessões para que seu agente permaneça na marca automaticamente.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

hue-brand-skill.replay ▶ pronto
0/0

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

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.

Fluxo
  1. 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
  2. Visualização
    Renderize um exemplo de herói com o novo sistema.✓ Copiado
    → Exemplo de HTML mostra tokens em contexto

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
  1. 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
  2. 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
  1. 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

FerramentaEntradasQuando chamarCusto
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.

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
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

AlternativaQuando usarTroca
claude-code-design-skillsVocê tem um quadro para converter; você já tem uma marcaNão gera marca – consome uma
magic-ui-mcpVocê quer componentes prontos para uso, não um sistema de marcaBiblioteca, não linguagem
claude-design-auditor-skillVocê deseja avaliar um projeto existente, não produzir umAvalia, não gera

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills