106.9K+Descargar
Ir a la guía de uso
Color Motionpor iart-ai

Color Motion Skill.

Diseña paletas animadas, transiciones perceptuales y exportaciones coherentes.

  • Sistemas de color
  • Dirección de movimiento
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · color-motionSKILL.md
Tarea Diseña paletas animadas, transiciones perceptuales y exportaciones coherentes. Resultados Una paleta con valores y roles de color explícitos. Antes de empezar Las recomendaciones sobre reproductores y exportación deben verificarse en el software instalado y el navegador de destino real.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Diseña paletas animadas, transiciones perceptuales y exportaciones coherentes

Explora interpolación OKLCH y Lab, degradados animados, orden de etalonaje y controles para diferencias de color entre vista previa y exportación.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

color-motion aborda las decisiones de color en una pieza animada: paleta, transiciones de degradado, etalonaje de ambiente y coherencia de renderizado. Propone una paleta contenida con valores explícitos y emplea espacios perceptuales como OKLCH o Lab para diseñar la interpolación.

Para web, la fuente describe un HTML autónomo con un único controlador de animación e inspección de fotogramas congelados. Para vídeo, dirige al diagnóstico de gestión del color. Antes de recolorear una exportación deslavada, hay que investigar el espacio de color de trabajo, las etiquetas incrustadas y la interpretación del reproductor.

Entregables esperados

  • Una paleta con valores y roles de color explícitos.
  • Código de degradado o transición en un ejemplo visible en el navegador.
  • Una lista de etalonaje o gestión del color para el flujo de vídeo elegido.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Asigna roles de color

    Elige color principal, acento y neutros adecuados al brief. Separa jerarquía y contraste de la variación decorativa.

  2. 02
    Construye la trayectoria de transición

    Diseña la interpolación en un espacio perceptual y selecciona un controlador de animación. Inspecciona el punto medio además de los dos extremos.

  3. 03
    Comprueba el aspecto entregado

    Congela fotogramas web representativos o compara etiquetas y apariencia del vídeo en el reproductor de destino. Investiga bandas y cambios de brillo antes de entregar.

02 Cuándo usarlo

Cuándo usarla

Las recomendaciones sobre reproductores y exportación deben verificarse en el software instalado y el navegador de destino real.

Buen encaje

  • El degradado se ensucia a mitad de caminoLa Skill atiende al recorrido entre colores, no solo a las muestras de los extremos.
  • La exportación difiere de la vista previaUsa el diagnóstico para revisar la cadena de color y las suposiciones del reproductor.

Límites que conviene comprobar

  • El color varía según el entornoLas recomendaciones sobre reproductores y exportación deben verificarse en el software instalado y el navegador de destino real.
  • Una paleta no demuestra accesibilidadHay que comprobar texto y controles en sus estados renderizados, incluidos fondos animados.

Aporta estos datos

  • Colores de marcaProporciona valores aprobados y restricciones de paleta.
  • Objetivo de movimientoDescribe el degradado, cambio de estado o etalonaje y su duración.
  • Entorno de entregaIdentifica navegador o reproductor, ajustes de exportación y, al diagnosticar, la diferencia observada.

03 Decisiones importantes

Decisiones importantes

  1. Interpolación explícita

    Definir el espacio de color convierte el punto medio en una elección deliberada.

  2. Movimiento inspeccionable

    Las capturas inicial, intermedia y final revelan bandas o combinaciones ilegibles.

  3. Diagnóstico separado

    Revisar etiquetas y reproducción distingue problemas de renderizado de decisiones de diseño.

04 Ejemplo de brief

Prueba un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Proporciona valores aprobados y restricciones de paleta.

Archivo fuente original
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa color-motion para crear un fondo animado contenido a partir de nuestros colores azul marino y ámbar. Entrega un HTML autónomo con texto legible en un color neutro y un ciclo lento de degradado. Especifica la paleta en hex y OKLCH, revisa el punto medio para evitar colores apagados o sucios e incluye un estado estático de movimiento reducido. Captura los mismos momentos inicial, intermedio y final tras cada ajuste. No añadas un segundo controlador de animación. Si el navegador difiere de la interpolación prevista, explica la limitación y mantén el texto legible en todos los estados comprobados.

Comprueba el resultado

Comprueba el resultado real con estos criterios observables.

  • Inspecciona colores extremos e intermedios, bandas y contraste del texto.
  • Verifica que un reloj controla la animación y que los fotogramas congelados se reproducen.
  • Prueba la presentación estática con movimiento reducido y el entorno real de entrega.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
iart-ai
Repositorio
iart-ai/motion-design-skills
Archivo del skill
SKILL.md
Licencia
MIT
Versión revisada
2026-11-02 · 3c129f769d90
Resumen editorial de la fuente
Diseña paletas animadas, transiciones perceptuales y exportaciones coherentes.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Por qué importa el punto medio?

Dos extremos atractivos pueden atravesar una zona apagada no deseada. La Skill incorpora al diseño el espacio de interpolación y los fotogramas intermedios.

¿Solo sirve para degradados web?

No. La fuente también cubre orden de etalonaje y diagnóstico de gestión del color en vídeo, con referencias separadas.

¿Debo recolorear inmediatamente una exportación deslavada?

La fuente recomienda comprobar primero espacio de color de trabajo, etiquetas de color incrustadas y reproducción. Una incompatibilidad en la cadena puede cambiar el aspecto sin que la obra esté mal.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md