Mobile app builds a set of phone screens — not one shot but the flow: onboarding, the main screen, settings, the states in between, laid out as a board of artboards at real phone size. It's the template for app-shaped design — touch targets, mobile nav, the screen-to-screen flow.
A set, not a screen
Brief it for the flow — "a habit-tracker app: sign-up, today view, streak, settings" — and the agent builds the screen set, each an artboard in the result. The mobile viewer lays them out as a board you step through or view as a grid, so the flow reads as a flow, not a pile of screenshots.
The screens are live, not pictures: tap through them, hover the controls, check the nav actually goes somewhere — at phone width, where touch targets and bottom nav are what break.
Mobile app · Devin · e2e · gate PASS
Frond — A plant-care app in three finished screens — today, detail, reminder — device frames and all.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile app: a plant-care app: today screen, plant detail, and watering reminder.”
Mobile rules, checked
The gate's phone-width checks matter most here — hit-target sizes, dead nav, the bottom-bar that swallows the last row. The template loads those rules so the agent builds for them: controls sized for fingers, nav that reaches something, type that survives a small screen.
What it's good at
- App concept work — the screen set for an idea before it gets built
- Feature flows — how a new feature threads through existing screens
- Mobile-specific patterns — sheets, bottom nav, swipe states
- Stakeholder reviews — the flow as a board, not a spec
Steering a screen set
Same steering as any result, mobile-shaped:
- ⌥-click the control or screen region, comment on the exact spot
- Follow-ups for a missing screen or a wrong flow ("add the empty state between sign-up and today")
- Tweaks for the parameters the design exposes (density, corner radius)
- Variants for two different takes on the same flow
Phone vs mockup vs website
- Mobile app — phone-shaped screens, touch-scale controls, mobile nav
- UI mockups — a picture of a desktop or web interface
- Interactive website — a site that works, multi-page, desktop-first
If the screen set is phone-sized and touch-shaped, it's this template — even if the "app" is a mobile web flow.
Tip: Check every screen at phone width before calling it done — the most common FAIL here is a bottom bar or last-row control that falls into the dead zone, which you can't see at desktop size.
Exporting
Screen sets export to PNG per screen or PDF as a set — for a deck, a spec, or a stakeholder doc. The files stay in the project folder for the next steer.