136 lines
4.0 KiB
Markdown
136 lines
4.0 KiB
Markdown
# 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
|
|
|
|
```
|
|
"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)
|
|
```bash
|
|
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
|
|
```bash
|
|
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](https://github.com/ceorkm/mobile-app-ui-design/issues)
|