/ Directorio / Playground / hue
← Todos los servidores ↗ GitHub
● Comunidad dominikmartn ⚡ Instantáneo

hue

por dominikmartn · dominikmartn/hue

Introduzca el tono de una marca (URL, nombre o captura de pantalla) → obtenga un lenguaje de diseño completo: tokens, tipografía, espaciado, luz/oscuridad, recetas de héroes, kit de iconos y una habilidad de sistema de diseño generada.

dominikmartn/hue es una habilidad de código abierto de Claude que convierte cualquier referencia de marca en un sistema de diseño completo. Apunte a cursor.com o Raycast, pegue una captura de pantalla o nombre un estado de ánimo: analiza y genera tokens de color + tipografía + espaciado, una pequeña biblioteca de componentes, variantes claro/oscuro, recetas de héroes y un kit de íconos coincidentes. El paquete de lenguaje de diseño incluye archivos de modelo YAML y páginas de inicio HTML de muestra; también genera una habilidad de Claude por marca que puede reutilizar en todas las sesiones para que su agente permanezca en la marca automáticamente.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

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

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

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.

Flujo
  1. 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.
  2. Avance
    Representa un héroe de muestra con el nuevo sistema.✓ Copiado
    → La muestra HTML muestra tokens en contexto

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

HerramientaEntradasCuándo llamarCoste
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.

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

AlternativaCuándo usarlaContrapartida
claude-code-design-skillsTienes un marco para convertir; ya tienes una marcaNo genera marca, consume una
magic-ui-mcpQuiere componentes disponibles en el mercado, no un sistema de marcaBiblioteca, no idioma
claude-design-auditor-skillQuiere evaluar un diseño existente, no producir unoEvalúa, no genera

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills