Templates · since v1.0.0
AI mobile app design generator
Phone-sized screens, real components, live preview — the mobile template builds app UIs you can actually tap through, then export as files or rebuild in your stack.
Mobile app · Devin · swe-2-high · 22 min
Living Sky Weather — Five phone screens, five skies — animated weather that re-tints the whole interface per condition.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile weather app as 5 phone screens (390×844) for Nha Trang: sunny noon, cloudy afternoon, tropical rain, thunderstorm at night, and clear night with stars. The top half of each screen is an animated sky (canvas or CSS: sun glare, drifting clouds, rain streaks, lightning flash, stars) that matches the condition and time. Content: current temperature, feels-like, hourly strip (12 hours), 7-day list with bars for temperature ranges, UV, rain chance, and a severe weather alert card for the storm screen. UI colors adapt per condition while keeping text contrast ≥ 4.5:1. Include a reduced-motion version.”
Why it matters
App mockups die in the handoff because a PNG can't answer 'what does tapping this do'. A built screen can. The stage renders it at real device dimensions with safe areas, the design kit keeps it honest about platform conventions, and tapping through it in review beats annotating a screenshot.
How it works
- 1Choose the mobile templatePhone and tablet surfaces with platform conventions the kit knows — tab bars, sheets, nav stacks.
- 2Brief the appWhat it does, who uses it, which screens exist — the agent builds them as a tappable flow.
- 3Tap through itThe preview is live: navigation, sheets and states work. Pick an element and comment to fix what's off.
- 4Hand it forwardExport the files, or move the design into Build mode on your real repo when the mockup earns it.
Capabilities
- Real device frame sizes on the preview stage, safe areas included
- iOS direction available in the kit (Native iOS) plus neutral app directions
- Tappable flows — navigation and states run, not just render
- Variants for comparing two screen directions blind
- Exports: PNG per screen, PDF, HTML, ZIP
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 app · Devin · subagent · 9 screens · 5 files
Canopy — A plant-care prototype you can click through — nine states, light and dark, keyboard and offline fixtures.
▸ the prompt that made it▾ the prompt that made it
“Build the full flow from the product contract as a clickable HTML prototype, one screen per file plus an overview. Light and dark. Include the keyboard-open fixture for the add-plant form, a long Vietnamese plant name, and a large-text variant of the Today screen. Fixture data only; no network.”
FAQ
Is this for native iOS/Android development?
It designs and prototypes the UI as working screens. For the real app, codebase Build mode edits React Native, SwiftUI-parallel web views or your web app's mobile surfaces in the repo itself.
Can it mock both light and dark themes?
Yes — Compare re-renders an edit under the other theme and verifies both, so a design that only works in dark gets caught.
How close to production is the output?
The HTML/CSS is production-real in behavior; whether its code is production-shape depends on your stack. Build mode is the path that writes your stack's idiom directly.
In the docs
Related features
Design with the agent you already have.
Free to try, buy once — the studio and your own coding CLIs do the rest.
Download