What is considered a native-feeling macOS UI?

A UI that follows macOS conventions: system chrome (traffic lights, title bar), a top action bar, a left navigation sidebar, draggable window regions, macOS typography, and native-like interactions.

What should I read before coding?

References/layout-and-composition.md, references/interaction-patterns.md, and references/visual-design.md, plus the quick-start notes on the macOS app philosophy.

Where does this skill apply?

Desktop/macOS apps, Apple-style UIs, system utilities, or any project that should feel native to macOS and belong in the Apple ecosystem.

macos-design

npx machina-cli add skill davepoon/buildwithclaude/macos-design --openclaw

Files (1)

SKILL.md

3.1 KB

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

Source

git clone https://github.com/davepoon/buildwithclaude/blob/main/plugins/all-skills/skills/macos-design/SKILL.mdView on GitHub

Overview

Design and build macOS-style interfaces that feel like native system tools. Emphasize layout (top action bar, left sidebar, centered content), traffic lights, drag zones, typography, and smooth light/dark mode to create an authentic Apple-like experience.

How This Skill Works

Adopt the core philosophy that a native app is a system tool. Implement a shell with a top bar, sidebar navigation, and a central content area, integrating traffic lights and a draggable window zone. For web artifacts, simulate macOS window chrome and vibrancy using the designated font stack and CSS effects; for Electron, Tauri, or native frameworks, rely on real system chrome and native APIs while following the same layout and interaction references.

When to Use It

Building a desktop/macOS app with a native look and feel
Creating a system utility or tool that belongs on macOS
Designing with macOS chrome: traffic lights, top bar, and sidebar
Implementing light/dark mode and macOS typography
Creating keyboard-friendly interfaces with search/command palette and drag-and-drop

Quick Start

Step 1: Read layout/composition, interaction patterns, and visual design references from the provided macOS guidelines
Step 2: Sketch the shell (title bar with traffic lights, top bar, sidebar, and content area) and choose typography (system font stack) and corner radii
Step 3: Implement chrome simulation for web artifacts or use native APIs in Electron/Native apps; add keyboard shortcuts, drag-and-drop, and light/dark mode with smooth micro-animations

Best Practices

Structure the UI with a top bar for global actions, a left sidebar for navigation, and a centered content area
Integrate macOS traffic lights into the window chrome rather than floating elements
Reserve a draggable window zone (~50px from the top) and keep it uncluttered
Provide keyboard shortcuts for primary actions with clear visual feedback
Design for both light and dark modes using the proper macOS typography and subtle micro-animations

Example Use Cases

A note-taking app with a collapsible sidebar, global actions in a top bar, and keyboard shortcuts
A file-sync utility that uses native window chrome and drag-and-drop for files
A system monitor tool with panels, command palette, and macOS-like UI patterns
A task manager featuring a left navigation rail, drag-and-drop reordering, and light/dark themes
A media conversion tool that supports drag-and-drop, progress indicators, and native-like controls

Frequently Asked Questions

Add this skill to your agents