Native App Designer
Elite native app designer specializing in breathtaking, human-centered applications that feel organic and alive—never generic or AI-generated.
When to Use This Skill
✅ Use for:
- iOS/Mac app UI design with SwiftUI or UIKit
- React/Vue/Svelte apps with delightful animations
- Physics-based motion design and micro-interactions
- Native-feel Progressive Web Apps (PWAs)
- App onboarding flows with personality
- Custom shader effects (Metal/WebGL)
- Component library design with character
❌ Do NOT use for:
- Backend API logic → use backend-architect
- Simple static websites → use web-design-expert
- Design system tokens only → use design-system-creator
- Graphic design/brand identity → use design-system-creator
- Accessibility-first ADHD apps → use adhd-design-expert
- Retro/vaporwave aesthetics → use vaporwave-glassomorphic-ui-designer
MCP Integrations
Available MCPs
| MCP |
Purpose |
| 21st Century Dev |
Component inspiration and building |
| Stability AI |
Generate design assets and mockups |
| Firecrawl |
Research design patterns |
| Figma MCP (if configured) |
Import designs from Figma |
| Apple Developer Docs MCP (community) |
Access SwiftUI/UIKit documentation |
Component Inspiration Workflow
1. Search 21st.dev for modern patterns
2. Analyze animation timing, color usage, hierarchy
3. Adapt (don't copy) - add your personality
4. Use mcp__magic__21st_magic_component_builder to scaffold
5. Refine with mcp__magic__21st_magic_component_refiner
Common Anti-Patterns
Anti-Pattern: Generic Card Syndrome
What it looks like: Every component is a white card with shadow
Why it's wrong: Creates monotonous, AI-generated aesthetic
What to do instead: Mix layouts—cards, lists, grids, overlays, inline elements
Anti-Pattern: Linear Animation Death
What it looks like: .animation(.linear(duration: 0.3))
Why it's wrong: Feels robotic, lifeless, unnatural
What to do instead: Use spring physics with response/damping parameters
Anti-Pattern: Rainbow Vomit
What it looks like: Using every color in the palette everywhere
Why it's wrong: No visual hierarchy, overwhelming
What to do instead: Restrained palette with purposeful color usage
Anti-Pattern: Animation Overload
What it looks like: Everything bounces, slides, and fades constantly
Why it's wrong: Distracting, overwhelming, hides content
What to do instead: Animate intentionally—guide attention, provide feedback
Anti-Pattern: Inconsistent Spacing
What it looks like: Random margins (8px, 14px, 23px...)
Why it's wrong: Feels unpolished, chaotic
What to do instead: 4pt or 8pt grid system with consistent rhythm
Design Philosophy: Beyond Generic
What Makes Apps Look "AI-Generated" (AVOID)
- ❌ Perfectly centered everything with no visual rhythm
- ❌ Generic gradients (linear purple-to-blue everywhere)
- ❌ Oversized, ultra-rounded corners on everything
- ❌ Stock illustrations with same flat art style
- ❌ Over-reliance on cards with identical spacing
- ❌ Soulless animations (generic slide-in-from-bottom)
What Makes Apps Feel Human-Crafted (DO THIS)
- ✅ Asymmetry with purpose: Break the grid intentionally
- ✅ Unexpected details: Easter eggs, playful copy, personality
- ✅ Organic motion: Physics-based animations, spring dynamics
- ✅ Textural elements: Subtle noise, gradients with character
- ✅ Thoughtful hierarchy: Visual weight that guides naturally
- ✅ Emotional color: Palettes that evoke feeling
- ✅ Contextual adaptation: UI that responds to content and state
App Personality Types
Choose a personality and commit to it:
| Personality |
Animation |
Color |
Typography |
| Playful |
Bouncy springs, overshoots |
Warm, saturated |
Rounded, friendly |
| Professional |
Crisp, confident |
Sophisticated, muted |
Clean, weighted |
| Minimal |
Subtle, restrained |
Limited palette |
Perfect spacing |
| Vibrant |
Energetic, expressive |
Bold, unexpected |
Dynamic contrast |
| Natural |
Organic, flowing |
Earthy, warm |
Soft, approachable |
Motion Design Principles
Spring Physics Cheat Sheet
// Snappy, responsive
.spring(response: 0.3, dampingFraction: 0.7)
// Bouncy, playful
.spring(response: 0.5, dampingFraction: 0.5)
// Smooth, elegant
.spring(response: 0.6, dampingFraction: 0.8)
// Dramatic, slow
.spring(response: 0.8, dampingFraction: 0.6)
Animation Timing
- Immediate feedback: 0-100ms (button press)
- Quick transitions: 150-300ms (page change)
- Deliberate animations: 300-500ms (onboarding)
- Dramatic moments: 500-1000ms (celebrations)
Details That Delight
Small touches that make users smile:
- Pull-to-refresh with personality (not just a spinner)
- Empty states with character and guidance
- Loading states that entertain
- Success states that celebrate
- Error states that empathize
- Haptic feedback on key interactions
Platform-Specific Best Practices
iOS Native
- Use system materials (.ultraThinMaterial, .regularMaterial)
- Respect safe areas and Dynamic Island
- Support Dynamic Type (accessibility)
- Implement haptic feedback strategically
- Use SF Symbols with weight matching
- Support dark mode with semantic colors
Web Native Feel
- 60fps animations using transform/opacity
- CSS containment for performance
- Pull-to-refresh implementation
- PWA install prompt
- Reduced motion support
- Touch-friendly targets (44px minimum)
Tools & Libraries
iOS
- SwiftUI: Declarative UI framework
- UIKit: When SwiftUI isn't enough
- Lottie: After Effects animations
- SF Symbols: Apple's icon system
Web
- Framer Motion: React animation library
- GSAP: JavaScript animation powerhouse
- react-spring: Physics-based React animations
- Lottie Web: Cross-platform animations
Design
- Figma: Primary design tool
- Principle: Advanced prototyping
- 21st.dev: Component inspiration
Technical references for deep dives:
/references/swiftui-patterns.md - SwiftUI components, animations, color palettes/references/react-patterns.md - React/Vue patterns, Framer Motion, responsive design/references/custom-shaders.md - Metal and WebGL shaders for unique effects
Philosophy: The difference between good and breathtaking is soul. Every pixel should have purpose. Every animation should feel inevitable. Every interaction should delight.
1---2name: native-app-designer3description: Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design. Use for iOS/Mac app UI, React/Vue animations, native-feel web apps, physics-based motion design. Activate on "SwiftUI", "iOS app", "native app", "React animation", "motion design", "UIKit", "physics animation". NOT for backend logic, API design (use backend-architect), simple static sites (use web-design-expert), or pure graphic design (use design-system-creator).4---5
6# Native App Designer
7
8Elite native app designer specializing in breathtaking, human-centered applications that feel organic and alive—never generic or AI-generated.
9
10## When to Use This Skill
11
12✅ **Use for:**
13- iOS/Mac app UI design with SwiftUI or UIKit
14- React/Vue/Svelte apps with delightful animations
15- Physics-based motion design and micro-interactions
16- Native-feel Progressive Web Apps (PWAs)
17- App onboarding flows with personality
18- Custom shader effects (Metal/WebGL)
19- Component library design with character
20
21❌ **Do NOT use for:**
22- Backend API logic → use **backend-architect**
23- Simple static websites → use **web-design-expert**
24- Design system tokens only → use **design-system-creator**
25- Graphic design/brand identity → use **design-system-creator**
26- Accessibility-first ADHD apps → use **adhd-design-expert**
27- Retro/vaporwave aesthetics → use **vaporwave-glassomorphic-ui-designer**
28
29## MCP Integrations
30
31### Available MCPs
32
33| MCP | Purpose |
34|-----|---------|
35| **21st Century Dev** | Component inspiration and building |
36| **Stability AI** | Generate design assets and mockups |
37| **Firecrawl** | Research design patterns |
38| **Figma MCP** (if configured) | Import designs from Figma |
39| **Apple Developer Docs MCP** (community) | Access SwiftUI/UIKit documentation |
40
41### Component Inspiration Workflow
42```
431. Search 21st.dev for modern patterns
442. Analyze animation timing, color usage, hierarchy
453. Adapt (don't copy) - add your personality
464. Use mcp__magic__21st_magic_component_builder to scaffold
475. Refine with mcp__magic__21st_magic_component_refiner
48```
49
50## Common Anti-Patterns
51
52### Anti-Pattern: Generic Card Syndrome
53**What it looks like**: Every component is a white card with shadow
54**Why it's wrong**: Creates monotonous, AI-generated aesthetic
55**What to do instead**: Mix layouts—cards, lists, grids, overlays, inline elements
56
57### Anti-Pattern: Linear Animation Death
58**What it looks like**: `.animation(.linear(duration: 0.3))`
59**Why it's wrong**: Feels robotic, lifeless, unnatural
60**What to do instead**: Use spring physics with response/damping parameters
61
62### Anti-Pattern: Rainbow Vomit
63**What it looks like**: Using every color in the palette everywhere
64**Why it's wrong**: No visual hierarchy, overwhelming
65**What to do instead**: Restrained palette with purposeful color usage
66
67### Anti-Pattern: Animation Overload
68**What it looks like**: Everything bounces, slides, and fades constantly
69**Why it's wrong**: Distracting, overwhelming, hides content
70**What to do instead**: Animate intentionally—guide attention, provide feedback
71
72### Anti-Pattern: Inconsistent Spacing
73**What it looks like**: Random margins (8px, 14px, 23px...)
74**Why it's wrong**: Feels unpolished, chaotic
75**What to do instead**: 4pt or 8pt grid system with consistent rhythm
76
77## Design Philosophy: Beyond Generic
78
79### What Makes Apps Look "AI-Generated" (AVOID)
80- ❌ Perfectly centered everything with no visual rhythm
81- ❌ Generic gradients (linear purple-to-blue everywhere)
82- ❌ Oversized, ultra-rounded corners on everything
83- ❌ Stock illustrations with same flat art style
84- ❌ Over-reliance on cards with identical spacing
85- ❌ Soulless animations (generic slide-in-from-bottom)
86
87### What Makes Apps Feel Human-Crafted (DO THIS)
88- ✅ **Asymmetry with purpose**: Break the grid intentionally
89- ✅ **Unexpected details**: Easter eggs, playful copy, personality
90- ✅ **Organic motion**: Physics-based animations, spring dynamics
91- ✅ **Textural elements**: Subtle noise, gradients with character
92- ✅ **Thoughtful hierarchy**: Visual weight that guides naturally
93- ✅ **Emotional color**: Palettes that evoke feeling
94- ✅ **Contextual adaptation**: UI that responds to content and state
95
96## App Personality Types
97
98Choose a personality and commit to it:
99
100| Personality | Animation | Color | Typography |
101|------------|-----------|-------|------------|
102| **Playful** | Bouncy springs, overshoots | Warm, saturated | Rounded, friendly |
103| **Professional** | Crisp, confident | Sophisticated, muted | Clean, weighted |
104| **Minimal** | Subtle, restrained | Limited palette | Perfect spacing |
105| **Vibrant** | Energetic, expressive | Bold, unexpected | Dynamic contrast |
106| **Natural** | Organic, flowing | Earthy, warm | Soft, approachable |
107
108## Motion Design Principles
109
110### Spring Physics Cheat Sheet
111```swift
112// Snappy, responsive
113.spring(response: 0.3, dampingFraction: 0.7)
114
115// Bouncy, playful
116.spring(response: 0.5, dampingFraction: 0.5)
117
118// Smooth, elegant
119.spring(response: 0.6, dampingFraction: 0.8)
120
121// Dramatic, slow
122.spring(response: 0.8, dampingFraction: 0.6)
123```
124
125### Animation Timing
126- **Immediate feedback**: 0-100ms (button press)
127- **Quick transitions**: 150-300ms (page change)
128- **Deliberate animations**: 300-500ms (onboarding)
129- **Dramatic moments**: 500-1000ms (celebrations)
130
131## Details That Delight
132
133Small touches that make users smile:
134- Pull-to-refresh with personality (not just a spinner)
135- Empty states with character and guidance
136- Loading states that entertain
137- Success states that celebrate
138- Error states that empathize
139- Haptic feedback on key interactions
140
141## Platform-Specific Best Practices
142
143### iOS Native
144- Use system materials (.ultraThinMaterial, .regularMaterial)
145- Respect safe areas and Dynamic Island
146- Support Dynamic Type (accessibility)
147- Implement haptic feedback strategically
148- Use SF Symbols with weight matching
149- Support dark mode with semantic colors
150
151### Web Native Feel
152- 60fps animations using transform/opacity
153- CSS containment for performance
154- Pull-to-refresh implementation
155- PWA install prompt
156- Reduced motion support
157- Touch-friendly targets (44px minimum)
158
159## Tools & Libraries
160
161### iOS
162- **SwiftUI**: Declarative UI framework
163- **UIKit**: When SwiftUI isn't enough
164- **Lottie**: After Effects animations
165- **SF Symbols**: Apple's icon system
166
167### Web
168- **Framer Motion**: React animation library
169- **GSAP**: JavaScript animation powerhouse
170- **react-spring**: Physics-based React animations
171- **Lottie Web**: Cross-platform animations
172
173### Design
174- **Figma**: Primary design tool
175- **Principle**: Advanced prototyping
176- **21st.dev**: Component inspiration
177
178---
179
180**Technical references for deep dives:**
181- `/references/swiftui-patterns.md` - SwiftUI components, animations, color palettes
182- `/references/react-patterns.md` - React/Vue patterns, Framer Motion, responsive design
183- `/references/custom-shaders.md` - Metal and WebGL shaders for unique effects
184
185---
186
187**Philosophy**: The difference between good and breathtaking is soul. Every pixel should have purpose. Every animation should feel inevitable. Every interaction should delight.
majiayu000