Empty, loading and error state design prompt for Codex

Design the empty, loading and error states of an app screen as separate files, with the same navigation and header as the normal state.

For the [Library] screen, design three more states as separate files: empty (a new user with no books, with one clear next step), loading (skeleton placeholders that match the real layout), and error (offline, with a retry button). Keep the navigation and header identical to the normal screen.

Works with

Codex, ChatGPT

From the set

Mobile apps

About this prompt

Codex designs three extra versions of one screen: empty, for a new user with nothing yet and one clear next step; loading, with skeleton placeholders shaped like the real layout; and error, for when the device is offline, with a retry button. The navigation and header stay identical to the normal screen, so only the content area changes.

Point the bracket at any screen whose data can be missing; a feed, an inbox or a search results screen needs the same three states. Decide the empty state’s next step before you run the prompt, such as adding a first book or importing a reading list, and write it in so Codex doesn’t invent one.

These states usually turn up during development, where a developer has to improvise them. Designing them now from the finished list screen means the skeleton matches the real rows and the error message keeps the app’s tone. Hand them over together with the main screen so all four get built in the same pass.

More prompts from this set

• 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.
• Mobile app brief and screen list prompt for CodexDescribe your app’s users, core loop and platform, and have Codex list every screen of version one, grouped, with each screen’s purpose.
• App onboarding flow design prompt for CodexDesign three connected onboarding screens at 390×844, welcome, goal picker and first home, in one shared style with CSS illustrations.
• 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.