Generate high-fidelity mobile app UI mockups with proper component hierarchy, spacing systems, and platform-specific design patterns for iOS and Android.
Generate a high-fidelity mobile app UI mockup for [APP_NAME], a [APP_CATEGORY — e-commerce/fintech/health/social/productivity] application. Target platform: [PLATFORM — iOS/Android/Cross-platform]. Screen: [SCREEN_NAME — Onboarding / Home Feed / Product Detail / User Profile / Settings / Checkout / Search Results / Chat] Design System Foundation: - Grid: 8px base grid with 16px margins and 8px gutters. - Safe areas: Respect platform-specific safe areas (iOS notch/Dynamic Island, Android status bar). - Typography scale: H1 (28px/Bold), H2 (22px/SemiBold), H3 (18px/Medium), Body (16px/Regular), Caption (12px/Regular). - Color theme: [COLOR_THEME — light mode / dark mode / auto-adaptive]. - Corner radius: [CORNER_STYLE — sharp (0px) / subtle (8px) / rounded (12px) / pill (full)]. Primary color: [PRIMARY_COLOR] Background: [BG_COLOR] Surface/Card: [SURFACE_COLOR] Text primary: [TEXT_PRIMARY] Text secondary: [TEXT_SECONDARY] Component Specifications: 1. Navigation: [NAV_PATTERN — bottom tab bar with 5 items / hamburger drawer / top tabs / floating action button]. 2. Cards: Elevated cards with [CARD_SHADOW — subtle/medium/prominent] shadow, containing [CARD_CONTENT — image + title + subtitle / avatar + text + action / icon + metric + label]. 3. Buttons: Primary CTA button — [BUTTON_STYLE — filled/outlined/gradient] with [BUTTON_SHAPE — rectangular/rounded/pill]. 4. Input fields: [INPUT_STYLE — outlined/filled/underlined] with clear labels and helper text. 5. Status bar: Show realistic time, battery, and signal indicators for the target platform. Content Wireframe for [SCREEN_NAME]: - Header area: [HEADER_CONTENT] - Main content area: [MAIN_CONTENT_DESCRIPTION] - Bottom area: [BOTTOM_CONTENT] Realism Details: - Use realistic placeholder content (not lorem ipsum) relevant to [APP_CATEGORY]. - Show realistic data: Indian phone numbers (+91), INR currency (₹), Indian city names. - Include proper touch target sizes (minimum 44x44pt for iOS, 48x48dp for Android). - Show one notification badge on a navigation item. Device Frame: - Render inside a [DEVICE — iPhone 16 Pro / Samsung Galaxy S25 / Google Pixel 9] device frame. - Display at a slight [ANGLE — straight-on / 15-degree perspective / isometric] angle. - Background: [MOCKUP_BG — solid color / gradient / blurred lifestyle photo]. Output as a single high-resolution mockup image at 2x resolution.
Free to copy and use. Compatible with DALL-E 4, Midjourney v7, Stable Diffusion 4.
Fill in app details, select your screen type, define the design system tokens, and describe the content layout. For a complete app presentation, generate 5-8 key screens and arrange them in a portfolio-style showcase.
Initial release
Sign in and download this prompt to leave a review.