Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Before & after
Same prompt, same agent — the only difference is the skill.
Designing native-feeling mobile interfaces requires understanding the platform conventions. iOS and Android have their own design languages and interaction patterns that users expect. For iOS, you'll want to follow Human Interface Guidelines—things like safearea insets, consistent spacing, and platform-specific interactions. For Android, it's Material Design 3 with its own color system, motion patterns, and component library. There are differences in how buttons work, how navigation functions, text sizing, and touch targets. If you can share more details about what you're building and which platforms you're targeting, I can give you more specific guidance on getting those native feels right.
NATIVE MOBILE UI CONVENTIONS iOS PATTERNS • Safe area: Content avoids notch/Dynamic Island (top 44-50pt, bottom 34pt on home-indicator devices) • Tab bar: 5 tabs max, icon + label, height 49pt, centered spacing • Button: Minimum 44x44pt tap target, rounded corners 8-12pt • Text: System font (SF Pro), 17pt body, 13pt caption, line height 1.4x • Navigation: Push/pop animations, swipe-back to previous screen • Color: Light/dark mode aware (system colors for contrast) ANDROID PATTERNS • Material You: Dynamic color from wallpaper, shadow elevation system • Navigation: Bottom bar (navigation rail on tablets), 5 items max • Button: 48x48pt minimum, Material ripple effect on tap • Text: Roboto font, 14sp body, 12sp caption, 1.5x line height • Density: Compact (for info-dense screens), default (balance) • Gesture: Swipe from left edge = back (no button needed on modern Android) CROSS-PLATFORM CONSIDERATIONS • Touch target: 44pt minimum both platforms (accessibility + comfort) • Spacing: 8pt grid (iOS 4pt, Android 4pt multiples) • Form inputs: Keyboard type specific (email, number, tel) • Icons: 24pt (iOS), 24dp (Android), same vector source • Loading state: Activity indicator (iOS 20pt, Android 40dp) COMMON MISTAKE: Web-like hover states, keyboard inputs without mobile keyboard context, tiny buttons, gray text that fails WCAG contrast
About this skill
Your app screens look like a website squeezed onto a phone. You see hamburger menus, centered pop-ups with an X, buttons too small to tap, an iOS screen with an Android floating button, and no plan for the keyboard, empty lists or large text. This skill designs and reviews mobile screens to Apple's and Google's conventions, with sizes in points and dp, so the result feels like it belongs on the device.
What it does
- Picks the right navigation for each task: tabs for top-level sections, pushed screens for detail views, sheets for self-contained tasks. It also handles the back-gesture differences between iOS and Android.
- Writes screen specs region by region, with real touch-target sizes, safe-area insets, spacing and each platform's own type sizes.
- Lists every place iOS and Android should differ (primary action, lists, dialogs, pickers, back behavior) and what can stay shared.
- Covers loading, empty, error, offline, long-text and large-accessibility-text states as part of the screen.
- Reviews pasted mockups or code against a web-habits checklist and ranks the fixes by how much they affect users.
- Flags risky ideas early: more than 5 tabs, permission prompts or paywalls on first launch, and possible App Store review issues.
What you get
A ready-to-build screen spec, or a ranked critique, with a clear iOS vs Android section. When you ask for code, it uses system components in SwiftUI, Jetpack Compose, React Native or Flutter.
Best for
Founders, developers and designers building iOS or Android apps (native or cross-platform) who want screens that pass a native-feel review without a dedicated mobile designer.
SKILL.md preview
---
name: native-ios-android-screen-design
description: Designs and reviews iOS and Android app screens. It produces specs measured in pt/dp with the right navigation for each platform, touch targets, type sizes, safe areas, sheets and every screen state, and it flags web-style layouts and mixed-up platform conventions. Use when the user says "design a screen for my app", "my app looks like a website", "make this feel native on iPhone", "tab bar or hamburger menu?", "review my mobile mockup", "my buttons are too hard to tap", "how should this differ on Android vs iOS".
---
# Native iOS and Android Screen Design and Review
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.
Evidence-Based Journey Map Builder
Map one persona's journey across every touchpoint with evidence-tagged cells, sized pain points, backstage handoffs, and ranked fixes.