design-motion-principlesавтор Kyle Zantos

Design Motion Principles Skill.

Скилл для Claude Code и Codex для моушена и видео: осмысленная анимация взаимодействия или ревью существующей анимации по Ковальски, Крехелю и Томпкинсу.

Анимация и видео

Скачать OpenDesign Инструкция по использованию

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

Преамбула и заголовки разделов, прочитанные из исходного файла 2026-09-14 · 6 794 символа полностью

01 Что делает

Что делает Skill design-motion-principles в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Skill для дизайна взаимодействий и анимации для агентов для кода, работающий в двух режимах. Create создаёт интерактивные компоненты с осмысленной анимацией; Audit проверяет существующую анимацию и выдаёт результаты по каждому дизайнеру, включая паттерны AI-slop, в фирменном HTML-отчёте с зацикленными демо.

Советы организованы вокруг трёх точек зрения — Эмиль Ковальски о сдержанности и скорости, Якуб Крехел о продакшн-полировке, Джей Томпкинс об игривом экспериментировании — с весом, зависящим от типа проекта, а не применяемым универсально. Охват — анимация веб- и app-интерфейсов: HTML/CSS, React, Framer Motion, переходы iOS/Android и анимация дизайн-систем. Фильтр частоты, зависящая от контекста длительность и обязательная обработка prefers-reduced-motion работают в обоих режимах.

Что он выдаёт

Интерактивные компоненты, созданные с осмысленной анимацией в режиме Create.
Отчёт с обзором по каждому дизайнеру в режиме Audit.
Фирменный HTML-отчёт, содержащий зацикленные демо результатов.
Шаблон отчёта об аудите, по умолчанию отображаемый как HTML, с доступным терминальным режимом в качестве флага.

Смотрите пример запроса ↗

Как это работает

01
Определение режима по запросу
Формулировки в духе сборки выбирают Create; audit, review, evaluate, feedback или «хороша ли эта анимация» выбирают Audit.
02
Чтение соответствующего файла workflow
Определение режима — это шаг 0, определяющий всё остальное: файл workflow для этого режима выполняется в точности как написан.
03
Взвешивание трёх дизайнеров по контексту
Emil, Jakub и Jhey рассматриваются как контекстно-зависимые точки зрения, а не как универсальные правила.
04
Применять рекомендации по частоте и длительности
Сначала определяется, как часто срабатывает взаимодействие, а затем — целевая длительность на основе соответствующей линзы.
05
Выдавать артефакт для режима
Create возвращает компоненты; Audit возвращает отчёт по каждому дизайнеру, для каждого замечания которого создаётся демо-карточка на основе шаблона визуального контейнера.

02 Определите своё применение

Когда использовать skill design-motion-principles

Используйте skill design-motion-principles в Claude Code или Codex, когда задача касается анимации и видео такого типа. Область применения и ограничения взяты из файла самого skill.

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

Инструменты продуктивности, такие как Linear или Raycast, где ведущими являются сдержанность и правила скорости Emil, а Jhey используется только для онбординга.
Приложения для детей и образовательные продукты, где отделка и удовольствие важнее правил скорости продуктивности, а Emil применяется только для высокочастотных игровых взаимодействий.
Творческие портфолио, где ведущую роль играет Jakub — для доработки, и Jhey — для изобретательности, а Emil ограничен высокочастотными взаимодействиями.
Мобильные приложения, где ведёт Jakub, Emil поддерживает, а Jhey добавляет приятные детали.

Знайте границы

Работа с анимацией за пределами веб- и app UI — игровые движки, Lottie, Rive или видео — где фреймворк частоты всё ещё применим, но специфичные для дизайнера приёмы могут не переноситься.
Оценка длительности по единому универсальному числу; отметка или ограничение длительности без учёта контекстного взвешивания явно запрещены.
Взаимодействия, инициированные клавиатурой, полностью исключаются из анимации, независимо от типа проекта.

Что предоставить

Тип проектаОн определяет первичное, вторичное и избирательное взвешивание, поэтому SaaS-дашборд указывает прежде всего на Emil, а не на Jakub.
Как часто запускается взаимодействиеФильтр по частоте применяется до того, как что-либо добавляется или утверждается, поэтому ответ меняет то, что вообще допустимо анимировать.
Сама анимация и её стекПереходы, состояния наведения, микровзаимодействия и анимации входа/выхода — в React, Framer Motion, CSS или HTML.

03 Внутри скилла

Правила, которые Skill design-motion-principles задаёт Claude Code и Codex

6 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Пусть частота триггера решает, анимировать или нет
Частые взаимодействия, срабатывающие сотни раз в день, не получают анимации или получают мгновенный переход; редкие могут быть выразительными.
Всегда обрабатывать prefers-reduced-motion
Требование сформулировано как охватывающее всё, что сгенерировано в режиме Create или проверено в режиме Audit, без исключений.
Спрашивать, когда запрос неоднозначен
Расплывчатый запрос вроде «посмотри на анимацию этого модального окна» не домысливается — пользователю предлагается выбрать Create или Audit.
Перевзвешивать дизайнеров в зависимости от типа проекта
Таблица соответствий меняет первичную, вторичную и избирательную линзы; для лендинга Jakub первичен, Jhey вторичен, Emil применяется только для форм и навигации.
Используйте видимость как проверку качества
Анимация, которая вызывает восторг при каждом взаимодействии, считается слишком заметной для продакшена.
Подгружайте референсы, которые требует режим
Режим Create всегда подгружает Motion Cookbook (рецепты для enter/exit, easing, springs, clip-path, @property, FLIP, scroll-driven); режим Audit подгружает собственные файлы, всегда активные.

04 Применение

Установить design-motion-principles в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить design-motion-principles в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

Общая форма команды skills CLI для skills/design-motion-principles/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по motion и видео

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что «вес» анимации соответствует тому, как часто взаимодействие реально срабатывает, а не тому, насколько эффектно оно выглядит.
Оценивайте финальную полировку по диапазону Jakub 200-500 мс, а не по единой глобальной длительности.
В режиме Audit проходите по систематическому чек-листу аудита, а не оценивайте анимацию на глаз.
Прогоняйте выводы через контрольный шлюз качества, который называет категории AI-slop-анимации и антипаттерны.
Для сложных анимаций проверяйте GPU-оптимизацию, использование will-change и layout thrash.

В OpenDesign импортируйте design-motion-principles по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Ветка main
Файл skill: skills/design-motion-principles/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 4a9ca87
License: MIT Из LICENSE.
Звёзды репозитория: 1 048 Снимок GitHub от 2026-09-14 для всего репозитория kylezantos/design-motion-principles. Это не рейтинг и не счётчик использования design-motion-principles.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

ШАГ 0: определение режима (сделайте это первым)Сопоставляет формулировку запроса с Create или Audit и уточняет, если это неоднозначно.
Три дизайнераКто такие Emil, Jakub и Jhey, на какой вопрос отвечает каждый, и оговорка об уважении к их работе.
Сопоставление контекста и перспективыСемь типов проектов, сопоставленных с основным, вторичным и избирательным весом дизайнера.
Основные принципы (оба режима)Шлюз частоты, рекомендации по длительности, золотое правило и неотменяемая доступность.
Индекс референсовКаждый файл-референс с условиями, при которых его нужно подгружать.
Индекс workflowДва файла workflow: собрать компоненты или проверить анимацию и составить отчёт.

Собственное описание skill

Эксперт по моушен-дизайну и дизайну взаимодействий на основе техник Emil Kowalski, Jakub Krehel и Jhey Tompkins. Два режима — создавать интерактивные компоненты с осмысленной анимацией или проверять существующие анимации на шаблоны AI-slop (аудит выдаёт фирменный HTML-отчёт с зацикленными демо). Используйте при создании, добавлении, анимации или проверке моушен-дизайна UI: переходов, ховер-состояний, микроинтеракций, анимаций появления/исчезновения или любой работы с анимацией в React, Framer Motion, CSS или HTML. Предоставляет взгляды каждого дизайнера с контекстным взвешиванием.

Описание из front-matter в SKILL.md. Полный файл содержит примерно 6 794 символа. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill design-motion-principles

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Нужен ли React, или это работает с обычным CSS и HTML?

Оба варианта в рамках охвата. Skill покрывает анимацию веб- и app-интерфейсов через HTML/CSS, React, Framer Motion или Motion, переходы iOS/Android и анимации дизайн-системы.

Как он решает, создавать что-то или проверять?

Он анализирует запрос на признаки Create или Audit, а если они неоднозначны — задаёт вопрос. Если AskUserQuestion недоступен, он переходит к обычному текстовому вопросу с предложением двух режимов.

Получит ли детское приложение ту же быструю, сдержанную анимацию, что и дашборд?

Нет. Вес зависит от контекста, поэтому в детском приложении приоритет отдаётся Jakub и Jhey — ради полировки и восторга, а не правилам скорости Emil, ориентированным на продуктивность; в этом контексте восторг считается целью.

Стоят ли за этим skill сами три дизайнера?

Нет. Линзы обобщают их публично опубликованные курсы, статьи, выступления и open-source проекты, а система весов — собственная интерпретация skill, названная в знак признания их заслуг.

Design Motion Principles

Запустите design-motion-principles на реальной задаче по Motion и видео.

Скачайте OpenDesign, импортируйте design-motion-principles по ссылке на SKILL.md, вставьте промпт выше и прочтите план до результата.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles