hue MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Entrées : URL de la marque, nom ou capture d'écran
Sorties : jetons (couleur, type, espacement), bibliothèque de composants, clair/obscur, recettes de héros, kit d'icônes
Génère une compétence Claude réutilisable par marque
17 exemples de marques dans le repo (atlas, velours, …) pour référence
Format SKILL.md simple ; travaille avec Claude Code et Codex

Démo en direct

Aperçu en pratique

hue-brand-skill.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/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
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.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 utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "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
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : hue

Dériver un système de conception à partir du site d'un concurrent

👤 Fondateurs et concepteurs prototypant rapidement un produit ⏱ ~20 min beginner

Quand l'utiliser : Vous aimez l'esthétique d'un site et souhaitez un système d'entrée de gamme allant dans le même sens.

Prérequis

Compétence installée — git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

Déroulement

Pointez sur une URL

Créez une compétence de conception à partir de curseur.com.✓ Copié

→ La sortie comprend une palette de couleurs, une paire de typographies, une échelle d'espacement, des composants et un SKILL.md généré
Aperçu

Créez un exemple de héros avec le nouveau système.✓ Copié

→ Un exemple HTML présente les jetons dans leur contexte
Installer en tant que compétence

Enregistrez la compétence de marque générée dans ~/.claude/skills/brand-<name>/.✓ Copié

→ SKILL.md enregistré ; les invites futures reprennent la marque

Résultat : Une voix de marque réutilisable que votre agent applique à chaque tâche ultérieure de l'interface utilisateur.

Pièges

Utiliser textuellement la marque de quelqu'un d'autre — Considérez-le comme un point de départ et réglez les jetons avant l'expédition

Combiner avec : claude-code-design-skills

Rétro-ingénierie d'une capture d'écran dans un système de conception

👤 Concepteurs avec des images de référence mais pas encore de système ⏱ ~15 min beginner

Quand l'utiliser : Vous avez un tir Dribbble que vous aimez et vous souhaitez le voir dans votre application.

Déroulement

Nourrir l'image

Générez une compétence de teinte à partir de cette capture d'écran.✓ Copié

→ Couleurs échantillonnées ; famille de types déduite ; échelle d'espacement proposée
Répéter

Assombrir l'accent de 15 %, resserrer l'espacement à 4/8/12/16.✓ Copié

→ Jetons régénérés

Résultat : Un système propre et propriétaire à partir d’une seule référence.

Pièges

Extraire une palette d'un JPEG avec une compression agressive — Préférer les sources PNG ou SVG pour l'extraction des palettes

Générez des compétences par marque pour un produit multi-tenant

👤 Équipes livrant des interfaces utilisateur en marque blanche ⏱ ~60 min intermediate

Quand l'utiliser : Vous avez 5 clients et avez besoin de 5 thèmes de marque sans travail de clonage.

Déroulement

Générer par lots

Pour chaque URL de marque client, générez une compétence hue sous ~/.claude/skills/brand-<slug>/.✓ Copié

→ N compétences créées avec une structure cohérente
Appliquer par locataire

Lors de la création de l’interface utilisateur pour le locataire X, activez brand-X avant d’écrire le code.✓ Copié

→ L'agent applique automatiquement les bons jetons

Résultat : Thèmes en marque blanche que vous pouvez échanger via l'activation des compétences.

Combiner avec : claude-code-design-skills

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

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

Utilisez les jetons de hue lors de la conversion des images Figma en code

Appliquez des jetons de marque Acme lors de la conversion de ce cadre Figma en Next.js.✓ Copié

hue-brand-skill + magic-ui-mcp

Choisissez les composants Magic UI, réglez via les jetons de teinte

Installez Magic UI Blur-Fade, coloriez-le avec l'accent de la marque.✓ Copié

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

Vérifier le contraste des passes de marque générées + les règles a11y

Auditez les palettes claires et sombres de Brand-Acme pour les WCAG AA.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
hue:generate (SKILL)	URL \| brand name \| screenshot + optional notes	Démarrage d'un nouveau produit ou lors de l'intégration de la marque d'un client	0

Coût et limites

Coût d'exécution

Quota d'API: Aucune
Tokens par appel: Modéré; les artefacts générés s'additionnent
Monétaire: Gratuite
Astuce: Générer une fois ; réutilisez la compétence par marque obtenue au fil des sessions.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucune information d'identification

Sortie de données : Si la saisie d'URL est utilisée, la compétence récupère l'URL. Les captures d'écran restent locales.

L'extraction de marque à partir d'une URL ne confère aucune licence sur la propriété intellectuelle de quiconque : utilisation à titre d'inspiration et non de reproduction directe.
Les captures d'écran d'autres produits sont soumises à leurs droits d'auteur. Générez votre propre marque, ne clonez pas la leur.

Dépannage

Erreurs courantes et correctifs

La palette générée semble boueuse

Biais en faveur de la référence SVG/PNG ; Les JPEG perdent leur saturation. Ou fournissez des ancres hexagonales que la compétence devrait honorer.

Vérifier : Inspect generated tokens.json for the flagged colors

La compétence par marque ne s'active pas

La description de SKILL.md doit décrire quand déclencher ; assurez-vous que la description du contenu inclut le nom de la marque.

Vérifier : head ~/.claude/skills/brand-<name>/SKILL.md

Le contraste échoue en mode sombre

Demandez à Hue de se régénérer avec le mode sombre All-First ; remplacer les neutres.

Vérifier : Run claude-design-auditor on the dark variants

Alternatives

hue vs autres

Alternative	Quand l'utiliser	Compromis
claude-code-design-skills	Vous avez un cadre à convertir ; tu as déjà une marque	Ne génère pas de marque – en consomme une
magic-ui-mcp	Vous voulez des composants disponibles dans le commerce, pas un système de marque	Une bibliothèque, pas une langue
claude-design-auditor-skill	Vous souhaitez évaluer une conception existante, pas en produire une	Évalue, ne génère pas

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills