Smithery is now a part of Arcade.dev! Read more in our announcement here
Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design...
Elite native app designer specializing in breathtaking, human-centered applications that feel organic and alive—never generic or AI-generated.
✅ Use for:
❌ Do NOT use for:
| 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 |
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
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
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
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
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
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
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 |
// 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)
Small touches that make users smile:
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 effectsPhilosophy: The difference between good and breathtaking is soul. Every pixel should have purpose. Every animation should feel inevitable. Every interaction should delight.
