List and detail screen design prompt for Codex

Design a list screen with search and filter chips and the detail screen it opens, as two files, using realistic titles and numbers.

Design the [Library] list screen and the [book] detail screen as two files. The list shows [12 books] with cover, title, author, and progress, plus a search field and filter chips for [Reading, Finished, Want to read]. The detail screen opens from a list item and shows [reading history and notes]. Use realistic titles and numbers.

Works with

Codex, ChatGPT

From the set

Mobile apps

About this prompt

Codex designs two linked screens in separate files: a list of 12 items, each with cover, title, author and progress, topped by a search field and filter chips, and the detail screen that opens when you tap an item. Designing them together keeps an item looking the same in its row and in the full view.

Change the brackets to your app’s own list and detail pair: products and a product page, tasks and a task view, recipes and a recipe. Set the item count to what a real user would have and name your actual filter states. The closing line about realistic titles and numbers matters more than it looks; a very long title next to a book at 3% and another at 100% shows whether the row layout holds up.

Afterwards, check that going from list to detail would feel continuous: the same cover, title style and progress treatment in both files. The [Library] screen from this step is also what the empty, loading and error states prompt builds on, so get its normal state right first.

More prompts from this set

• 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.
• 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.