App onboarding flow design prompt for Codex

Design three connected onboarding screens at 390×844, welcome, goal picker and first home, in one shared style with CSS illustrations.

Design the onboarding flow as three screens: welcome, choose a daily goal, and the first home screen. Each screen is its own self-contained HTML file at 390×844 with inline CSS and system fonts. Use one consistent style across all three: [warm cream background, deep green for actions, one coral accent, a serif for headlines]. Show a progress indicator on the goal screen, and draw any illustration with CSS.

Works with

Codex, ChatGPT

From the set

Mobile apps

About this prompt

Codex designs three screens as separate HTML files at iPhone size: a welcome screen, a screen for choosing a daily goal with a progress indicator, and the first home screen a new user lands on. Asking for them together means they share one set of colors, type and spacing instead of each screen inventing its own.

The bracketed style line is your visual direction in a sentence: background, action color, one accent and a headline typeface. Keep the colors few and name them by role; “deep green for actions” tells Codex where a color goes, a list of five hex codes doesn’t. If your onboarding asks for something other than a goal, such as interests or notification permission, rename the middle screen to match.

Read the three files in order, the way a new user meets them. On a Codex Design canvas they line up left to right, which makes a jump in style or a progress indicator that never moves easy to spot. Settle the flow here, because the next prompt designs the returning user’s version of the third screen.

More prompts from this set

• Mobile app home screen design prompt for CodexDesign 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.
• 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.