SuperAPI AI 工具集

macos-design

设计与创作

查看项目

更新于 10-16 08:03

技能介绍

用途:帮助设计并构建“像原生 macOS 应用”的桌面界面,而非把网页塞进窗口。核心原则是把应用视为系统工具:需要时出现,不需要时立即让位。

主要能力与用法:编码前按需阅读参考文档——所有 macOS 应用必读 references/layout-and-composition.md;涉及快捷键、面板、toast、popover 时读 references/interaction-patterns.md;涉及明暗模式、色彩、字体时读 references/visual-design.md。

快速检查清单(写代码前的预检):顶栏放全局操作,侧边栏用于导航(导航简单可省略),中间为内容区;红绿灯按钮融入顶栏或侧边栏,不要突兀悬浮;顶部约 50px 为可拖拽窗口区域且保持整洁;展示空状态,采用渐进式披露;每个主操作都要有快捷键,每个快捷键都要有视觉反馈;同时设计浅色与深色模式,不要直接反色;搜索始终显著可达,可考虑浮动搜索栏或命令面板;支持内容拖入与拖出应用;每次状态变化都有微动画;引导应简短、基于模态,并通过操作而非阅读来教快捷键。

实现说明:以 Web(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 而非 polyfill。

限制:资料未提供收费、价格、平台兼容范围、具体效果数据;未提供完整代码示例或安装命令;实际落地需结合项目框架自行判断。