Macos Design Skill

macOS Design Skill

Build native-feeling macOS applications that look like Apple designed them.

 

Overview

This skill provides a **complete design system** for creating native macOS application UIs. It captures years of Apple design knowledge distilled into actionable guidelines, exact values, and production-ready patterns.

Features

• ✅ Complete Layout System - The Apple formula (traffic lights, top bar, sidebar, content)
• ✅ Visual Design - Colors, typography, blur/vibrancy, shadows, icons, spacing
• ✅ Interaction Patterns - Keyboard shortcuts, animations, search, drag-and-drop
• ✅ Light + Dark Mode - Proper differentiation, not naive inversion
• ✅ Production-Ready - Exact CSS values, code snippets, implementation details
• ✅ Cross-Platform - Works for web, Electron, Tauri, native frameworks

Quick Start

For Claude Code

# Install the skill
claude code install macos-design

# Use in your project
/macos-design Create a screenshot organizer app

Manual Usage

Read the reference files based on what you're building:

• All macOS apps → `references/layout-and-composition.md` (required)
• Keyboard shortcuts, panels, search → `references/interaction-patterns.md`
• Colors, typography, blur effects → `references/visual-design.md`

What You'll Build

This skill enables you to create:

• Desktop utilities that feel native to macOS
• Screenshot managers, note-taking apps, asset browsers
• Developer tools, productivity apps, system utilities
• Anything that should integrate seamlessly with the Mac ecosystem

Key Principles

1. **Don't Invert Colors**

Dark mode needs MORE differentiation between background levels, not less. Design each mode independently.