Mobile App UI Design Skill
Guides Claude in designing native feeling mobile app interfaces.
by AgentVoltv1.0.0Published 1y ago2 installs
Free to sign up · every skill included with AgentVolt Pro
Before & after
Same prompt, same agent — the only difference is the skill.
Prompt“Design mobile screens that feel native, not web-like.”
Beforegeneric AI agent
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.
Afterwith Mobile App UI Design Skill
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
name: mobile-app-ui-design-skill description: Use when Guides Claude in designing native feeling mobile app interfaces.
Mobile App UI Design Skill
Provides mobile specific UI design principles so Claude generated app screens follow platform conventions instead of web-style layouts.
What you get
- SKILL.md with mobile UI design patterns and references.
Customize your output
- Covers iOS and Android specific conventions.
Example output
Native feeling mobile app screen designs.
Best for
Mobile app builders using Claude Code for UI design.
SKILL.md preview
SKILL.md
---
name: mobile-app-ui-design-skill
description: Use when designing a mobile app screen and it needs to follow platform-specific conventions instead of defaulting to a shrunk-down web layout.
version: 1.0.0
category: Design / Design and Frontend
author: AgentVolt
license: proprietary
tags:
- design
- design-and-frontend
- standard
---
# Mobile App UI Design Skill
Guides Claude in designing native-feeling mobile app interfaces, applying platform-specific conventions instead of defaulting to web-style layouts that feel out of place on a phone.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill
More design skills
View all Design skills →Frontend UI UX Skill (oh-my-opencode)
A frontend UI and UX focused skill from the oh-my-opencode toolkit.
Design
Premium Frontend UI Skill
Pushes generated frontend UI toward a premium, polished visual style.
Design
Material 3 Skill
Teaches Claude Google Material 3 design system conventions.
Design
Expo Building Native UI Skill
Official Expo skill for building native feeling UI in Expo apps.
Design