Mobile Interaction Design AI Prompts for UX Designers

The gap between a well-designed screen and a great mobile experience has always been invisible until you try to build it. Static mockups show you what screens look like; they cannot tell you how interactions feel. The handoff from designer to developer is perpetually lossy, with micro-interactions, gesture responses, and animation timing falling through the cracks because they were never captured in a static format.

Generative AI is changing this dynamic in ways that are still unfolding. UX designers who learn to prompt AI effectively can move beyond static deliverables and start articulating the full experience — including how the product responds to touch, how transitions communicate state, and how edge cases feel. This is a fundamentally different skill from designing screens: it requires thinking in terms of behavior and response rather than layout and typography.

AI Unpacker provides prompts designed to help UX designers articulate interaction intent with the precision developers need, while also using AI to explore and stress-test interaction patterns before committing to them.

TL;DR

• AI can help designers articulate micro-interaction specifications beyond what static mockups capture.
• Gesture-based interactions (swipe, pinch, long-press) require explicit behavior documentation that AI can generate.
• Interaction prompts work best when they include device context, user intent, and failure state handling.
• AI is most useful for exploring interaction alternatives, not generating complete specifications from scratch.
• The “creative director of intent” framework — describing what you want the user to feel — often produces better AI outputs than specifying exact behaviors.
• Prototyping with AI-generated interactions requires translating AI output into actual design specifications.
• Edge cases and error states are where interaction quality is determined, and AI can help explore these systematically.

Introduction

Mobile interaction design sits at the intersection of hardware capability, human psychology, and interface convention. Every swipe, tap, and gesture carries implicit meaning that users have learned from years of smartphone use. When your app violates those conventions — when a pull-to-refresh feels wrong, or a swipe-to-delete does not behave as expected — users do not think consciously about the violation. They simply feel that something is off, and that feeling shapes their perception of your entire product.

The challenge for UX designers is that interaction design is inherently temporal and kinetic. You cannot fully capture the feeling of a well-tuned spring animation in a Figma frame. You can show the start and end states, but the journey between them — the acceleration, the overshoot, the settle — requires description in addition to visualization.

AI is not a replacement for design skill, but it is a powerful tool for articulating interaction intent. When you use AI prompts to explore interaction behavior, you are using language to describe temporal experience, which is exactly what the design-to-development handoff needs.

This guide covers four domains where AI prompts help mobile UX designers: gesture and touch interaction design, animation and transition specification, edge case and error state exploration, and interaction critique and improvement.

1. Gesture and Touch Interaction Design

Touch is the primary input modality for mobile devices, and the range of possible gestures is vast. Most apps use only a subset — tap, swipe, pinch — but users have learned to expect these gestures to behave in consistent, predictable ways. Departing from convention requires deliberate thought and clear documentation.

Why Gesture Design Requires Explicit Documentation

When you design a tap on a button, the interaction is essentially binary: either the tap lands on the target or it does not. But gestures like swipe-to-delete, pull-to-refresh, and long-press-to-context have directional, temporal, and pressure components that are difficult to capture in static mockups. A swipe gesture can begin anywhere in a target area, move in any of four primary directions, be fast or slow, and be interrupted or completed. Capturing all of these states requires extensive documentation that most design teams skip.

AI can help you generate comprehensive gesture specifications by prompting it to think through the full state space of a gesture interaction.

Prompt for Swipe-to-Archive Specification

Generate a complete interaction specification for a swipe-to-archive gesture in an email app.

Context:
- Email list view with variable height rows (subject line + preview text, 2-3 lines)
- Archive is a primary action (users archive frequently)
- Users should be able to swipe quickly through multiple emails (swipe momentum)

Specify:
1. Swipe initiation: minimum distance to trigger (px), activation zone (full row or icon-only), prevention of accidental triggers (palm rejection, edge threshold)
2. Visual feedback during swipe: what appears, how it scales with distance, color progression (action reveal), haptic feedback timing
3. Commit threshold: distance at which release triggers archive versus spring back
4. Completion animation: duration, easing curve, row removal animation (collapse, fade, slide)
5. Undo mechanism: toast appearance, duration, undo action scope
6. Edge case handling: what happens if email is already archived, what if swipe is too slow (appears sticky)
7. Accessibility: VoiceOver announcement at commit, reduced motion alternative
8. Loading and error states: what if archive API call fails mid-animation

Include specific numerical values for timing and distance thresholds.

Prompt for Long-Press Interaction Design

Long-press interactions are powerful because they are invisible until activated — they preserve clean interfaces while enabling advanced functionality. But they are also risky because users cannot discover them without exploration, and accidental activation creates frustration.

Design a long-press interaction for a music app playlist to reveal contextual actions.

Context:
- User long-presses on a playlist in the library view
- Playlist can be: played, added to queue, shared, edited, deleted
- Long-press is already used for multi-select mode, so long-press must either enter multi-select OR reveal context menu (choose one)

Decide and specify:
1. Interaction model choice: long-press reveals context menu (bottom sheet) versus long-press enters multi-select mode
2. For chosen model, specify:
   - Activation delay (ms) before feedback appears
   - Visual feedback at activation (scale, highlight, haptic)
   - Context menu/presentation appearance (slide-up, fade, scale)
3. Menu item order and labeling (most common action first or alphabetical?)
4. Dismissal behavior (tap outside, swipe down, tap any action)
5. Conflict with single-tap (which takes precedence if user changes mind mid-gesture)
6. Multi-select mode (if chosen): exit mechanism, selection visual state, action bar appearance, batch operations
7. Accessibility: activation delay must be announceable, alternative interaction for users who cannot perform long-press

Justify your interaction model choice with specific user research or platform convention references.

2. Animation and Transition Specification

Animation is the connective tissue of mobile interfaces. It explains spatial relationships, confirms actions, and provides continuity between states. Without animation, interfaces feel abrupt and confusing. With poorly designed animation, they feel playful in a way that gets old after the first day.

The Four Functions of Mobile Animation

Mobile animations serve four distinct functions that are often conflated: orientation (where am I in the app?), feedback (did my action register?), continuity (how did I get here?), and delight (can we have a moment of joy?). Each function has different performance requirements. Feedback animations must be fast (under 100ms). Continuity animations must be smooth (60fps) and not feel blocking. Delight animations can be slower but must be skippable.

AI can help you specify animation parameters precisely because it can reason about the physical and perceptual factors that determine whether an animation feels right.

Prompt for Page Transition Specification

Design the transition animations for a multi-screen onboarding flow in a banking app.

Screens:
1. Welcome screen (brief app introduction)
2. Account setup (link external account)
3. Security setup (biometric opt-in)
4. Notification preferences
5. Completion/launch screen

Context:
- Users are new to the app, potentially anxious about banking security
- Animations should feel: trustworthy, modern, unhurried (not playful)
- The visual identity uses: blue tones, clean sans-serif typography, subtle gradients

Constraints:
- Each screen transitions via a horizontal swipe (forward/back)
- Users can skip any step (except where legally required -- security setup)
- Progress indicator shows current position

Specify for each transition:
1. Forward transition (next button tap):
   - Exit animation for current screen (direction, duration, easing)
   - Enter animation for next screen (direction, duration, easing, stagger if elements animate separately)
   - Any crossfade or shared element transitions (logo, profile icon)
2. Back transition (back gesture or button):
   - Reverse of above
3. Skip transition:
   - How does skip differ from forward? (different animation, same animation faster?)
4. Progress indicator animation:
   - How does it update? (slide, grow, fade, or combination)

Include numerical values for:
- Animation duration (ms) for each phase
- Easing curve names (ease-in-out, spring, etc.)
- Element-specific timing offsets if staggered

Add notes on reduced motion alternatives and how to handle interrupted animations (user swipes back mid-transition).

Prompt for Loading and Skeleton Animation

Loading states are among the most scrutinized moments in mobile UX. Users form immediate judgments about app speed and polish based on how loading is handled. Skeleton screens have become standard because they reduce perceived wait time, but the animation of skeleton screens can feel lazy if not designed carefully.

Design a skeleton loading animation for a social media feed.

Context:
- Feed shows: profile avatar (circular, 40px), username, timestamp, post content (text block 2-4 lines), optional image (16:9 aspect)
- Skeleton should be: subtle, non-distracting, energy-efficient (important for battery on mobile)
- Animation duration: must feel fast but not jarring

Requirements:
1. Skeleton shape design:
   - Avatar: circle
   - Username: rounded rectangle, width ~100px
   - Timestamp: rounded rectangle, width ~60px
   - Text block: 3 lines, varying widths (90%, 75%, 60%)
   - Image placeholder: rounded rectangle, 16:9
2. Shimmer/animation specification:
   - Direction: left-to-right, top-to-bottom, or radial
   - Speed: how many seconds per cycle
   - Gradient colors: base color, shimmer highlight color, base color (as RGB values suitable for dark/light mode)
   - Overlap: should next skeleton element animate in sequence or all at once with offset?
3. Content reveal animation:
   - How does real content replace skeleton? (crossfade, slide up, or combination)
   - Duration of reveal animation
   - Stagger if multiple elements appear at once
4. Error state handling:
   - What if content fails to load?
   - Retry button appearance and behavior

Specify all colors in hex and note which should adapt for dark mode.

3. Edge Case and Error State Exploration

The quality of an interaction design is revealed in its edge cases. A button that works perfectly when tapped but does nothing when tapped twice in rapid succession is a poorly designed interaction. A swipe gesture that feels natural for single items but breaks when trying to swipe multiple items at once has an edge case problem. Edge cases are where interaction design either builds trust or erodes it.

Prompt for Empty State Interaction Design

Empty states are some of the most overlooked interaction design opportunities in mobile apps. When a user encounters an empty state — no search results, no messages, no data — they are in a vulnerable moment. They came to the app with a goal and found nothing. How the app handles this moment shapes their perception of the entire experience.

Design the interaction flow for a search feature with multiple empty state scenarios.

Context:
- Search bar at top of screen, persistent across most app views
- Search is central to app navigation (content library with 50,000+ items)

Empty state scenarios:
1. User taps search, types query, gets no results
2. User types partial query (2 characters), minimum search length is 3
3. User enables a filter that returns no results
4. User has never used search before (first-time empty state)

For each scenario, specify:
1. Visual state:
   - Empty state illustration/icon style (describe in words or reference existing app patterns)
   - Headline text (what the user sees)
   - Body text (why this happened, if actionable)
   - Action button (primary CTA, secondary action if any)
2. Keyboard/input state:
   - Should keyboard remain open?
   - Should suggestions appear?
   - Should clear button be prominent?
3. Animation on state entry:
   - How does empty state appear? (fade, slide, scale)
   - Duration
4. Exit behavior:
   - What dismisses the empty state? (tap outside, clear search, back gesture)
   - Animation on exit

Additionally:
- Design a "recent searches" feature that appears before any typing
- Specify max items, deletion interaction, and privacy consideration (should recent searches sync across devices?)

Use language that is encouraging, never accusatory ("No results" not "Your search failed").

Prompt for Offline Mode Interaction Design

Offline functionality is increasingly expected in mobile apps, but the interaction design for offline states is notoriously difficult to get right. Users should feel confident about what works offline and what does not, without being reminded constantly that they are disconnected.

Design the interaction model for a note-taking app that works offline with background sync.

Context:
- App is primarily used offline (commuters, students, field workers)
- Notes sync to cloud when connection available
- Sync is not instantaneous (can take 5-30 seconds)
- Multiple devices per user

Requirements:
1. Offline indicator:
   - Where is it shown? (status bar, in-app banner, or both)
   - When does it appear? (immediately on disconnect or after grace period?)
   - What does it say? (be specific with messaging)
   - How does it dismiss? (auto when back online, or user tap?)
2. Edit behavior offline:
   - Can user edit notes while offline?
   - What happens to edits during sync? (conflict resolution)
   - How is conflict communicated to user?
3. Sync status visibility:
   - Per-note sync indicator style (icon, color, or both)
   - States: synced, syncing, pending, conflict, error
   - Where does indicator appear? (list view, note view, or both)
4. Offline-first list view:
   - How are notes with pending changes sorted? (top, bottom, grouped?)
   - How does pull-to-refresh behave offline?
5. Offline limitations communication:
   - When user attempts action that requires connection (share, collaborate, export), what happens?

Specify all interaction states with specific animation and timing values.

4. Interaction Critique and Improvement

AI is not just a generative tool — it can also be a valuable critic. When you have an interaction design that you are unsure about, prompting AI to identify problems can surface issues you may have missed. The key is to frame the critique request with specific criteria so the AI evaluates the design against known UX principles rather than offering generic praise or vague suggestions.

Prompt for Interaction Heuristic Evaluation

Perform a heuristic evaluation of the following mobile checkout flow interaction design.

Flow description:
1. Cart review screen (swipe to delete items, tap quantity to adjust)
2. Shipping address screen (form with autocomplete, address validation on blur)
3. Payment screen (credit card form, Apple Pay option as primary)
4. Order confirmation screen (animated success state, order number, estimated delivery)

Context:
- App is a fashion e-commerce app targeting 25-40 year old women
- Average order value is $120
- Mobile accounts for 75% of revenue
- Users frequently abandon at payment step (cart-to-payment drop-off is 60%)

Evaluate the interaction design for:
1. Visibility of system status: Can users always tell where they are, what is happening, and what is coming next?
2. Match between system and real world: Do interaction patterns match conventions users know from other apps?
3. User control and freedom: Can users easily undo actions, especially at key decision points?
4. Consistency and standards: Are interaction patterns consistent throughout the flow?
5. Error prevention: Are there opportunities to prevent errors before they happen (especially typos in addresses, card numbers)?
6. Recognition rather than recall: Are options visible and clear, or does the user need to remember things from previous screens?
7. Flexibility and efficiency: Does the flow accommodate both novice users (guided) and expert users (shortcuts)?
8. Aesthetic integrity: Does the animation and visual design feel appropriate for the brand and price point?
9. Help and recovery: If something goes wrong (validation error, payment decline), how is it communicated and how easily can the user recover?

For each heuristic, identify:
- One specific strength in the interaction design
- One specific improvement opportunity
- Severity of issue if unaddressed (critical, major, minor, cosmetic)

FAQ

How do I ensure AI-generated interaction specifications are implementable?

AI generates interaction descriptions in language, not code or design files. The key to making AI output useful is asking for specific numerical values (durations in milliseconds, distances in pixels, easing curves by name) rather than qualitative descriptions. Vague outputs like “the animation should feel snappy” are useless to developers; specific outputs like “100ms ease-out” are actionable.

Can AI help with gesture recognition design for accessibility?

Yes. AI can generate interaction specifications that account for motor accessibility needs, including larger touch targets, slower activation thresholds, and alternative interaction paths for users who cannot perform certain gestures. The key is explicitly stating your accessibility requirements in the prompt.

How do I balance delight animations with performance on low-end devices?

Specify reduced motion alternatives for all animations. On low-end devices, replace spring animations with simpler ease curves, reduce stagger delays, and consider disabling particle effects. Ask your AI prompt to include performance notes for each animation.

What is the best way to use AI during the design critique process?

Use AI as a first-pass critic before user testing. Give AI your interaction description and ask it to identify edge cases, error states, and consistency issues. Do not rely on AI to validate your design — use it to challenge your assumptions.

Conclusion

Mobile interaction design is moving from static deliverables to dynamic, behavior-driven documentation. AI Unpacker gives you prompts that help you capture the full experience — including gestures, animations, transitions, and edge cases — in a way that static mockups never could.

The designers who thrive in this new environment will be those who can articulate behavior precisely while maintaining the creative vision that makes products feel human. AI handles the specification generation; you handle the judgment calls about what feels right.

Your users will not notice your interaction design. They will only notice when it fails them.