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 background with a tinted hue
• Use subtle white inner shadows on buttons to add dimension
• Add faded drop shadows for depth without heaviness

Visual Cues & Imagery

• Use icons, emojis, illustrations, and images to make information digestible
• User avatars/photos > initials > generic icons (for representing people)
• Color-coded categories with soft solid backgrounds + clean isolated images
• Keep visual style consistent across the entire app — no random stock photo mix
• Use AI-generated or curated visuals with matching color palettes

Step 4: Design for Emotion (Peak-End Rule)

The user will remember two moments: the peak (most intense) and the end (last impression).

• Identify your peak moment: completing a core task, hitting a milestone, finding what they want
• Design the peak: micro-animations, celebratory feedback, sparkles, badges, encouraging copy
• Design the ending: summary card, progress affirmation, gentle nudge to return
• Add emotional feedback loops: success states should feel rewarding (bounce, glow, sparkle)
• Celebrate small wins — success states don't need to be huge, but they should feel intentional
• Use motion and animation as trust signals, especially in high-stakes domains (finance, crypto, health)

Step 5: Polish & Details

• Add subtle glow effects behind key elements (blur + opacity)
• Use tiny white inner shadows on primary buttons
• Add 5% opacity primary-color borders on secondary elements
• Consider micro-animations for state changes
• Ensure all tap targets are at least 44×44pt
• Check contrast ratios for accessibility
• Design error states, empty states, loading states, and success states

Smart Patterns to Apply

Personalization by User Stage

• New users: simple welcome, guided setup, minimal options
• Returning users: personalized content, routine-focused, progress indicators
• Power users: advanced stats, optimization tools, dense information

Smarter Search

Never show a blank search screen. Include:

• Recent searches
• Popular/trending items
• Personalized recommendations

Order/Status Tracking

• Open with a confident status message
• Humanize with photos, names, quick-action buttons
• Use visual timelines instead of text-based date lists

Category Screens

• Use color-coded cards with soft backgrounds and clean isolated images
• Ensure visual consistency across all category items
• Create rhythm in the layout for effortless scanning

Selection Over Manual Input

• Offer tappable selections for common options (job titles, preferences, etc.)
• Include icons/emojis alongside options for personality
• Provide an "Other" option with manual input as fallback

Anti-Patterns to Avoid

• Overusing flashy gradients and blur effects (unless you can truly pull it off)
• More than 4 font sizes or 3 font weights
• Random spacing values (use the 8-point grid!)
• Hiding key content behind banners or extra taps
• Placing CTAs outside the thumb zone
• Generic empty states with no guidance
• Using sliders for frequent/precise data entry
• Making all information the same visual weight (no hierarchy)
• Emphasizing labels over values (e.g., making "Sales" bigger than "591")
• Pure gray/black shadows on colored backgrounds

Implementation Notes

When building these designs as React artifacts or HTML:

• Use Tailwind CSS utility classes for spacing, colors, and typography
• Import Lucide React for clean, consistent iconography
• Use Recharts for any data visualization
• Apply CSS transitions for micro-interactions and state changes
• Use CSS variables for the color system
• Mobile-first: design for 375px width (iPhone SE) as baseline
• Use rounded-2xl or rounded-3xl for modern card aesthetics
• Apply backdrop-blur for glassmorphism effects where appropriate

For deeper guidance on industry-specific conventions and emotional design patterns, read references/industry-conventions.md.

Codebase Index

Overview

This repository contains a comprehensive mobile app UI/UX design skill and reference guide focused on creating professional, polished mobile interfaces.

File Structure

mobile-app-ui-design/
├── SKILL.md                      # Mobile App UI/UX Design Skill Guide
├── references/
│   └── industry-conventions.md   # Industry-Specific Design Reference
├── INDEX.md                      # This file
└── README.md                     # Documentation & Installation

---

SKILL.md

Mobile App UI/UX Design Skill

A comprehensive guide for designing high-quality mobile app interfaces following proven design principles from top-tier apps.

Key Sections:

• Core Philosophy (lines 10-18): User-centric design approach
• Design Process (lines 20-96): 5-step framework
• Step 1: Understand Context (lines 23-27)
• Step 2: Structure First - UX Lens (lines 29-37)
• Step 3: Visual Design - UI Lens (lines 39-76)
• Typography (lines 41-46)
• Color System - 60/30/10 Rule (lines 48-56)
• Spacing - 8-Point Grid (lines 58-64)
• Shadows (lines 66-69)
• Visual Cues & Imagery (lines 71-77)
• Step 4: Design for Emotion - Peak-End Rule (lines 79-87)
• Step 5: Polish & Details (lines 89-96)
• Smart Patterns (lines 98-124): User-stage personalization, search, status tracking, categories
• Anti-Patterns to Avoid (lines 126-136): Common design mistakes
• Implementation Notes (lines 138-149): Technical guidance for React/Tailwind

Design Principles Summary:

• One font family, max 4 sizes, 2 weights
• 60/30/10 color rule
• 8-point grid spacing system
• Soft shadows matched to backgrounds
• Thumb-zone primary actions
• Emotional feedback loops
• Peak-end rule application

---

references/industry-conventions.md

Industry Conventions & Emotional Design Reference

Deep dive into industry-specific design languages and psychological principles for emotional design.

Key Sections:

• Industry-Specific Design Languages (lines 3-55)
• AI/Tech (lines 7-11)
• Crypto/Web3 (lines 13-17): Phantom case study
• Finance/Banking (lines 19-23): Revolut case study
• Health/Wellness (lines 25-29): Ahead case study
• Sleep/Meditation (lines 31-34)
• Education/Learning (lines 36-39): Duolingo case study
• Fitness (lines 41-44)
• Productivity (lines 46-49)
• E-commerce/Food (lines 51-54)

• Emotional Design Principles (lines 59-120)
• Peak-End Rule (lines 60-96): Nobel Prize research by Daniel Kahneman
• Emotional Feedback Loops (lines 98-103)
• Three Strategic Principles from Spotify (lines 105-120)
• The Trojan Horse: Hide complexity
• The Vanity Mirror: Identity-based sharing
• The Comfort Trap: Consistency as moat

• Design Process for Client/Product Work (lines 124-152)
• Phase 1: Discovery & Inspiration (lines 126-129)
• Phase 2: UI Direction (lines 131-135)
• Phase 3: UX Structure (lines 137-144)
• Phase 4: Combine UI + UX (lines 146-148)
• UI vs UX lens separation (lines 150-152)

Key Insights:

• Industry conventions build familiarity vs. breaking them stands out
• Peak-end rule: users remember the most intense moment + final impression
• Emotional feedback > functional feedback
• Separate UI and UX research lenses

---

Quick Reference Guide

When to Use This Skill

• Designing mobile app screens
• Creating app mockups
• Building mobile UI components
• Improving existing mobile designs
• Creating onboarding flows
• Designing mobile navigation
• Building React Native/Flutter/SwiftUI prototypes

Core Design Framework

1. Understand → Context, user, primary action, industry conventions 2. Structure → User flow, MVP elements, thumb zone, F-pattern 3. Visual Design → Typography, color (60/30/10), spacing (8pt grid), shadows 4. Emotion → Peak moment, ending, feedback loops 5. Polish → Micro-interactions, states, accessibility

Design Laws Applied

• 60/30/10 Color Rule: 60% neutral, 30% complementary, 10% accent
• 8-Point Grid: All spacing divisible by 8 or 4
• Peak-End Rule: Users remember peak + ending moments
• Thumb Zone: Primary actions in bottom 1/3 of screen
• F-Pattern: Natural reading/scanning order
• Typography Hierarchy: Max 4 sizes, 2 weights, opacity for hierarchy

---

Implementation Tech Stack

• React (for artifacts)
• Tailwind CSS (utility classes)
• Lucide React (iconography)
• Recharts (data visualization)
• CSS transitions (micro-interactions)
• Mobile-first design (375px baseline)

---

Tags

mobile-ui ux-design emotional-design design-system react-native flutter swiftui tailwind design-principles app-design

Mobile App UI/UX Design Skill

  

A comprehensive Claude Code skill for designing professional, polished mobile app interfaces that follow proven design principles from top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom.

Overview

This skill guides the creation of mobile app UIs that are intentional, smooth, personal, and alive — not just functional. It covers everything from design philosophy to implementation details.

Features

• Complete Design Process: 5-step framework from context to polish
• Industry-Specific Conventions: Design patterns for 9+ industries (AI, Crypto, Finance, Health, etc.)
• Emotional Design Principles: Peak-End Rule, feedback loops, strategic patterns
• Design Systems: Typography, color (60/30/10 rule), spacing (8-point grid)
• Implementation Guidance: React, Tailwind CSS, component patterns

When to Use

This skill automatically triggers when you ask Claude to:

• Design a mobile app screen
• Create app mockups
• Build mobile UI components
• Improve an existing mobile app design
• Create onboarding flows
• Design mobile navigation
• Build React Native/Flutter/SwiftUI interfaces

Design Principles

Core Philosophy

Great mobile UI isn't about flashiness — it's about intentionality. Every pixel, spacing value, and color choice should serve the user.

Key Design Laws

• 60/30/10 Color Rule: 60% neutral, 30% complementary, 10% accent
• 8-Point Grid System: All spacing divisible by 8 or 4
• Peak-End Rule: Users remember peak moment + ending
• Thumb Zone: Primary actions in bottom 1/3 of screen
• F-Pattern: Natural reading/scanning order
• Typography Hierarchy: Max 4 sizes, 2 weights

Examples

"Design a fitness app home screen"
"Create a banking app dashboard"
"Build a meditation app interface"
"Design a crypto wallet transaction screen"
"Create an onboarding flow for a health app"

File Structure

.
├── SKILL.md                      # Main skill guide
├── references/
│   └── industry-conventions.md   # Industry-specific patterns & emotional design
├── INDEX.md                      # Navigation & quick reference
└── README.md                     # This file

Installation

Quick Install (Recommended)

npx skills add ceorkm/mobile-app-ui-design

Manual Installation

1. Clone this repository 2. Copy files to ~/.claude/skills/mobile-app-ui-design/ 3. Restart Claude Code

Direct Download

npx skills add ceorkm/mobile-app-ui-design

What's Included

SKILL.md

• Core design philosophy
• 5-step design process
• Visual design rules (typography, color, spacing, shadows)
• Smart UI patterns
• Anti-patterns to avoid
• Implementation notes

industry-conventions.md

• Industry-specific design languages (AI, Crypto, Finance, Health, etc.)
• Peak-End Rule from Nobel Prize research
• Emotional feedback loops
• Spotify's strategic principles
• 4-phase design process for client work

INDEX.md

• Complete navigation with line numbers
• Quick reference guide
• Design laws summary
• Tech stack overview

Tech Stack

The skill provides guidance for:

• React (artifacts)
• Tailwind CSS (utility classes)
• Lucide React (icons)
• Recharts (data visualization)
• CSS transitions (micro-interactions)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - feel free to use this skill in your projects.

Credits

Design principles compiled from industry best practices, research papers, and case studies from leading design teams at:

• Airbnb
• Duolingo
• Spotify
• Revolut
• Phantom
• Apple (Design Award winners)

---

Made for Claude Code • Report Issues

Industry Conventions & Emotional Design Reference

Industry-Specific Design Languages

Different app categories have established visual conventions that users expect. Understanding these helps you decide when to follow conventions (for familiarity) and when to break them (to stand out).

AI / Tech Products

• Soft gradients and moving elements
• Depth and dimensionality with glowing elements
• Smooth animations communicating intelligence
• Dark or light themes with ethereal accent colors

Crypto / Web3

• Futuristic aesthetic: neon colors, bold typography
• Dark mode backgrounds with geometric shapes
• High-contrast, cutting-edge visual language
• Key lesson from Phantom: polish builds trust — treat visual details, motion, and transitions as core product features, not fluff

Finance / Banking

• Blue-dominant palettes (trust, stability, reliability)
• Generous white space, clean layouts, conservative typography
• Design must feel safe and professional
• Key lesson from Revolut: tactile interactions (draggable charts, 3D card flips) turn basic features into premium experiences

Health / Wellness

• Bright, approachable colors to reduce anxiety
• Friendly illustrations and warm micro-interactions
• Non-intimidating onboarding flows
• Key lesson from Ahead (Apple Design Award): guide users kindly, build the "peak" as a personalized insight moment

Sleep / Meditation

• Purple and deep blue tones (calming associations)
• Minimal UI, soft transitions
• Ambient, low-contrast interfaces

Education / Learning

• Bright, playful color palettes
• Character-driven experiences with personality
• Key lesson from Duolingo: character animations and emotional feedback loops doubled DAUs from 14.2M to 34M+ in 2 years

Fitness

• Energetic colors, bold typography
• Progress-focused with visual momentum indicators
• Adapt UI complexity to user stage (new → returning → power user)

Productivity

• Clean, minimal, information-dense but organized
• Strong grid systems and consistent spacing
• Quick-action patterns and keyboard shortcuts

E-commerce / Food

• High-quality product photography
• Prominent CTAs and frictionless checkout flows
• Trust signals: reviews, ratings, delivery estimates

---

Emotional Design Principles

The Peak-End Rule (from Nobel Prize-winning research by Daniel Kahneman)

The brain doesn't remember an experience as a whole — it compresses it into two moments: 1. The Peak: the most intense/emotional moment 2. The End: the final impression before leaving

Disney parks use this — 70% of visitors return not because the whole day was flawless, but because the moments they remember were.

Applying Peak-End to Mobile Apps

Mapping your journey: 1. Lay out every step in your core flow (use FigJam, sticky notes, whatever) 2. Ask: Where is the user slowed down? Where might stress peak? Where's the quiet in between? 3. Treat this map as a living document

Designing the peak:

• Pick ONE spot to create a "holy dang" moment
• After completing a core task, hitting a milestone, or investing significant effort
• Can be: a badge, a sparkle animation, surprise copy, a personalized brief that builds in front of them
• Micro-animations and supporting tags showing unique value to the user's specific action

Designing the ending:

• Never let the app just "fall off" without closure
• Celebrate what was done (check mark, summary card)
• Encourage what comes next
• Reaffirm progress ("You showed up today. That's huge.")
• Gentle nudge to return

Reducing negative peaks:

• Look at wait screens, error states, long forms
• Use uplifting microcopy
• Add helpful tools before users even ask
• Use delays as opportunities (loading animations, tips) instead of dead space

Testing and iterating:

• Try timing changes, emojis vs icons, animations vs static feedback
• Watch where people drop off and where they linger longer than expected

Emotional Feedback Loops

When users take actions, don't just give functional feedback — give emotional feedback:

• Correct answer → encouragement, cheer, character reaction (not just a green check)
• Mistake → gentle correction with personality (not just a red X)
• Milestone → celebration that feels proportional to the achievement
• Progress → momentum visualization (streaks, levels, completion bars with motion)

Three Strategic Principles (from Spotify's playbook)

1. The Trojan Horse — Hide complex tech in familiar interfaces

• Wrap sophisticated features in UI patterns users already know
• Users don't want to interact with algorithms — they want experiences that feel natural
• Ask: "What's the simplest, most familiar way users can interact with this feature?"

2. The Vanity Mirror — Make sharing about identity, not the app

• Create personal insights so meaningful that sharing feels like self-expression
• Don't celebrate what users did in your app — celebrate who they are
• "You're a night owl who does their best work after 9 PM" > "You completed 25 tasks"

3. The Comfort Trap — Consistency as a competitive moat

• Every interaction should follow the same logic and feel like it belongs to the same family
• Predictable patterns become second nature → switching costs increase
• Design consistency isn't about aesthetics — it's about creating habits that competitors can't replicate

---

Design Process for Client/Product Work

Phase 1: Discovery & Inspiration

1. Understand the product fundamentally: what problem, who's it for, what's different 2. Gather UI inspiration (Mobbin, Dribbble, Behance, Twitter, real apps) 3. Organize into mood boards by "vibe" — separate categories for different directions 4. Present 3-5 distinct directions to stakeholders

Phase 2: UI Direction (Visual Only)

1. Create 3-5 mockup screens exploring different visual executions 2. Mix and match: client picks button style from A, typography from B, cards from C 3. Finalize one unified visual direction before touching UX

Phase 3: UX Structure

1. Brain dump ALL features, then refine to MVP (3-5 core screens) 2. Map screen flows as labeled boxes with arrows 3. Create wireframes (grayscale, structural, no visual design) 4. Iterate with stakeholder feedback

Phase 4: Combine UI + UX

1. Apply the finalized visual direction to approved wireframes 2. Check in early — there should be no major surprises 3. Polish: pixel-perfect alignment, all states designed (error, empty, loading, success)

Key Separation

• UI lens: How do colors work together? What emotions do they evoke? What's the spacing, typography, visual hierarchy?
• UX lens: Where's the search bar? Are tap targets big enough? How many steps to complete a core task? Can anything be eliminated?

Never mix these lenses during research — gather UI and UX inspiration separately.