Browse Mobile App Development Section 6: UI Implementation

Build a Screen from a Design

3 fill-in slots · from The AI Prompt Handbook for Mobile App Development

Your details

0/3 filled

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