106.9K+Télécharger
Aller au guide d’utilisation
Color Motionpar iart-ai

Color Motion Skill.

Concevez des palettes animées, des transitions perceptuelles et des exports cohérents.

  • Systèmes de couleurs
  • Direction du mouvement
Télécharger OpenDesignVoir le guide d'utilisation
Analyse de la source · color-motionSKILL.md
Tâche Concevez des palettes animées, des transitions perceptuelles et des exports cohérents. Livrables Une palette avec valeurs de couleur et rôles explicites. Avant de commencer Les conseils de lecture et d’export de la source doivent encore être vérifiés dans le logiciel installé et le véritable navigateur cible.
Synthèse éditoriale · source vérifiée le 2026-11-02 · pas un exemple généré

01 Fonctionnement

Concevez des palettes animées, des transitions perceptuelles et des exports cohérents

Explorez l’interpolation OKLCH et Lab, les dégradés animés, l’ordre de l’étalonnage et les contrôles de couleur entre aperçu et export.

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

La méthode de travail

color-motion traite des choix de couleur dans une création animée : construction de palette, transitions de dégradé, étalonnage d’ambiance et cohérence du rendu. Il propose une palette sobre avec des valeurs explicites et utilise des espaces perceptuels comme OKLCH ou Lab pour concevoir l’interpolation.

Pour le Web, la source décrit un HTML autonome avec un seul pilote d’animation et une inspection d’images figées. Pour la vidéo, elle oriente vers le diagnostic de gestion des couleurs. Un export délavé doit être analysé via l’espace colorimétrique de travail, les balises intégrées et l’interprétation du lecteur avant de recolorer la création.

Livrables attendus

  • Une palette avec valeurs de couleur et rôles explicites.
  • Du code de dégradé ou de transition dans un exemple consultable dans le navigateur.
  • Une liste de contrôle d’étalonnage ou de gestion des couleurs adaptée au workflow vidéo choisi.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Attribuer les rôles des couleurs

    Choisissez une couleur principale, un accent et des neutres adaptés au brief. Séparez les besoins de hiérarchie et de contraste des variations décoratives.

  2. 02
    Construire le chemin de transition

    Concevez l’interpolation dans un espace perceptuel et choisissez un seul pilote d’animation. Examinez le point médian ainsi que les deux couleurs extrêmes.

  3. 03
    Vérifier l’aspect livré

    Figez des images Web représentatives ou comparez les balises et l’aspect de la vidéo rendue dans le contexte de lecture cible. Examinez les bandes de couleur et variations de luminosité avant livraison.

02 Cas d’usage

Quand l’utiliser

Les conseils de lecture et d’export de la source doivent encore être vérifiés dans le logiciel installé et le véritable navigateur cible.

Un bon choix

  • Un dégradé devient terne au milieuLe Skill examine le chemin entre les couleurs, pas uniquement les échantillons aux extrémités.
  • L’export diffère de l’aperçuUtilisez le diagnostic pour examiner la chaîne colorimétrique et les hypothèses du lecteur.

Limites à vérifier

  • La couleur varie selon l’environnementLes conseils de lecture et d’export de la source doivent encore être vérifiés dans le logiciel installé et le véritable navigateur cible.
  • Une palette ne prouve pas l’accessibilitéTextes et contrôles doivent être vérifiés dans leurs états rendus, y compris sur les arrière-plans animés.

Éléments à fournir

  • Couleurs de marqueFournissez les valeurs validées et les contraintes de palette.
  • Objectif d’animationDécrivez le dégradé, le changement d’état ou l’étalonnage vidéo et sa durée.
  • Environnement de livraisonIdentifiez navigateur ou lecteur vidéo, réglages d’export et différence observée en cas de diagnostic.

03 Décisions importantes

Les choix importants

  1. Interpolation explicite

    Nommer l’espace colorimétrique fait du point médian un choix délibéré.

  2. Animation inspectable

    Les captures de début, milieu et fin révèlent les bandes de couleur ou associations illisibles.

  3. Diagnostic distinct

    L’examen des balises et de la lecture aide à distinguer un problème de rendu d’une décision de design.

04 Exemple de brief

Essayez un brief ciblé

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

Examiner la source et la configuration

Fournissez les valeurs validées et les contraintes de palette.

Fichier source amont
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md

La référence ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant de les utiliser ; ce n’est pas une commande d’installation.

Commencer par un seul livrable

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

Exemple de brief
Utilise color-motion pour créer un arrière-plan animé sobre à partir des couleurs bleu marine et ambre fournies pour notre marque. Livre un HTML autonome avec du texte lisible dans une couleur neutre et un cycle lent de dégradé. Définis la palette en hex et OKLCH, examine le milieu de la transition pour éviter les couleurs ternes ou troubles et prévois un état statique de mouvement réduit. Capture les mêmes instants de début, milieu et fin après chaque ajustement. N’ajoute pas de second pilote d’animation. Si le navigateur se comporte différemment de l’interpolation prévue, explique la limite et garde le texte lisible dans chaque état vérifié.

Vérifier le résultat

Comparez le résultat réel à ces critères observables.

  • Examinez couleurs extrêmes et médianes, bandes de couleur et contraste du texte.
  • Vérifiez qu’une seule horloge pilote l’animation et que les images figées sont reproductibles.
  • Testez la présentation statique de mouvement réduit et l’environnement réel de livraison.

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 OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

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

Propriétaire de la source
iart-ai
Dépôt
iart-ai/motion-design-skills
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 3c129f769d90
Résumé éditorial de la source
Concevez des palettes animées, des transitions perceptuelles et des exports cohérents.

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

Pourquoi le point médian est-il important ?

Deux couleurs extrêmes attrayantes peuvent traverser une zone terne indésirable. Le Skill intègre l’espace d’interpolation et les images intermédiaires au design.

Cela concerne-t-il uniquement les dégradés Web ?

Non. La source couvre aussi l’ordre de l’étalonnage et le diagnostic colorimétrique vidéo, avec des références distinctes.

Faut-il recolorer immédiatement un export délavé ?

La source recommande d’abord de vérifier espace colorimétrique de travail, balises colorimétriques intégrées et chaîne de lecture. Un décalage de chaîne peut modifier l’aspect sans erreur dans la création.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

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 OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md