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

Por qué usarlo

Características clave

Entradas: URL de la marca, nombre o captura de pantalla
Salidas: tokens (color, tipo, espaciado), biblioteca de componentes, luz/oscuridad, recetas de héroes, kit de iconos
Genera una habilidad Claude reutilizable por marca
17 marcas de ejemplo en el repositorio (atlas, terciopelo,…) como referencia
Formato SKILL.md simple; Funciona con Claude Code y Codex.

Demo en vivo

Cómo se ve en la práctica

hue-brand-skill.replay ▶ listo

0/0

Instalar

Elige tu 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
    }
  }
}

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

~/.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 el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la 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
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "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
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

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

~/.config/zed/settings.json

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

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

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

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

Casos de uso

Usos del mundo real: hue

Derivar un sistema de diseño del sitio de un competidor

👤 Fundadoras y diseñadoras de prototipos rápidos de un producto. ⏱ ~20 min beginner

Cuándo usarlo: Te encanta la estética de un sitio y quieres un sistema inicial en la misma dirección.

Requisitos previos

Habilidad instalada — clon de git https://github.com/dominikmartn/hue ~/.claude/skills/hue

Flujo

Apunta a una URL

Crea una habilidad de diseño desde cursor.com.✓ Copiado

→ El resultado incluye paleta de colores, par de tipografía, escala de espaciado, componentes y un SKILL.md generado.
Avance

Representa un héroe de muestra con el nuevo sistema.✓ Copiado

→ La muestra HTML muestra tokens en contexto
Instalar como habilidad

Guarde la habilidad de marca generada en ~/.claude/skills/brand-<name>/.✓ Copiado

→ SKILL.md registrado; indicaciones futuras para recoger la marca

Resultado: Una voz de marca reutilizable que su agente aplica a cada tarea posterior de la interfaz de usuario.

Errores comunes

Usar la marca de otra persona palabra por palabra — Trátelo como un punto de partida y ajuste los tokens antes de enviarlos.

Combinar con: claude-code-design-skills

Aplicar ingeniería inversa a una captura de pantalla en un sistema de diseño

👤 Diseñadores con imágenes de referencia pero aún sin sistema. ⏱ ~15 min beginner

Cuándo usarlo: Tienes un tiro de Dribbble que te encanta y quieres que se vea en tu aplicación.

Flujo

Alimenta la imagen

Genera una habilidad de tono a partir de esta captura de pantalla.✓ Copiado

→ Colores muestreados; familia tipográfica inferida; escala de espaciado propuesta
Iterar

Oscurezca el acento un 15%, ajuste el espaciado a 4/8/12/16.✓ Copiado

→ Fichas regeneradas

Resultado: Un sistema limpio y propio desde una única referencia.

Errores comunes

Extraer una paleta de un JPEG con compresión agresiva — Prefiere fuentes PNG o SVG para la extracción de paletas

Genere habilidades por marca para un producto multiinquilino

👤 Equipos que envían UI de marca blanca ⏱ ~60 min intermediate

Cuándo usarlo: Tienes 5 clientes y necesitas 5 temas de marca sin trabajo de clonación.

Flujo

Generar lotes

Para cada URL de marca de cliente, genere una habilidad de tono en ~/.claude/skills/brand-<slug>/.✓ Copiado

→ N habilidades creadas con una estructura consistente
Solicitar por inquilina

Al crear una interfaz de usuario para el inquilino X, active la marca X antes de escribir el código.✓ Copiado

→ El agente aplica los tokens correctos automáticamente

Resultado: Temas de marca blanca que puedes intercambiar mediante la activación de habilidades.

Combinar con: claude-code-design-skills

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

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

Utilice los tokens de hue al convertir fotogramas de Figma en código

Aplique tokens de marca Acme al convertir este marco de Figma a Next.js.✓ Copiado

hue-brand-skill + magic-ui-mcp

Elija componentes de Magic UI y sintonícelos mediante tokens de tono

Instale Magic UI desenfoque y desvanecimiento, coloréelo con acento de marca.✓ Copiado

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

Verificar que la marca generada pase el contraste + todas las reglas

Audite las paletas claras y oscuras de Brand-Acme para WCAG AA.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
hue:generate (SKILL)	URL \| brand name \| screenshot + optional notes	Inicio de un nuevo producto o incorporación de la marca de un cliente.	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguna
Tokens por llamada: Moderado; los artefactos generados se suman
Monetario: Gratis
Consejo: Generar una vez; reutilice la habilidad por marca resultante en todas las sesiones.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Sin credenciales

Salida de datos: Si se utiliza la entrada de URL, la habilidad recupera la URL. Las capturas de pantalla permanecen locales.

La extracción de marca de una URL no otorga licencia sobre la propiedad intelectual de nadie; utilícela como inspiración, no como reproducción directa.
Las capturas de pantalla de otros productos están protegidas por sus derechos de autor. Genera tu propia marca, no clones la de ellos.

Resolución de problemas

Errores comunes y soluciones

La paleta generada se ve turbia

Sesgo hacia la referencia SVG/PNG; Los archivos JPEG pierden saturación. O proporcione anclajes hexagonales que la habilidad debería respetar.

Verificar: Inspect generated tokens.json for the flagged colors

La habilidad por marca no se activa

La descripción de SKILL.md debe describir cuándo activarse; asegúrese de que la descripción del texto frontal incluya el nombre de la marca.

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

El contraste falla en el modo oscuro

Pídale al tono que se regenere con el primer modo oscuro; anular los neutrales.

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

Alternativas

hue vs otros

Alternativa	Cuándo usarla	Contrapartida
claude-code-design-skills	Tienes un marco para convertir; ya tienes una marca	No genera marca, consume una
magic-ui-mcp	Quiere componentes disponibles en el mercado, no un sistema de marca	Biblioteca, no idioma
claude-design-auditor-skill	Quiere evaluar un diseño existente, no producir uno	Evalúa, no genera

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills