Mobile App Ui Design
Design polished mobile screens, flows, and components with intentional hierarchy before implementing React Native, Flutter, or SwiftUI.
Overview
Mobile App UI Design is an agent skill most often used in Build (also Validate) that designs high-quality mobile screens, flows, and components following mobile-first UX principles.
Install
npx skills add https://github.com/ceorkm/mobile-app-ui-design --skill mobile-app-ui-designWhat is this skill?
- Sequential design process for any mobile screen starting from user goal, feeling, and focal hierarchy
- Core philosophy aligned with intentionality over flashiness, citing patterns from top consumer apps
- Covers onboarding flows, mobile navigation, wireframes, and improving existing screens
- Supports React Native, Flutter, and SwiftUI style visual prototypes
- Triggers on plain-language requests like design an app or make this screen look better
Adoption & trust: 1.6k installs on skills.sh; 42 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a credible mobile screen or flow but your agent keeps producing web-centric layouts that ignore thumb zones, hierarchy, and emotional tone.
Who is it for?
Indie app builders validating look-and-feel or polishing onboarding, navigation, and core screens before or during mobile build-out.
Skip if: Desktop-only dashboards, pure backend APIs, or teams that already have a locked design system and only need codegen.
When should I use this skill?
User asks to design a mobile app screen, create app mockups, build mobile UI components, improve mobile design, onboarding, navigation, wireframes, React Native, Flutter, SwiftUI prototypes, or says design an app or make
What do I get? / Deliverables
You get intentional mobile mockups and component guidance ready to hand to React Native, Flutter, or SwiftUI implementation.
- Mobile screen or flow design spec
- Component and navigation recommendations
- Visual prototype direction for native stacks
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Visual mobile interface work belongs on the Build frontend shelf because it produces screen-level specs and prototypes tied to implementation. Frontend subphase covers mobile-first layouts, navigation, and component systems rather than backend or distribution work.
Where it fits
Turn a landing-page promise into clickable onboarding mockups to test comprehension.
Design a home tab and primary CTA hierarchy before Flutter widget implementation.
Refresh in-app empty states and upsell sheets for clearer lifecycle messaging.
How it compares
A mobile-first design workflow skill, not a generic frontend CSS generator or app-store listing optimizer.
Common Questions / FAQ
Who is mobile-app-ui-design for?
Solo builders shipping mobile apps who want Airbnb- or Duolingo-grade intentionality in screens without hiring a full-time product designer.
When should I use mobile-app-ui-design?
In Validate when prototyping flows and in Build when designing or refining screens, navigation, and onboarding before or alongside native implementation.
Is mobile-app-ui-design safe to install?
Review the Security Audits panel on this Prism page; the skill is design guidance and does not require credentials by default.
SKILL.md
READMESKILL.md - Mobile App Ui Design
# Mobile App UI/UX Design Skill This skill guides the creation of professional, polished mobile app interfaces that follow proven design principles used by top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom. ## Core Philosophy Great mobile UI isn't about flashiness — it's about intentionality. Every pixel, every spacing value, every color choice should serve the user. The goal is to create interfaces that feel smooth, personal, and alive — not just functional. Before designing anything, understand three things: 1. **What is the user trying to accomplish?** (reduce friction to that goal) 2. **How should this make the user feel?** (trust, delight, confidence, calm) 3. **What's the one thing they should notice first?** (visual hierarchy) ## Design Process Follow this sequence for any mobile screen: ### Step 1: Understand the Context - What type of app? (fitness, finance, social, productivity, health, crypto, etc.) - Who is the user? (new, returning, power user — adapt the experience) - What's the primary action on this screen? - What industry design conventions apply? (See `references/industry-conventions.md`) ### Step 2: Structure First (UX Lens) - Map the user flow: what screen comes before and after? - Identify the MVP elements — only what's essential for this screen - Place primary actions in the **thumb zone** (bottom 1/3 of screen) - Follow the **F-pattern** reading order for content layout - Reduce interaction cost: expose content directly instead of hiding behind taps - Turn empty states into opportunities with guidance, illustration, and a CTA - Choose the right input method: sliders/scroll wheels for one-time setup, text fields for repeated/precise entry ### Step 3: Apply Visual Design (UI Lens) Follow these rules in order: #### Typography - Use **one font family** (two max, with clear hierarchy purpose) - Maximum **4 font sizes** and **2 font weights** - Use monospace variants for large numbers (prices, stats, metrics) - Keep text containers under 600px wide for readability - Create hierarchy with size, weight, and opacity — not just bold everything #### Color System (60/30/10 Rule) - **60%** — neutral base (white, light gray, or dark background) - **30%** — complementary color (black text, dark elements) - **10%** — brand/accent color (CTAs, key indicators, icons) - Use **opacity variations** of the neutral color for text hierarchy: 100% for headings, 80% for body, 60-70% for secondary text - Use the accent color at 5% opacity for secondary buttons and subtle card highlights - Match shadow colors to the background (tint shadows, never pure gray/black on colored backgrounds) - Save strong colors (like red) for meaningful moments — overuse kills hierarchy #### Spacing (8-Point Grid System) - All spacing values must be divisible by **8 or 4** (8, 12, 16, 24, 32, 48, 64, 80, 96) - Use **relationship-based spacing**: related elements closer together, unrelated further apart - Multiplier rule: if related text elements are 16px apart, the gap to the next group should be 2× (32px) - Section vertical padding: at least 80-96px (160px for major sections on larger screens) - Card internal padding: 24-32px baseline - Larger text = larger spacing needed #### Shadows - Always use **soft shadows** — never harsh/distinct - Match shadow color to the backgr