Back to Prompt Library
Design
motion designanimationmicro-interactionsdesign systemUI

Motion Design Specification

A complete motion design spec with timing tokens, easing curves, and reduced-motion fallbacks that keeps animations consistent and accessible.

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.

How to use this prompt

  1. Copy the prompt template using the button above.
  2. Paste it into your preferred AI assistant (ChatGPT, Claude, Gemini, etc.).
  3. Replace all bracketed placeholders like [TOPIC] with your specific details.
  4. Send the prompt and refine the output as needed.
Advertisement