motion-designer

Define motion character, timing vocabulary, and easing curves for brand-aligned UI animations.

1|Updated Mar 16, 2026

Search Tags:#timing #animation #ux #motion-design #easing #brand-motion

Ready to run

npx skills add https://github.com/mewomewoliu/ici-design-studio --skill motion-designer-mewomewoliu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-designer
Source: https://github.com/mewomewoliu/ici-design-studio/tree/main/design-studio/motion-designer
Command: npx skills add https://github.com/mewomewoliu/ici-design-studio --skill motion-designer-mewomewoliu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Motion design guidance to define a cohesive language for interactions, so product experiences feel deliberate and brand-consistent.

Core Features & Use Cases

Define Motion Character (speed, weight, expressiveness) to shape brand personality across interfaces.
Establish Timing Vocabulary with named durations to standardize micro- and macro-transitions.
Provide an Easing Library and a Pattern Library for reusable motion primitives (fade, slide, scale, page transitions).
Support Scroll Animation Mode and Brand Motion Mode for different surfaces and moments.
Collaboration model and governance to align Design, Engineering, and Design Systems.

Quick Start

Define your brand's motion character, timing vocabulary, and easing rules, then draft initial animation patterns for a representative UI component.

Frequently Asked Questions about motion-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a cohesive motion design language for UI animations?▼

To create a cohesive UI motion design language, define your brand's motion character, establish a timing vocabulary with named durations, build an easing library, and draft reusable animation patterns for consistent interface interactions.

What is motion character and how does it shape brand personality in UX?▼

Motion character defines the speed, weight, and expressiveness of UI animations. It shapes brand personality by providing baseline rules that make interface interactions feel deliberate and brand-consistent across all product surfaces.

How do I standardize UI transition timing and easing across design systems?▼

Standardize UI transition timing and easing by establishing a timing vocabulary with named durations for micro- and macro-transitions, alongside a shared easing library and pattern library for reusable motion primitives like fades, slides, and scales.

Can I define scroll animation and brand motion modes for different interface surfaces?▼

Yes, you can define specific scroll animation mode and brand motion mode to apply tailored motion patterns across different interface surfaces. This ensures appropriate motion delivery for standard interactions versus distinct brand experiences.

How do I align Design and Engineering teams on UI animation governance?▼

Align Design and Engineering teams on UI animation governance by establishing a collaboration model within your motion spec. This defines structured rules for timing, easing, and patterns that both teams enforce across the design system.