用途:该技能用于设计和构建具有原生感的 macOS 应用 UI,适合用户提出创建桌面应用、macOS 应用或 Mac 风格界面的场景。
核心思路:原生应用不是目的地,而是系统工具。交互应遵循“需要时出现,用完立即让路”的原则。
编码前参考:所有 macOS 应用需阅读 references/layout-and-composition.md;涉及快捷键、面板、toast、popover 时阅读 references/interaction-patterns.md;涉及明暗模式、颜色、排版时阅读 references/visual-design.md。
快速检查清单:顶部栏放全局操作,侧边栏做导航(导航极少时可省略),中间放内容;红绿灯按钮要融入顶部栏或侧边栏;顶部约 50px 需可拖拽且保持整洁;展示空状态并渐进披露;每个主要操作都要有快捷键和视觉反馈;同时设计明暗两套模式,不要直接反转颜色;搜索需始终显眼,可考虑浮动搜索栏或命令面板;支持内容拖入拖出;每个状态变化都要有微动画;新手引导应简短、模态化,并通过操作而非阅读来教快捷键。
实现说明:以 Web artifact(React/HTML)构建时,模拟 macOS 窗口装饰(标题栏、红绿灯圆点、圆角);使用 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text" 字体栈;用 backdrop-filter: blur() 实现原生通透感;窗口圆角 10px、卡片 8px、按钮 6px、输入框 4px;用 prefers-color-scheme 媒体查询自动切换明暗;阴影应细微分层。以 Electron、Tauri 或原生框架构建时,尽量使用系统标题栏集成,遵循系统强调色与外观设置,使用原生拖放 API。
限制:资料未提供具体价格、收费、平台支持范围或效果保证,暂未提供。