screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile song creation flow examples

Search the library

AI Song Generator: Mozart: Create a Song

Open recorded flow

  1. Step 1 · 1:20

    AI Song Generator: Mozart: Header with tabs, large text input area, advanced settings grid, primary CTA button, and bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Header with tabs, large text input area, advanced settings grid, primary CTA button, and bottom navigation bar.

  2. Step 2 · 1:27

    AI Song Generator: Mozart: The screen features a top navigation bar, a prompt input area, and a large modal overlay covering the bottom two-thirds of the screen, containing vocal selection options and a bottom action button.See the flow
    AI Song Generator: Mozart

    The screen features a top navigation bar, a prompt input area, and a large modal overlay covering the bottom two-thirds of the screen, containing vocal selection options and a bottom action button.

  3. Step 3 · 1:34

    AI Song Generator: Mozart: Top navigation bar, text prompt input, and a bottom-anchored modal overlay containing a genre selection grid and a primary action button.See the flow
    AI Song Generator: Mozart

    Top navigation bar, text prompt input, and a bottom-anchored modal overlay containing a genre selection grid and a primary action button.

  4. Step 4 · 1:39

    AI Song Generator: Mozart: Top navigation bar, text input area, and a large bottom-anchored modal containing a grid of style selection buttons and a primary action button.See the flow
    AI Song Generator: Mozart

    Top navigation bar, text input area, and a large bottom-anchored modal containing a grid of style selection buttons and a primary action button.

  5. Step 5 · 1:46

    AI Song Generator: Mozart: Top navigation bar, followed by input tabs, a text area, an advanced settings section, and a large modal overlay for BPM adjustment.See the flow
    AI Song Generator: Mozart

    Top navigation bar, followed by input tabs, a text area, an advanced settings section, and a large modal overlay for BPM adjustment.

  6. Step 6 · 1:48

    AI Song Generator: Mozart: Header with logo and credits, tabbed navigation, large text input area, advanced settings grid, main CTA button, and bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Header with logo and credits, tabbed navigation, large text input area, advanced settings grid, main CTA button, and bottom navigation bar.

  7. Step 7 · 2:21

    AI Song Generator: Mozart: Header with logo and credits, segmented control, large lyric input area, advanced settings grid, main CTA button, and bottom navigation.See the flow
    AI Song Generator: Mozart

    Header with logo and credits, segmented control, large lyric input area, advanced settings grid, main CTA button, and bottom navigation.

  8. Step 8 · 2:27

    AI Song Generator: Mozart: Top header with app name and status, central modal overlay, bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Top header with app name and status, central modal overlay, bottom navigation bar.

AI Song Generator: Mozart: Create a Cover Song

Open recorded flow

  1. Step 1 · 5:32

    AI Song Generator: Mozart: Header with logo and status, search input, segmented control, list of voice cards, bottom CTA button, and bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Header with logo and status, search input, segmented control, list of voice cards, bottom CTA button, and bottom navigation bar.

  2. Step 2 · 5:35

    AI Song Generator: Mozart: Header with credits and pro button, search input, voice selection tabs, list of voice cards, bottom primary action button, and bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Header with credits and pro button, search input, voice selection tabs, list of voice cards, bottom primary action button, and bottom navigation bar.

  3. Step 3 · 5:40

    AI Song Generator: Mozart: Header with logo and credits, search input, voice selection tabs, list of voice cards, bottom paywall button, and bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Header with logo and credits, search input, voice selection tabs, list of voice cards, bottom paywall button, and bottom navigation bar.

AI Song Generator: Mozart: Create a Song from Photo

Open recorded flow

  1. Step 1 · 3:43

    AI Song Generator: Mozart: Top header with credits and pro status, followed by mode tabs, a large central upload area, advanced settings grid, a primary CTA button, and a bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Top header with credits and pro status, followed by mode tabs, a large central upload area, advanced settings grid, a primary CTA button, and a bottom navigation bar.

  2. Step 2 · 3:44

    AI Song Generator: Mozart: Header with logo and credits, mode switcher, main upload card, advanced settings row, and bottom modal overlay.See the flow
    AI Song Generator: Mozart

    Header with logo and credits, mode switcher, main upload card, advanced settings row, and bottom modal overlay.

  3. Step 3 · 3:47

    AI Song Generator: Mozart: Top navigation bar with tabs, followed by a system privacy banner, and a scrollable grid of photo thumbnails, with a bottom utility bar.See the flow
    AI Song Generator: Mozart

    Top navigation bar with tabs, followed by a system privacy banner, and a scrollable grid of photo thumbnails, with a bottom utility bar.

  4. Step 4 · 3:51

    AI Song Generator: Mozart: Top title, central image preview with crop handles, bottom toolbar with action buttons.See the flow
    AI Song Generator: Mozart

    Top title, central image preview with crop handles, bottom toolbar with action buttons.

  5. Step 5 · 3:55

    AI Song Generator: Mozart: Header with branding and pro status, segmented mode switcher, central image input card, advanced settings grid, large primary CTA, and bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Header with branding and pro status, segmented mode switcher, central image input card, advanced settings grid, large primary CTA, and bottom navigation bar.

AI Song Generator: Mozart: Explore App Templates

Open recorded flow

  1. Step 1 · 6:08

    AI Song Generator: Mozart: Top navigation bar, followed by a large text input card, a secondary style input field, and a bottom primary CTA button.See the flow
    AI Song Generator: Mozart

    Top navigation bar, followed by a large text input card, a secondary style input field, and a bottom primary CTA button.

  2. Step 2 · 6:13

    AI Song Generator: Mozart: Top navigation bar, followed by a text prompt area, a central modal with a grid of style options, and a bottom action button.See the flow
    AI Song Generator: Mozart

    Top navigation bar, followed by a text prompt area, a central modal with a grid of style options, and a bottom action button.

  3. Step 3 · 6:29

    AI Song Generator: Mozart: Top navigation bar, central headline, central studio entry icon, bottom primary CTA button.See the flow
    AI Song Generator: Mozart

    Top navigation bar, central headline, central studio entry icon, bottom primary CTA button.

  4. Step 4 · 6:31

    AI Song Generator: Mozart: Top navigation bar, central hero image/card, bottom-aligned selection modal sheet.See the flow
    AI Song Generator: Mozart

    Top navigation bar, central hero image/card, bottom-aligned selection modal sheet.

  5. Step 5 · 6:39

    AI Song Generator: Mozart: Top navigation and progress bar, followed by a header, two input fields, a toggle, and a bottom primary action button.See the flow
    AI Song Generator: Mozart

    Top navigation and progress bar, followed by a header, two input fields, a toggle, and a bottom primary action button.

  6. Step 6 · 6:59

    AI Song Generator: Mozart: Top navigation, header text, text input area, grid of style selection buttons, and a bottom primary action button.See the flow
    AI Song Generator: Mozart

    Top navigation, header text, text input area, grid of style selection buttons, and a bottom primary action button.

  7. Step 7 · 7:02

    AI Song Generator: Mozart: Header text followed by a search bar and a grid of genre selection buttons, with a primary action button at the bottom.See the flow
    AI Song Generator: Mozart

    Header text followed by a search bar and a grid of genre selection buttons, with a primary action button at the bottom.

  8. Step 8 · 7:09

    AI Song Generator: Mozart: A modal overlay containing a header, gender selection row, 'My Voices' section with custom add button, and a grid of premium AI voice options, ending with a full-width bottom action button.See the flow
    AI Song Generator: Mozart

    A modal overlay containing a header, gender selection row, 'My Voices' section with custom add button, and a grid of premium AI voice options, ending with a full-width bottom action button.

  9. Step 9 · 7:16

    AI Song Generator: Mozart: Top navigation with progress bar, followed by a series of labeled input fields and toggles, ending with a large bottom-aligned primary button.See the flow
    AI Song Generator: Mozart

    Top navigation with progress bar, followed by a series of labeled input fields and toggles, ending with a large bottom-aligned primary button.

  10. Step 10 · 7:19

    AI Song Generator: Mozart: Centered loading graphic with text above and below, followed by a large bottom action button.See the flow
    AI Song Generator: Mozart

    Centered loading graphic with text above and below, followed by a large bottom action button.

Found an example you like?See the whole story.

See the full library See plans