/ Annuaire / Playground / hue
← Tous les serveurs ↗ GitHub
● Communauté dominikmartn ⚡ Instantané

hue

par dominikmartn · dominikmartn/hue

Nourrissez une marque (URL, nom ou capture d'écran) → obtenez un langage de conception complet : jetons, typographie, espacement, lumière/obscurité, recettes de héros, kit d'icônes et une compétence de système de conception générée.

dominikmartn/hue est une compétence Claude open source qui transforme n'importe quelle référence de marque en un système de conception complet. Pointez-le sur curseur.com ou Raycast, collez une capture d'écran ou nommez une ambiance - il analyse et génère des jetons couleur + typographie + espacement, une petite bibliothèque de composants, des variantes clair/sombre, des recettes de héros et un kit d'icônes correspondant. Le package de langage de conception comprend des fichiers de modèle YAML et des exemples de pages de destination HTML ; il génère également une compétence Claude par marque que vous pouvez réutiliser au fil des sessions afin que votre agent reste automatiquement sur la marque.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

hue-brand-skill.replay ▶ prêt
0/0

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

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.

Déroulement
  1. 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é
  2. 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

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

OutilEntréesQuand appelerCoû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.

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

AlternativeQuand l'utiliserCompromis
claude-code-design-skillsVous avez un cadre à convertir ; tu as déjà une marqueNe génère pas de marque – en consomme une
magic-ui-mcpVous voulez des composants disponibles dans le commerce, pas un système de marqueUne bibliothèque, pas une langue
claude-design-auditor-skillVous 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