106.9K+Скачать
Перейти к руководству
Color Motionавтор iart-ai

Color Motion Навык.

Проектируйте динамические палитры, перцептивные цветовые переходы и согласованный экспорт.

  • Цветовые системы
  • Режиссура движения
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · color-motionSKILL.md
Задача Проектируйте динамические палитры, перцептивные цветовые переходы и согласованный экспорт. Результаты Палитра с точными цветовыми значениями и назначенными ролями. Перед началом Рекомендации источника о плеерах и экспорте всё равно нужно проверить в установленном ПО и реальном целевом браузере.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Проектируйте динамические палитры, перцептивные цветовые переходы и согласованный экспорт

Изучите интерполяцию OKLCH и Lab, анимированные градиенты, порядок цветокоррекции и проверки цвета между предпросмотром и экспортом.

Процесс на основе источникаНе тест выполнения

Принцип работы

color-motion посвящён цветовым решениям в движущейся работе: построению палитры, градиентным переходам, созданию настроения цветокоррекцией и согласованности рендера. Он предлагает сдержанную палитру с точными значениями и перцептивные цветовые пространства, например OKLCH или Lab, для проектирования интерполяции.

Для веба источник описывает отдельный HTML-результат с одним механизмом управления анимацией и проверкой остановленных кадров. Для видео он направляет к диагностике управления цветом. Если экспорт выглядит блеклым, до перекрашивания работы нужно исследовать рабочее цветовое пространство, встроенные теги и интерпретацию при воспроизведении.

Ожидаемые результаты

  • Палитра с точными цветовыми значениями и назначенными ролями.
  • Код градиента или перехода в примере, открываемом в браузере.
  • Чек-лист цветокоррекции или управления цветом для выбранного видеопроцесса.
Смотреть пример задания

От задания до проверки

  1. 01
    Назначьте цветовые роли

    Выберите основной цвет, акцент и нейтральные тона под бриф. Отделите требования иерархии и контраста от декоративных вариаций.

  2. 02
    Постройте путь перехода

    Спроектируйте интерполяцию в перцептивном пространстве и выберите один механизм анимации. Проверьте середину, а не только оба конечных цвета.

  3. 03
    Проверьте итоговый вид

    Остановите характерные веб-кадры или сравните теги и вид отрендеренного видео в целевой среде воспроизведения. До передачи исследуйте полосы на градиентах и сдвиги яркости.

02 Когда использовать

Когда использовать

Рекомендации источника о плеерах и экспорте всё равно нужно проверить в установленном ПО и реальном целевом браузере.

Хорошо подходит

  • Градиент мутнеет в серединеНавык сосредоточен на пути между цветами, а не только на конечных образцах.
  • Экспорт отличается от предпросмотраИспользуйте диагностический маршрут для проверки цветового процесса и предположений о плеере.

Ограничения

  • Поведение цвета зависит от средыРекомендации источника о плеерах и экспорте всё равно нужно проверить в установленном ПО и реальном целевом браузере.
  • Палитра не доказывает доступностьТекст и элементы управления нужно проверять в отрендеренных состояниях, включая анимированные фоны.

Что подготовить

  • Цвета брендаПредоставьте утверждённые значения и ограничения палитры.
  • Цель анимацииОпишите градиент, смену состояния или цветокоррекцию видео и длительность.
  • Среда доставкиУкажите браузер или видеоплеер, настройки экспорта и наблюдаемое расхождение, если ищете неисправность.

03 Важные решения

Важные решения

  1. Явная интерполяция

    Указание цветового пространства делает среднюю точку осознанным выбором.

  2. Движение, доступное проверке

    Снимки начала, середины и конца выявляют полосы или нечитаемые сочетания.

  3. Раздельная диагностика

    Проверка тегов и воспроизведения помогает отличить проблему рендер-процесса от дизайнерского решения.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Предоставьте утверждённые значения и ограничения палитры.

Исходный файл в репозитории
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй color-motion для сдержанного анимированного фона из предоставленных тёмно-синего и янтарного цветов бренда. Создай отдельный HTML-пример с читаемым текстом нейтрального цвета и одним медленным циклом градиента. Задай палитру в hex и OKLCH, проверь середину перехода на тусклые или грязные цвета и добавь статичное состояние reduced-motion. После каждой корректировки снимай те же моменты начала, середины и конца. Не добавляй второй механизм управления анимацией. Если поведение браузера отличается от задуманной интерполяции, опиши ограничение и сохраняй читаемость текста во всех проверенных состояниях.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Проверьте конечные и средние цвета, полосы и контраст текста.
  • Убедитесь, что анимацией управляют одни часы, а остановленные кадры воспроизводятся одинаково.
  • Проверьте статичное reduced-motion-представление и реальную среду доставки.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
iart-ai
Репозиторий
iart-ai/motion-design-skills
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 3c129f769d90
Редакционное резюме источника
Проектируйте динамические палитры, перцептивные цветовые переходы и согласованный экспорт.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Почему важна середина?

Два привлекательных конечных цвета могут проходить через нежелательную тусклую область. Навык включает пространство интерполяции и промежуточные кадры в проектирование.

Это только для веб-градиентов?

Нет. Источник также описывает порядок цветокоррекции и диагностику управления цветом видео, с отдельными справочными материалами для этих задач.

Нужно сразу перекрашивать блеклый экспорт?

Источник рекомендует сначала проверить рабочее цветовое пространство, встроенные цветовые теги и путь воспроизведения. Несогласованность процесса может менять вид без ошибки в самой работе.

OpenDesign

Храните задание и работу над дизайном вместе.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md