Design Motion Principles

What it does

This skill provides a comprehensive framework of core design and motion principles specifically tailored for AI agents to generate high-quality visual outputs. It enables agents to understand timing, easing, hierarchy, and spatial relationships to create dynamic, professional-grade animations and layouts.

When to use it

• Generating smooth, natural-looking transitions between UI states or scene changes in an application.
• Creating motion graphics that adhere to established laws of physics for realistic character or object movement.
• Structuring complex visual hierarchies to ensure key information stands out through effective use of scale and contrast.
• Auditing existing design systems to identify inconsistencies in timing, easing curves, or alignment.

Key capabilities

• Application of 12 fundamental principles of animation (e.g., squash and stretch, anticipation).
• Implementation of advanced easing functions beyond linear interpolation for organic movement.
• Management of visual hierarchy using size, color, and spacing techniques.
• Creation of rhythmic timing patterns to guide user attention effectively.

Example prompts

• "Generate a 3-second loading animation sequence that uses 'anticipation' and 'staging' to make the process feel engaging rather than mechanical."
• "Audit this UI mockup's hover states and suggest specific easing curves and durations that improve perceived responsiveness."
• "Create a motion design script for a product reveal that utilizes 'slow in, slow out' and 'follow through' to emphasize the new feature."

Tips & gotchas

Ensure you specify the target medium (e.g., web, mobile, video) as timing constraints vary significantly across platforms. While this skill covers theoretical principles, practical implementation may require additional technical skills for specific software tools like After Effects or Figma plugins.