macOS Native App Design Skill
Build interfaces that feel like they belong on the user's computer — not websites crammed into a window.
Core Philosophy
A native app is not a destination. It is a system tool that lives where the user needs it. Design every interaction around this principle: appear when needed, get out of the way immediately after.
Before You Code
Read these references based on what you're building:
- All macOS apps → Read
references/layout-and-composition.md (required)
- Apps with keyboard shortcuts, panels, toasts, popovers → Read
references/interaction-patterns.md
- Light/dark mode, color, typography → Read
references/visual-design.md
Quick-Start Checklist
Use this as a pre-flight before writing any code:
- Layout: Top bar for global actions, sidebar for navigation (skip if nav is minimal), center for content
- Traffic lights: Integrate into the UI — top bar or sidebar, never floating awkwardly
- Window drag zone: Top ~50px must be draggable, keep it uncluttered
- Empty states: Show them. Progressive disclosure — only reveal UI when it's useful
- Keyboard shortcuts: Every primary action needs one. Every shortcut needs visual feedback
- Light + Dark mode: Design both. Do NOT directly invert colors (see visual-design reference)
- Search: Always prominent and accessible. Consider floating search bar or command palette
- Drag and drop: Content in AND out of the app. This is non-negotiable for native feel
- Micro-animations: Every state change gets a transition. No interaction without feedback
- Onboarding: Brief, modal-based, teaches shortcuts through doing (not reading)
Implementation Notes
When building as a web artifact (React/HTML):
- Simulate the macOS window chrome (title bar, traffic light dots, rounded corners)
- Use
-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text" font stack
- Use
backdrop-filter: blur() for native vibrancy/translucency effects
- Rounded corners: 10px for windows, 8px for cards, 6px for buttons, 4px for inputs
- Respect
prefers-color-scheme media query for automatic light/dark switching
- Shadows should be subtle and layered, not a single heavy drop shadow
When building with Electron, Tauri, or native frameworks:
- Use system title bar integration where possible
- Respect system accent color and appearance settings
- Use native drag-and-drop APIs, not polyfills
1---2name: macos-design3description: Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.4---5
6# macOS Native App Design Skill
7
8Build interfaces that feel like they belong on the user's computer — not websites crammed into a window.
9
10## Core Philosophy
11
12A native app is not a destination. It is a **system tool** that lives where the user needs it. Design every interaction around this principle: appear when needed, get out of the way immediately after.
13
14## Before You Code
15
16Read these references based on what you're building:
17
18- **All macOS apps** → Read `references/layout-and-composition.md` (required)
19- **Apps with keyboard shortcuts, panels, toasts, popovers** → Read `references/interaction-patterns.md`
20- **Light/dark mode, color, typography** → Read `references/visual-design.md`
21
22## Quick-Start Checklist
23
24Use this as a pre-flight before writing any code:
25
261. **Layout**: Top bar for global actions, sidebar for navigation (skip if nav is minimal), center for content
272. **Traffic lights**: Integrate into the UI — top bar or sidebar, never floating awkwardly
283. **Window drag zone**: Top ~50px must be draggable, keep it uncluttered
294. **Empty states**: Show them. Progressive disclosure — only reveal UI when it's useful
305. **Keyboard shortcuts**: Every primary action needs one. Every shortcut needs visual feedback
316. **Light + Dark mode**: Design both. Do NOT directly invert colors (see visual-design reference)
327. **Search**: Always prominent and accessible. Consider floating search bar or command palette
338. **Drag and drop**: Content in AND out of the app. This is non-negotiable for native feel
349. **Micro-animations**: Every state change gets a transition. No interaction without feedback
3510. **Onboarding**: Brief, modal-based, teaches shortcuts through doing (not reading)
36
37## Implementation Notes
38
39When building as a web artifact (React/HTML):
40- Simulate the macOS window chrome (title bar, traffic light dots, rounded corners)
41- Use `-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text"` font stack
42- Use `backdrop-filter: blur()` for native vibrancy/translucency effects
43- Rounded corners: 10px for windows, 8px for cards, 6px for buttons, 4px for inputs
44- Respect `prefers-color-scheme` media query for automatic light/dark switching
45- Shadows should be subtle and layered, not a single heavy drop shadow
46
47When building with Electron, Tauri, or native frameworks:
48- Use system title bar integration where possible
49- Respect system accent color and appearance settings
50- Use native drag-and-drop APIs, not polyfills
majiayu000