Design and build production-ready mobile app interfaces with React Native, Expo, and AI-generated UI
Mobile App UI/UX Design System is the definitive AI framework for React Native and Expo developers. It covers the full mobile app UI stack: component library, navigation architecture, onboarding flows, authentication screens, push notifications, and theme systems. Every prompt produces production-ready TypeScript code with proper accessibility, platform-specific behavior (iOS/Android), and Expo compatibility.
Full Access Unlocked
All 46 prompts · All 6 modules
"The navigation architecture prompt saved me 2 days of setup. The bottom tab navigator component is e..."
React Native Developer · Freelance Mobile Dev
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
Purchase & download the framework
Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.
Open your project — new or existing
This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.
Paste the Orchestrator Prompt into your builder's chat
Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.
Add your API keys as secrets
Critical — Novice UsersIn your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.
Don't have a MySQL server?
You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.
How to set up cPanel MySQL & connect to your AI website →Need help with Stripe?
Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
Prompting Airo after setup — always name the file
When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."
Run the framework prompts inside your live app
Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.
Test end-to-end, then publish or hand off to your client
Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.
6 modules · 46 prompts · 6 workflow stages
Component Library
20+ production-ready React Native components: Button (variants), TextInput (with validation), Card, Modal, BottomSheet, Toast, Badge, Avatar, Skeleton, ProgressBar, Switch, Checkbox, RadioGroup, Dropdown, DatePicker, and more.
12 promptsNavigation Architecture
React Navigation v7 setup: stack navigator, bottom tab bar with custom icons, drawer navigator, nested navigation, deep linking configuration, and navigation TypeScript types.
8 promptsOnboarding System
3-screen animated onboarding flow with swipe gestures, dot pagination, skip button, and AsyncStorage persistence (never show again). Includes MidJourney prompts for onboarding illustration style.
6 promptsAuthentication Screens
Login, signup, forgot password, OTP verification, and biometric authentication (Face ID/Touch ID). All screens include form validation, loading states, and error handling.
8 promptsPush Notification System
Expo Notifications setup, permission request flow, notification handler (foreground/background/killed), notification categories with actions, and scheduled notification system.
6 promptsTheme & Accessibility System
Dark/light theme with system preference detection, manual toggle with AsyncStorage persistence, theme context provider, and accessibility utilities (font scaling, reduced motion, screen reader support).
6 promptsBuild a React Native TypeScript bottom tab navigator using React Navigation v7 and Expo. Requirements: 1) 5 tabs: Home, Explore, Create (center, larger), Notifications, Profile, 2) Custom tab bar component (not default), 3) Center "Create" button: elevated, circular, primary color, slightly above the tab bar, 4) Active tab: icon + label in primary color, inactive: muted gray, 5) Badge on Notifications tab showing unread count (prop), 6) Haptic feedback on tab press (expo-haptics), 7) iOS: safe area insets, Android: proper bottom padding, 8) Smooth icon transition animation on press. TypeScript with proper React Navigation types.
Build a React Native TypeScript 3-screen onboarding flow using Expo. Requirements: 1) Horizontal swipe between screens using FlatList with pagingEnabled, 2) Each screen: illustration (Image), title, subtitle, 3) Dot pagination: animated active dot expands, 4) "Next" button on screens 1–2, "Get Started" on screen 3, 5) Skip button (top right) on screens 1–2, 6) Entrance animation: content fades and slides up as each screen comes into view, 7) On complete or skip: navigate to auth screen + save "onboarded: true" to AsyncStorage, 8) Never show again if AsyncStorage flag is set. TypeScript.
Create App Store screenshot compositions for [APP NAME], a [APP CATEGORY] app. For each of 5 screenshots: 1) Device frame: iPhone 15 Pro mockup, 2) Background: [BRAND COLOR] gradient, 3) Headline text: benefit-focused (under 6 words), 4) App screen: [DESCRIBE SCREEN], 5) Visual style: clean, modern, [BRAND AESTHETIC]. MidJourney prompt: App Store screenshot mockup, iPhone 15 Pro frame, [APP SCREEN DESCRIPTION], [COLOR PALETTE] background, marketing quality, clean typography, professional app store presentation --ar 9:19.5 --v 6
prompts
12 prompts
architecture
8 prompts
workflow
6 prompts
templates
8 prompts
system
12 prompts
"The navigation architecture prompt saved me 2 days of setup. The bottom tab navigator component is exactly what I needed — custom design, haptics, badges, all in one prompt."
React Native Developer
Freelance Mobile Dev
"The onboarding flow prompt produced a polished, animated experience in one shot. The push notification system setup that used to take a day now takes an hour."
Startup CTO
Consumer Mobile App
All 46 prompts across 6 modules are unlocked for your account.
Lifetime access