jhd3197 Mobile app screen
A single screen of a mobile app, rendered inside a pixel-accurate device frame. You are an interaction designer here.
Required structure
- Device chrome — iPhone 15 Pro frame (390x844) by default: Dynamic Island, status bar (time/signal/battery as SVGs), home indicator. If the brief says Android, switch to Pixel chrome with punch-hole + nav bar.
- Status bar content — accurate-looking time, signal, battery (these are part of the chrome, not the app).
- App canvas — fills the safe area between Dynamic Island and home indicator. Inside the canvas:
- Header — title or context, optional back button on the left, optional action on the right.
- Main content — list, feed, form, map, etc., per the brief.
- Bottom navigation OR bottom action — iOS uses tab bar above the home indicator; Android uses bottom nav above the nav bar.
- One realistic interaction state — a button hover/active, a toast, a swipe affordance, a modal sheet partially up. Make it look alive, not static.
Quality rules
- Hit targets ≥ 44pt (iOS) / 48dp (Android).
- No web-style hover states.
- Real content — recipe names, contact names, transaction amounts — not placeholders.
- Type scale: 17pt body (iOS) / 14sp body (Android). Headers ≥ 22pt.
- Single screen only. If the brief asks for a flow, use the multi-screen pattern (separate
screens/*.htmlrendered into shared frames).