| license | Apache-2.0 |
| name | native-app-designer |
| description | 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). |
| allowed-tools | Read,Write,Edit,Bash,mcp__magic__21st_magic_component_builder,mcp__magic__21st_magic_component_refiner,mcp__stability-ai__stability-ai-generate-image,mcp__firecrawl__firecrawl_search |
| category | Design & Creative |
| tags | ["ios","swiftui","react","animations","motion"] |
| pairs-with | [{"skill":"metal-shader-expert","reason":"GPU-accelerated visual effects"},{"skill":"vaporwave-glassomorphic-ui-designer","reason":"Aesthetic iOS design"}] |
Native App Designer
Elite native app designer specializing in breathtaking, human-centered applications that feel organic and alive—never generic or AI-generated.
Decision Points
Content Type → Animation Timing Decision Tree
User Action Type:
├── Immediate Feedback (button press, tap)
│ ├── Success: 0.1s spring (response: 0.3, damping: 0.7)
│ └── Error: 0.15s + haptic feedback
├── Content Transition (page change, modal)
│ ├── Forward navigation: 0.25s slide-right
│ ├── Back navigation: 0.2s slide-left (faster return)
│ └── Modal present/dismiss: 0.3s scale + fade
├── Data Loading States
│ ├── <2s expected: Skeleton animation
│ ├── 2-5s expected: Progress indicator + entertainment
│ └── >5s expected: Cancellable with progress details
└── Celebration/Success
├── Minor success: 0.4s gentle bounce
├── Major success: 0.8s confetti + sound
└── Achievement: 1.2s dramatic scale + particle effects
User Mood → Visual Personality Selection
IF user context = "work/productivity"
→ Use Professional personality (crisp, confident, muted colors)
ELSE IF user context = "entertainment/social"
→ Use Playful personality (bouncy springs, warm colors)
ELSE IF user context = "wellness/meditation"
→ Use Natural personality (organic motion, earthy colors)
ELSE IF user context = "finance/serious"
→ Use Minimal personality (subtle motion, limited palette)
ELSE
→ Default to Vibrant personality (energetic, bold colors)
Platform Constraints → Implementation Strategy
Target Platform:
├── iOS Native
│ ├── Use SwiftUI for iOS 14+ → spring animations, SF Symbols
│ ├── Use UIKit for iOS 13- → Core Animation, manual spring curves
│ └── Add haptic feedback for all key interactions
├── Web Progressive
│ ├── Use Framer Motion for React → physics-based animations
│ ├── Use GSAP for vanilla JS → 60fps performance
│ └── Implement reduced motion support
└── Cross-platform
├── Use Lottie for complex animations → After Effects export
├── Focus on transform/opacity → hardware acceleration
└── Fallback to CSS transitions for low-end devices
Failure Modes
"Generic Card Syndrome"
Detection: If every component is a white/gray card with identical shadows and spacing
Symptoms: UI feels monotonous, looks AI-generated, lacks visual hierarchy
Fix: Mix component types (cards, lists, overlays, inline elements), vary corner radius (8px-24px), use purposeful asymmetry
"Linear Animation Death"
Detection: If animations use .linear() or constant easing everywhere
Symptoms: Interactions feel robotic, unnatural, lifeless
Fix: Replace with spring physics: .spring(response: 0.3-0.8, dampingFraction: 0.5-0.8), match animation personality to app context
