Mobile App Ui Design

Mobile App UI/UX Design Skill

[](https://skills.sh) [](https://agentskills.io) [](LICENSE)

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

``