Design
motion designanimationmicro-interactionsdesign systemUIMotion Design Specification
A complete motion design spec with timing tokens, easing curves, and reduced-motion fallbacks that keeps animations consistent and accessible.
Best For
- •A product designer defining a design system's motion language uses this so every future micro-interaction follows the same timing tokens.
- •A frontend engineer implementing onboarding transitions pulls the cubic-bezier values directly into Framer Motion or CSS.
- •A design lead auditing an app with inconsistent animation speeds uses the timing token structure to standardize duration across screens.
Prompt Template
Write a motion design specification for [PRODUCT_NAME] that will guide developers and motion designers implementing animations. The spec covers: [ANIMATION_SCOPE, e.g., micro-interactions across the web app / the onboarding screen transitions]. Include the following sections: (1) Motion principles, 3 brand-aligned principles that govern all animation decisions (e.g., "Motion is purposeful: every animation communicates a state change"), (2) Timing tokens, define the standard duration values (e.g., Instant: 100ms, Fast: 200ms, Medium: 350ms, Slow: 500ms) and when to use each, (3) Easing tokens, define at least 3 easing curves (e.g., ease-in-out, spring, linear) with their cubic-bezier values and appropriate use cases, (4) Animation inventory, for each of the following UI interactions: [INTERACTIONS_LIST], specify: trigger, animation type, duration token, easing token, and any delay, (5) Reduced motion, describe the reduced-motion fallback for every animation, as required by the prefers-reduced-motion media query, (6) Implementation notes, provide CSS or [ANIMATION_LIBRARY, e.g., Framer Motion, GSAP] code snippets for the 3 most complex animations.
Pro Tip
Anchor each motion principle to a concrete example interaction rather than an abstract statement, since vague principles like 'motion should feel natural' don't translate into a specific duration or easing choice.
Example Output
A sample of what this prompt produces once you fill in the placeholders.
Timing tokens: Fast 200ms for hover states, Medium 350ms for modal entrances, Slow 500ms for full-page transitions. Easing: spring (mass 1, stiffness 210, damping 20) for playful confirmations. Reduced motion: modal entrances fall back to an instant opacity fade with no scale or slide.
How to use this prompt
- Copy the prompt template using the button above.
- Paste it into your preferred AI assistant (ChatGPT, Claude, Gemini, etc.).
- Replace all bracketed placeholders like
[TOPIC]with your specific details. - Send the prompt and refine the output as needed.