Skills Design & Creative Three-Screen Mobile Onboarding Flow

Three-Screen Mobile Onboarding Flow

v20260430
mobile-onboarding
Generate a comprehensive, multi-screen mobile onboarding prototype displayed in a side-by-side HTML format. This tool is perfect for designing the initial user experience (UX) flow, covering splash screens, value proposition details, and final sign-in steps. Ideal for apps needing a polished debut experience.
Get Skill
386 downloads
Overview

Mobile Onboarding Skill

Produce a three-screen mobile onboarding flow on a single HTML page.

Workflow

  1. Read DESIGN.md.
  2. Identify the app + audience.
  3. Layout: three phone frames side by side. Each phone:
    • Status bar (time, battery, signal).
    • Hero artwork or icon.
    • Headline + supporting paragraph.
    • 3-dot pagination.
    • Primary CTA (full-width pill button).
    • "Skip" or alt action top-right.
  4. Last phone is the sign-in / continue-with options screen.
  5. Strong typography, gentle gradients, accessible contrast.

Output contract

<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>
Info
Name mobile-onboarding
Version v20260430
Size 3.68KB
Updated At 2026-05-01
Language