Mobile Design Skills
AI agent skills for designing platform-native iOS and Android interfaces that don't look AI-generated.
Table of Contents
Background
AI coding assistants tend to produce generic mobile UIs: stock navigation, default colors, uniform shapes, no thought given to motion. These two skills push the output from "template app" toward "intentionally designed" by teaching agents the current platform design languages and the specific anti-patterns that mark amateur work.
One skill covers iOS 26 Liquid Glass. The other covers Android 16 Material 3 Expressive. Both follow the Agent Skills open format, so they work with Claude, Cursor, Copilot, Codex, and any assistant that supports it.
Philosophy
These are opinionated, generative skills, not audit checklists. They push agents toward bold, intentional design choices the way frontend-design does for web.
What they cover:
- Platform-specific design language (Liquid Glass, M3 Expressive)
- Visual hierarchy, typography, color, shape, and motion guidelines
- Accessibility requirements baked into the design decisions
- Anti-patterns that produce generic "AI slop" on each platform
What they leave out on purpose:
- Implementation code (use platform SDK docs for SwiftUI, UIKit, and Compose APIs)
- Cross-platform frameworks like React Native and Flutter
Features
| Skill | Platform | Design Language | Key Topics |
|---|
mobile-design-ios | iOS 26 | Liquid Glass | Two-layer hierarchy, glass variants, GlassEffectContainer, SF Symbols 7, materialize/morph motion, haptics, concentric geometry, scroll-edge effects, sidebar/sheet patterns |
mobile-design-android | Android 16 | M3 Expressive | Spring-based motion (spatial vs effects), 35 shapes with morphing, 48 color roles, 30 typography styles, ButtonGroup/FABMenu/Toolbar, dynamic color, edge-to-edge, predictive back, adaptive layouts |
Each skill includes a Design Thinking section that forces a clear direction before any UI is generated, detailed platform guidelines, inline accessibility requirements, and an explicit list of the anti-patterns that mark AI-generated work on that platform.
Installation
Pick whichever path fits your AI tool.
Option A: skills.sh (recommended)
# Install both skills
npx skills add https://github.com/ivan-magda/mobile-design-skills
# Install only one
npx skills add https://github.com/ivan-magda/mobile-design-skills --skill mobile-design-ios
npx skills add https://github.com/ivan-magda/mobile-design-skills --skill mobile-design-android
Option B: Claude Code plugin
For personal use:
/plugin marketplace add ivan-magda/mobile-design-skills
/plugin install mobile-design-skills@mobile-design-skills
To provide the skills to everyone working in a repository, configure .claude/settings.json:
{
"enabledPlugins": {
"mobile-design-skills@mobile-design-skills": true
},
"extraKnownMarketplaces": {
"mobile-design-skills": {
"source": {
"source": "github",
"repo": "ivan-magda/mobile-design-skills"
}
}
}
}
Option C: Claude Projects
Upload the SKILL.md file for your target platform to a Claude Project's knowledge base.
Option D: Manual install
- Clone this repository.
- Install or symlink the skill folder(s) following your tool's skill installation docs.
- Ask your AI tool to use the skill for mobile design tasks.
Where to save skills for common tools:
Usage
Once a skill is installed, reference it in your prompt. The agent loads SKILL.md and applies its design thinking and platform guidelines before generating any UI.
Design an iOS fitness tracker dashboard using the mobile design ios skill
