Back to Library
Mobile App

Mobile App Onboarding

Swipeable onboarding screens for mobile apps with illustrations and progress indicators.

Compatible with:

v0lovablechatgpt
Create a mobile app onboarding flow with 3-4 screens:

SCREEN STRUCTURE:
- Full-screen layout (375x812px - iPhone size)
- Illustration at top (60% of screen)
- Title and description at bottom
- Progress dots indicator
- "Next" button
- "Skip" button in top right

SCREEN 1: Welcome
- Illustration: Welcoming character or app icon
- Title: "Welcome to [App Name]"
- Description: Brief intro to what the app does

SCREEN 2: Key Feature 1
- Illustration: Feature visualization
- Title: Feature name
- Description: How it benefits the user

SCREEN 3: Key Feature 2
- Similar structure
- Different illustration and feature

SCREEN 4: Get Started
- Final screen
- "Get Started" primary button
- "Sign in" secondary link

STYLING:
- Bright, friendly colors
- Large, readable typography
- Smooth swipe transitions
- Animated illustrations (optional)
- Progress dots change color as you advance
- Consistent spacing and padding

How to Use

  1. 1Click the "Copy Prompt" button above
  2. 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
  3. 3Paste the prompt and let the AI generate your UI
  4. 4Customize the output to match your brand and content

💡 Tips

Customize illustrations to match your brand. Keep text concise. Test swipe gestures on actual devices.