DesignIntermediateDesign & UX Pack

Mobile App Micro-Animation Specifications

Define precise micro-animation specs for app onboarding with timing, easing, and accessibility considerations. Works with ChatGPT, Claude, Gemini. Best for: Motion designers, mobile UI designers, senior product designers.

ChatGPTClaudeGemini
Prompt Template
You are a motion design director. Describe in detail the micro-animation specifications for a mobile app onboarding flow with [number] screens.

For each screen transition and UI animation, specify:
- **Animation Name**: Descriptive name for the motion
- **Trigger**: What initiates it (tap, scroll, swipe, auto)
- **Duration**: In milliseconds
- **Easing Curve**: (e.g., ease-out, spring(400, 0.8), cubic-bezier values)
- **Properties Animated**: opacity, transform, scale, translate, color
- **Start State → End State**: Exact values
- **Stagger**: If multiple elements animate, the delay between each (ms)
- **Accessibility**: prefers-reduced-motion alternative behavior

## Onboarding Screens to Animate:
1. App launch / splash screen
2. Welcome screen (value prop reveal)
3. Permission request screens
4. Account creation form
5. Profile setup steps
6. First-time home screen appearance

## Global Motion Tokens:
Define reusable animation constants (durations, easings, delays)

App type: [iOS / Android / React Native / Web]
Brand feeling: [playful / professional / minimal / energetic]

Customise Variables

3 fields

Fill in the fields below. The prompt preview above updates in real time.

How to Use This Prompt

  1. 1Copy the prompt template using the Copy button above.
  2. 2Open your preferred AI tool — ChatGPT or Claude work well for this.
  3. 3Fill in the variable fields to personalise the prompt for your specific situation.
  4. 4Review the AI output carefully. Edit, fact-check, and adapt before using professionally.
  5. 5For better results, provide follow-up instructions in the same conversation thread.

Replace all bracketed placeholders like [product type] or [audience] with your specific details before sending to the AI. The more specific your inputs, the more tailored and actionable the output will be. Review and refine the AI output — use it as a professional starting point, not a finished deliverable.

Expected Output

Detailed structured documents including layout descriptions, design rationale, typography recommendations, color psychology explanations, and actionable design direction. Outputs are typically 400–1200 words depending on scope.

Open Directly in Your AI Tool

Clicking opens the AI tool in a new tab and copies the prompt to your clipboard automatically.

Frequently Asked Questions

Disclaimer: AI Suggests is independent from the AI tool providers listed. All trademarks belong to their respective owners. Prompt effectiveness may vary across models and versions. Legal, financial, healthcare, and compliance prompts do not replace qualified professional advice. Always review AI-generated output before professional use.

Related Prompts

View all
Design

Landing Page Wireframe Description

Generate a detailed wireframe description for any product landing page with CTA placements and accessibility notes.

Design

Brand Identity Brief Generator

Create a complete brand identity brief including colors, typography, and logo directions for any industry.

Design

Social Media Visual Campaign Brief

Write a complete visual design brief for a social media campaign with format specs and 10 caption variations.

Design

UI Critique Using Nielsen Heuristics

Get expert UI critique with 5 specific improvements based on established usability principles.

← Back to Prompt LibraryBuild a Custom Prompt