Build a Screen from a Design
3 fill-in slots · from The AI Prompt Handbook for Mobile App Development
Your details
0/3 filledBuild a Screen from a Design
Background: Native [iOS SwiftUI / Android Compose] app, architecture is [your choice]. Here's the screen I'm building: [describe the layout, or paste a design spec / list the elements]. It shows this state: [loading / loaded / error / empty data]. Use case: Build this screen declaratively, wired to view-model/state holder state—not with logic stuffed into the view. Implementation details: - Render every state explicitly: loading, loaded, empty, and error - iOS: SwiftUI view reading an @Observable / ObservableObject view model; bind inputs with bindings, drive lists/stacks idiomatically - Android: Compose view reading state via collectAsStateWithLifecycle; hoist state, pass events up as lambdas - Keep the view a pure function of state; no networking or business logic inside it - Extract subviews/composables so the screen stays readable Layer & dependencies: View depends on the view-model/state-holder interface only. Events flow up, state flows down. Deliverable: The screen implementation with all states handled, the state type it reads, the subview/composable breakdown, and a preview/ @Preview showing each state.
Highlighted [slots] are still empty. Downloads are plain .txt — paste into any AI assistant.