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.
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
- 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.
Advertisement