Mobile app home screen design prompt for Codex

Design an app home screen for a returning user, built around the one element you name as most important, with a tab bar and real stats.

Design the home screen for a returning user on day [12] of their streak. The most important element is [today's progress toward the daily goal]; make it the first thing you notice. Below it: [the book they're reading with page progress], a primary button to [start a session], and [this week's stats]. Include a bottom tab bar with [Today, Library, Stats, Profile].

Works with

Codex, ChatGPT

From the set

Mobile apps

About this prompt

Codex designs the home screen a returning user sees, in the example on day 12 of a reading streak. The prompt names one element, today’s progress toward the goal, and asks for it to be the first thing you notice, then places the rest beneath it in order: the current book, the main action and this week’s stats, with a four-tab bar at the bottom.

Swap each bracket for your app’s equivalent: the day count or state that makes the user a returning one, the element that matters most, the content below it, the primary action and the tab names. Keep the instruction to name a single most important element. Without it, home screens tend to become a grid of equally weighted cards.

Put the primary button within thumb reach in the lower half of the screen, and check that the tab bar doesn’t crowd it. This screen sets the pattern for the list, settings and state screens that follow, so it is worth one or two rounds of refinement before you move on.

More prompts from this set

• List and detail screen design prompt for CodexDesign a list screen with search and filter chips and the detail screen it opens, as two files, using realistic titles and numbers.
• App settings screen design prompt for CodexDesign a settings screen with standard grouped lists, current values on each row, toggles where they belong and destructive actions in red.
• Empty, loading and error state design prompt for CodexDesign the empty, loading and error states of an app screen as separate files, with the same navigation and header as the normal state.
• Dark mode app design prompt for CodexMake dark mode versions of app screens with a tinted dark background, toned-down accents, WCAG AA text contrast and a list of changed colors.
• Android Material 3 adaptation prompt for CodexAdapt an iOS app screen to Android with Material 3: a top app bar, a navigation bar and a FAB, keeping your brand colors and type.
• Mobile app mockups to SwiftUI code prompt for CodexHave Codex build the approved HTML screens in your SwiftUI app, matching layout and spacing, using your theme colors and supporting Dynamic Type.