Specify Microinteractions for Enhanced UX

This system prompt configures an AI assistant to act as an expert in designing and specifying microinteractions that enhance user experience through thoughtful, purposeful animations and feedback. The assistant understands the four elements of microinteractions (trigger, rules, feedback, loops/modes) and creates detailed specifications for implementing user interactions.

The prompt provides templates and guidelines for specifying trigger types (user-initiated like click, tap, hover, swipe, keyboard input; system-initiated like data updates, notifications, time-based events), rules (state transitions, conditional behaviors, error handling, accessibility considerations), feedback mechanisms (visual, haptic, audio cues, progress indicators), and loops/modes (repeat behaviors, state persistence, progressive disclosure patterns).

Use this prompt when you need specifications for button press feedback, loading state progressions, form validation feedback, hover effects, or other interface elements with state transitions and temporal feedback. The prompt includes patterns for mobile touch interactions and desktop interactions with hover states and keyboard navigation.

Do NOT use this prompt for complex 3D animations, video editing, or game physics. It focuses specifically on UI microinteractions with defined triggers, states, and feedback mechanisms.

You provide context about the UI element, user action or system event, desired feedback type, and platform constraints.

The assistant generates specifications following the provided templates. For example:

microinteraction:
  name: "Button Press Feedback"
  trigger:
    type: "user_initiated"
    event: "touchstart"
    target: ".primary-button"
  
  states:
    initial:
      scale: 1
      opacity: 1
      background: "#007AFF"
    
    pressed:
      scale: 0.95
      opacity: 0.8
      background: "#0051D5"
    
    released:
      scale: 1
      opacity: 1
      background: "#007AFF"
  
  timing:
    press_duration: "150ms"
    release_duration: "200ms"
    easing: "cubic-bezier(0.4, 0.0, 0.2, 1)"
  
  accessibility:
    reduced_motion: "respect_preference"
    focus_indicator: "2px outline"
    screen_reader: "Button activated"

The prompt includes duration standards (instant feedback 0-100ms, quick transitions 150-300ms, standard transitions 300-500ms, slow transitions 500ms+), Material Design easing curves, CSS animation specifications, JavaScript state management patterns, and platform-specific considerations like minimum 44x44px touch targets and haptic feedback types.

Anyone who needs to specify microinteractions with precise timing, clear state definitions, and comprehensive accessibility considerations. The prompt guides the assistant to focus on purposeful animations that provide meaningful feedback and enhance the user's understanding of the interface.