What are Cursor mobile app templates?
Cursor mobile app templates are finished app screens you add to your project and reference in Cursor, so Agent builds mobile UI that looks designed instead of default. This page has 115 iOS and Android screens, including 16 complete app sets, from onboarding and paywalls to home, profile and checkout. Each screen is plain HTML and CSS at phone size; Cursor converts it into React Native, Expo, SwiftUI or Flutter in your codebase, and the Cursor mobile rule on this page keeps every new screen consistent.
Complete app sets for Cursor
Each set is a whole app in one design, so every screen Cursor builds from it matches the others.
How to use mobile app templates in Cursor
Pick an app set
Choose the set closest to your product, like finance, fitness, AI chat or shopping, so every screen already shares one design.
Save the screens in your repo
Copy each screen and save it in design/screens/, one file per screen, named after the screen.
Add the mobile rule
Save the Cursor mobile UI rule from this page as .cursor/rules/mobile-ui.mdc so Agent follows the design, safe areas and tap target sizes.
Convert one screen at a time
In Agent, reference the screen with @ and ask for it in your stack: an Expo screen, a React Native component or a SwiftUI view, using your shared components.
React Native, Expo, SwiftUI or Flutter
React Native and Expo
The most common choice. Cursor turns each screen into a screen component with StyleSheet or NativeWind styles, moves colours and type into a theme file, and uses React Navigation or Expo Router for the tabs and stacks the templates show.
SwiftUI
For native iOS apps, Cursor converts each screen into a SwiftUI view, with colours and fonts in an asset catalogue and shared views for buttons and cards.
Flutter
Cursor converts screens into widgets with a ThemeData built from the template's colours and type scale, so Android and iOS share one design.
Web apps and PWAs
If you ship a mobile web app, Cursor can keep the HTML and CSS and turn screens into React or Next.js components with a mobile-first layout.
Mobile design rules Cursor should follow
Respect safe areas
Keep content clear of the notch, the status bar and the home indicator on every screen.
Touch targets of 44 points or more
Buttons, tabs and list rows need room for a thumb, with space between them.
One primary action per screen
Mobile screens are small; make the main action obvious and reachable with one thumb.
A clear type scale
Use a small set of sizes, with body text at least 16 points, so screens stay readable.
Native navigation patterns
Tab bars for top-level sections, stacks for drill-down, sheets for quick tasks.
Designed states
Loading, empty, error and offline states for every screen that shows data.
Cursor mobile rule and conversion prompt
Two files that turn template screens into production screens and keep every new screen on design.
Cursor mobile UI rule
A Cursor rule for mobile screens: follow the app template, use the shared theme, respect safe areas and tap targets, and check both platforms.
.cursor/rules/mobile-ui.mdc--- description: Mobile app UI rules. Apply when creating or editing screens, components or styles in the mobile app. globs: ["app/**/*.tsx", "src/**/*.tsx", "components/**/*.tsx", "**/*.swift", "lib/**/*.dart"] alwaysApply: false --- # Mobile UI rules
Screen conversion prompt
The Agent prompt that turns a template screen into a production screen in React Native, Expo, SwiftUI or Flutter, with a shared theme and components.
Cursor Agent prompt: convert app screensConvert @design/screens/[screen-name].html into a production screen in this app. Stack: [Expo with Expo Router | React Native CLI | SwiftUI | Flutter]. Use the styling approach already in the project; if none, use [NativeWind | StyleSheet | SwiftUI modifiers | ThemeData]. Steps: 1. If there is no shared theme yet, create it first from the template: colours (light and dark), type scale, spacing scale and corner radius. Show it to me before continuing. 2. List the shared components this screen needs (buttons, inputs, cards, list rows, tab bar). Reuse any that exist; create missing ones in the components folder with typed props and variants.
Which mobile screens to start with
Onboarding screen templates
The first screens people see decide whether they stay. Start here if your app is new.
Paywall screen templates
Subscription apps earn on this screen; a clear plan comparison and trial terms matter most.
Sign in screen templates
Social and email sign in that looks native on both platforms.
Home screen templates
The screen people open daily; it sets the tone for the whole app.
Profile screen templates
Account, settings and plan in one place users can find.
AI screen templates
Chat, generation and assistant screens for AI apps.
Common mistakes when building mobile UI with Cursor
Pasting screens into chat
Save them as files and reference them with @, so Cursor reads the real design every time.
Converting everything at once
Convert one screen per request and review it on a simulator before the next.
Hard-coded colours in each screen
Ask Cursor to create a theme file first and use it in every screen.
Ignoring the second platform
Check every screen on both iOS and Android; spacing and fonts render differently.
Frequently asked questions
Are these React Native templates?
They are app screen designs in HTML and CSS at phone size. Cursor converts them into React Native or Expo components, SwiftUI views or Flutter widgets in your project, which keeps them usable in any stack.
Can Cursor build a full mobile app from these screens?
Yes, one screen at a time. Start with the screens of one app set, add navigation between them, then connect your data and authentication.
Do the templates work for iOS and Android?
Yes. The designs follow patterns that work on both platforms; ask Cursor to adapt details like the back button and fonts per platform.
How do I keep all screens consistent in Cursor?
Use one app set, save the Cursor mobile UI rule in .cursor/rules, and ask Cursor to build a shared theme and components before converting screens.
Can I use these screens with Expo Router?
Yes. Ask Cursor to create one route per screen and a tab layout that matches the template's bottom navigation.
Do these templates work in Claude Code or Windsurf too?
Yes. The screens are plain files, so any AI coding tool can convert them; this page focuses on the Cursor workflow and rule.
Are there paywall and onboarding screens?
Yes. There are dedicated onboarding, paywall, sign in and splash screens, plus full onboarding flows inside several app sets.
Are the Cursor mobile templates free?
Browsing and previewing are free. Copying the screen code, the Cursor rule and the conversion prompt needs a BrowserMoon licence.
Related