What specific Apple design elements does it support?

It covers traffic light window controls, sidebar layouts, system font stacks, backdrop-blur vibrancy, and specific border radius standards used by Apple.

Does this skill only work for native macOS apps?

No, it provides styling and interaction patterns for web-based artifacts (React/HTML), Electron, Tauri, and native frameworks to simulate the macOS look and feel.

Can it handle dark mode?

Yes, the skill provides specific guidance on implementing light and dark modes that follow Apple's visual design system rather than simple color inversion.

Does it include interaction patterns like shortcuts?

Yes, it prioritizes keyboard shortcuts, drag-and-drop functionality, and micro-animations to ensure the app feels like a system tool rather than a standard website.

macOS Native UI Design

Name: macOS Native UI Design
Author: davepoon

bydavepoon

•

2,624

•

设计工具

Builds authentic, native-feeling macOS application interfaces using Apple's design patterns and interaction principles.

The macOS Native UI Design skill empowers Claude to architect and implement desktop applications that adhere strictly to Apple’s Human Interface Guidelines. It provides comprehensive guidance on layout composition, including sidebar navigation and 'traffic light' window controls, while ensuring high-fidelity visual details like system font stacks and vibrancy effects. By integrating this skill, developers can create web-based or native desktop tools that feel like first-party system utilities through the implementation of keyboard shortcuts, drag-and-drop functionality, and refined micro-animations.

主要功能

01Comprehensive interaction patterns including keyboard shortcuts and drag-and-drop.

02Native light and dark mode support following system-specific color palettes.

03Native-style layout architecture featuring sidebars and integrated window controls.

04Visual styling for translucency, vibrancy effects, and layered system shadows.

05Apple system font stacks and high-fidelity typography implementation.

062,624 GitHub stars

使用场景

01Creating productivity dashboards with sidebar-based navigation and traffic light controls.

02Prototyping Electron or Tauri applications that require a 'built-by-Apple' user experience.

03Developing a system utility or menu bar app that matches the macOS aesthetic.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add davepoon/buildwithclaude macos-design

For use in Claude.ai and ChatGPT

Download Skill