Huepar dominikmartn

Hue Skill.

Créez les règles qui guideront les futurs travaux d'interface, et pas seulement un écran terminé.

Systèmes de design
Création de Skills
Design tokens

Télécharger OpenDesign Voir le guide d'utilisation

Revue de la source · HueSKILL.md

Tâche Systèmes de design Produit • Un Skill de design réutilisable avec un fichier design-model.yaml comme source de référence. • Des fichiers de référence pour les tokens, les composants et les correspondances de plateformes. • Des aperçus HTML de tableau de bord, de bibliothèque de composants, de page d'atterrissage et d'écran d'application. Avant de commencer Nécessite un accès aux fichiers, des outils adaptés pour inspecter les références, Node pour validate.mjs et une revue dans le navigateur pour s'assurer du rendu visuel. La disponibilité des outils influe sur la fidélité de l'extraction.

Résumé éditorial · source examinée le 2026-10-07 · exemple non généré

01 Fonctionnement

Transformez un langage de design en Skill réutilisable

Génère un skill de design réutilisable à partir d'une analyse de références, d'un modèle YAML partagé, de documentation et de quatre aperçus validés.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Hue est un méta-Skill qui produit un autre Skill de langage de design. Il peut partir d'une marque, d'une URL, d'une base de code, de captures d'écran, d'une description ou d'un Skill existant à remixer. Il sépare les faits de design observés des choix dérivés, consigne les décisions dans design-model.yaml et génère à partir de ce modèle la documentation et les aperçus en aval.

Sa sortie ne se limite pas aux couleurs et aux polices. La source couvre les inventaires de composants, le raisonnement sur les icônes de repli, la composition de la scène hero, les tokens clairs et sombres, les correspondances de plateformes et quatre démonstrations visuelles. Elle exige aussi une validation et une revue visuelle. La source examinée contient des consignes incohérentes sur l'origine des polices : vérifiez donc précisément la licence et la disponibilité des polices au lieu de considérer chaque recommandation comme compatible.

Livrables attendus

Un Skill de design réutilisable avec un fichier design-model.yaml comme source de référence.
Des fichiers de référence pour les tokens, les composants et les correspondances de plateformes.
Des aperçus HTML de tableau de bord, de bibliothèque de composants, de page d'atterrissage et d'écran d'application.

Voir le brief d'exemple

Du brief à la revue

01
Analyser l'entrée
Recueillez si possible des valeurs réelles à partir de la source ou des styles calculés, et signalez les observations de moindre confiance issues de captures d'écran ou de la récupération de texte.
02
Confirmer la direction
Passez en revue l'interprétation esthétique et les tokens principaux avant de générer un ensemble de fichiers plus large.
03
Construire d'abord le modèle
Consignez dans YAML les primitives, les rôles sémantiques, les composants, les icônes de repli et les décisions sur la scène hero.
04
Générer et valider
Produisez les références et les aperçus à partir du modèle, exécutez le validateur fourni et inspectez les rendus dans les deux modes.

02 Cas d’usage

Quand l'utiliser

Nécessite un accès aux fichiers, des outils adaptés pour inspecter les références, Node pour validate.mjs et une revue dans le navigateur pour s'assurer du rendu visuel. La disponibilité des outils influe sur la fidélité de l'extraction.

Un bon choix pour

Une charte de marque réutilisableUtile lorsque des sessions répétées avec un assistant ont besoin d'un langage visuel plus explicite.
Remix de Skills de designPermet de modifier certaines dimensions choisies tout en préservant la philosophie existante et les règles non concernées.

Limites à vérifier

Pas une cession de droits sur les ressourcesLes polices, icônes, photographies et rendus de produit propriétaires observés ne sont pas automatiquement autorisés à la redistribution.
Pas un clonage exact de marqueLes kits de repli et les composants dérivés doivent être identifiés honnêtement.
Analyse dépendante de l'environnementL'inspection des styles calculés, les captures d'écran du navigateur et la validation locale nécessitent des outils disponibles ; des entrées plus faibles réduisent la confiance.

Apportez ces éléments

Référence de designFournissez une URL de marque, une base de code, des captures d'écran, une direction écrite ou un Skill existant.
Périmètre et plateformeIndiquez le domaine du produit et si des correspondances CSS, Tailwind ou SwiftUI sont utiles.
Contraintes de ressources et de marqueIdentifiez les éléments propriétaires, les solutions de repli approuvées et les décisions qui doivent rester inchangées.

03 Décisions importantes

Les décisions qui comptent

Observé ou dérivé
Un bouton trouvé dans la source et un interrupteur nouvellement déduit ne doivent pas être présentés comme également vérifiés.
Un seul modèle limite les dérives
Générer les documents et les aperçus à partir du même YAML réduit les écarts entre les tokens annoncés et les valeurs rendues.
Tester sur des écrans d'application
Un langage de design qui ne fonctionne que sur un hero peut échouer sur un écran d'application dense ; le quatrième aperçu teste cette différence.

04 Exemple de brief

Essayez un brief ciblé

Le brief d'exemple ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez le dépôt complet du générateur, avec ses modèles et son script de validation. Les dossiers de Skill générés ont leurs propres noms de détection et emplacements d'installation, qui diffèrent selon l'agent.

Fichier source amont

https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

Commencez par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple

Utilise hue pour créer un Skill de langage de design réutilisable à partir du code d'interface local et des captures d'écran fournis. Distingue les composants observés de ceux qui sont dérivés, conserve notre accent réel et le traitement des coins, et propose des solutions de repli sous licence pour les polices et les icônes. Confirme la direction et les tokens principaux, puis génère le modèle, les références et les quatre aperçus avec des preuves de validation.

Inspecter le résultat

Comparez la sortie réelle à ces critères observables.

Chaque token rendu renvoie à design-model.yaml.
Les ressources propriétaires observées et les choix de repli sont clairement distingués.
Tous les fichiers HTML générés passent la validation structurelle et une véritable revue visuelle.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: dominikmartn
Dépôt: dominikmartn/hue
Fichier du Skill: SKILL.md
Licence: MIT
Instantané examiné: 2026-10-07 · a910e31cd24b

Résumé éditorial de la source

Génère un skill de design réutilisable à partir d'une analyse de références, d'un modèle YAML partagé, de documentation et de quatre aperçus validés.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Hue ne construit-il qu'une page d'atterrissage ?

Non. L'aperçu de la page d'atterrissage n'est qu'une démonstration d'un Skill de design généré, aux côtés d'un tableau de bord, d'une bibliothèque de composants et d'un écran d'application.

Peut-il réviser un Skill de design existant ?

Oui. Le parcours de remix de la source modifie d'abord le modèle, puis ne régénère que les fichiers concernés au lieu de remplacer tout le système.

Prétend-il que la marque source utilise le kit d'icônes de repli ?

Il ne devrait pas. La source distingue explicitement le style d'icônes observé du kit sous licence libre choisi pour les aperçus.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesign Parcourir les Skills de design