Macos Product Design

macOS 产品设计专家

根据用户的需求描述，输出可直接在浏览器中预览的 HTML/CSS 设计稿，风格对齐 macOS 原生应用。

---

触发条件

用户说"帮我设计"、"做个界面"、"画个页面"、"产品设计"、"UI设计"等。

执行流程

阶段 1：理解需求

和用户确认：

• 设计什么页面/功能？（仪表盘、设置页、列表页、详情页……）
• 有哪些核心元素？（导航、表格、表单、卡片……）
• 有没有参考？（现有产品截图、竞品截图、文字描述）

阶段 2：Sub-agent 输出设计稿

启动 sub-agent，读取设计系统 reference 文件，输出完整的 HTML 文件。

Sub-agent prompt 模板：

你是一个 macOS 产品设计专家。请根据用户需求，输出一个完整的 HTML 文件（内联 CSS），可直接在浏览器中打开预览。

## 第一步：读取设计系统（必须执行）

用 Read 工具读取以下文件，这是你的设计系统规范：
[绝对路径]/.claude/skills/macos-product-design/reference/macos-design-system.md

严格按照该文件中的设计变量、组件模板、做与不做来输出代码。不可使用文件中未定义的颜色、字号、间距值。

## 用户需求

[用户的需求描述]

## 输出要求
1. 输出一个完整的 HTML 文件，包含内联 <style> 标签
2. 必须包含设计系统中的 CSS 变量定义和全局基础样式
3. 使用设计系统中的组件模板，不要自创样式
4. 默认暗色主题
5. 所有交互元素必须有 hover 状态
6. 用语义化的 class 名
7. 写好注释标注各区域
8. 用 Write 工具写入指定文件路径

阶段 3：预览与迭代

Sub-agent 写完文件后： 1. 告诉用户文件路径，让用户在浏览器中打开预览 2. 用户提出修改意见 3. 直接在主对话中迭代修改（不再启动 sub-agent）

---

设计系统 Reference

后续可扩展：

• reference/page-patterns.md — 常见页面布局模式（仪表盘、设置页、列表页等）
• reference/animation-patterns.md — 动画/过渡模式
• reference/icon-system.md — 图标使用规范

---

输出文件规则

设计稿写入项目根目录下 design/ 文件夹：

design/
  [功能名]-v1.html
  [功能名]-v2.html
  ...

macOS 产品设计系统（基于 Apple HIG + 顶级应用调研）

来源：Apple Human Interface Guidelines、WWDC 演讲、Evil Martians 设计文章、Raycast/Linear/Arc Browser 设计分析、ceorkm/macos-design-skill

用途：供 AI agent 读取后，按 macOS 原生标准输出高质量的前端设计稿（HTML/CSS）

提取日期：2026-04-07

---

一、设计理念

Apple 对 macOS 的定位

"People rely on the power, spaciousness, and flexibility of a Mac as they perform in-depth productivity tasks, view media or content, and play games, often using several apps at once."

— Apple HIG: Designing for macOS

macOS 设计的三个关键词：power（强大）、spaciousness（宽敞）、flexibility（灵活）。与 iOS 的"直接、简洁"完全不同。

HIG 三大核心原则

• Clarity（清晰）：界面清晰可读、精确、易于理解
• Deference（谦逊）：UI 帮助用户聚焦内容和任务，最小化不必要的视觉杂乱
• Depth（深度）：视觉层次和逼真的动效传达层级关系

顶级 macOS 应用的设计哲学

Raycast — "fast, simple, and delightful"

完全原生 macOS 应用，扩展用 React 声明但渲染为原生 UI。

— Raycast Blog

Linear — "A calmer interface for a product in motion"

"Don't compete for attention you haven't earned."

"Structure should be felt not seen."

— Linear Design Refresh

Arc Browser：

"Arc was initially designed as a browser for macOS, so the creative team behind Arc sought to create a UI that perfectly aligns with the Apple environment, and they succeeded brilliantly."

— Medium, Arc Browser Design Analysis

为什么原生感重要

"Apps with native design appear more credible, seem more thoroughly considered, feel more stable in performance."

— Evil Martians

原生设计不只是美观问题，它直接影响用户对应用可信度、完成度和性能的感知。

---

二、排版系统

字体

• 系统字体：SF Pro（San Francisco）
• SF Pro Display：20pt 及以上自动切换
• SF Pro Text：19pt 及以下自动切换
• 等宽字体：SF Mono
• 来源：Apple HIG Typography、Apple Fonts

CSS Font Stack：

font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
font-family: "SF Mono", "Menlo", "Monaco", monospace; /* 等宽 */

字号体系

关键事实：macOS 的 Body 字号是 13px，不是 Web 的 16px。这是区分桌面应用和网页最显著的特征。

来源：Apple HIG Typography、NSFont gist (shaps80)

---

三、颜色系统

系统色

来源：GitHub gist (andrejilderda)

语义色

Light Mode：

• labelColor: rgba(0, 0, 0, 0.847)
• secondaryLabelColor: rgba(0, 0, 0, 0.498)
• tertiaryLabelColor: rgba(0, 0, 0, 0.259)
• placeholderTextColor: rgba(0, 0, 0, 0.247)
• separatorColor: rgba(0, 0, 0, 0.098)
• windowBackgroundColor: #ECECEC

Dark Mode：

• labelColor: rgba(255, 255, 255, 0.847)
• textBackgroundColor: rgb(30, 30, 30)
• windowBackgroundColor: #323232
• linkColor: rgb(65, 156, 255)

关键原则：Dark Mode 不是简单反色。

"Do NOT directly invert colors between modes." Dark mode requires greater color differentiation.

Apple 在 Dark Mode 中不使用纯黑 #000000，而是深灰 #1C1C1E。

CSS 变量方案

Light Mode：

--bg-primary: #FFFFFF
--bg-secondary: #F5F5F7
--bg-tertiary: #E8E8ED
--text-primary: #1D1D1F
--text-secondary: #6E6E73
--text-tertiary: #AEAEB2
--border: rgba(0, 0, 0, 0.08)
--border-strong: rgba(0, 0, 0, 0.15)
--accent: #007AFF
--surface-hover: rgba(0, 0, 0, 0.04)
--surface-active: rgba(0, 0, 0, 0.08)

Dark Mode：

--bg-primary: #1C1C1E
--bg-secondary: #2C2C2E
--bg-tertiary: #3A3A3C
--text-primary: #F5F5F7
--text-secondary: #98989D
--text-tertiary: #636366
--border: rgba(255, 255, 255, 0.08)
--border-strong: rgba(255, 255, 255, 0.15)
--accent: #0A84FF
--surface-hover: rgba(255, 255, 255, 0.06)
--surface-active: rgba(255, 255, 255, 0.1)

来源：ceorkm/macos-design-skill

---

四、间距系统

macOS 使用 8px 基础网格。

来源：ceorkm/macos-design-skill、Apple HIG Controls

---

五、组件尺寸规范

交互元素高度

来源：ceorkm/macos-design-skill、Apple HIG Controls

圆角半径

来源：ceorkm/macos-design-skill

Traffic Lights（窗口控制按钮）

• 直径：12px 圆形
• 间距：左上角 8px，按钮之间 8px
• 颜色：红 #FF5F57、黄 #FEBC2E、绿 #28C840
• Hover：显示 ×、−、+ 图标
• 非活跃窗口：全部变灰 #CDCDCD

来源：Apple HIG

侧边栏

• 宽度范围：200-260px
• 推荐最小宽度：225pt
• 推荐最大宽度：350-400pt
• 背景：使用 vibrancy/blur
• 可折叠，快捷键 Cmd+Ctrl+S
• 最大嵌套层级：2 级

来源：Sidebar Guidelines (Mario Aguzman)

---

六、阴影系统

macOS 的标志性视觉：0.5px border-shadow + 分层阴影。

"The 0 0 0 0.5px border-shadow is essential. It gives subtle definition to edges without using a visible border. This is THE macOS look."

— ceorkm/macos-design-skill

精妙阴影（卡片、按钮）：

box-shadow: 0 0 0 0.5px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);

中等阴影（下拉菜单、弹出框）：

box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.1);

重阴影（浮动窗口、模态框）：

box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.08),
            0 8px 30px rgba(0,0,0,0.14), 0 24px 60px rgba(0,0,0,0.08);

Dark Mode 阴影透明度约 2 倍增加。

---

七、Vibrancy（毛玻璃效果）

该用 blur 的地方

• 侧边栏、顶部栏/工具栏
• 浮动面板和弹出框
• Spotlight 风格的快速访问窗口
• Toast 通知

不该用 blur 的地方

• 主内容区域（必须不透明，保证可读性）
• 模态背景（用半透明深色遮罩）

CSS 实现

.sidebar {
  background: rgba(246, 246, 246, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

Always include saturate(180%) to prevent colors from appearing washed out behind blur.

— ceorkm/macos-design-skill

---

八、动画规范

缓动函数：

--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 轻微过冲 */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

时长：

• Fast（hover、小变化）：150ms
• Normal（面板、展开）：250ms
• Slow（页面级过渡）：400ms

来源：ceorkm/macos-design-skill

---

九、做与不做（来自调研的硬规则）

光标——最容易暴露"不原生"的细节

*, a, button { cursor: default; user-select: none; }

• 原生应用所有可点击元素用 default cursor（箭头），不是 pointer（手型）
• pointer cursor 仅用于跳出应用的外部链接
• 非内容文本默认不可选

来源：Evil Martians

Hover 状态——跟 Web 规则相反

• 有样式的按钮（styled buttons）：不响应 hover
• 幽灵按钮（plain text / icon button）：响应 hover
• 菜单项和表格行：无 hover 效果
• 下拉菜单项：有 hover 高亮（键盘导航需要）

来源：Evil Martians

字号——杀手级差异

html { font-size: 13px; }  /* 不是 Web 的 16px */

来源：Apple HIG Typography

边框——macOS 不用厚边框

macOS 使用极细（0.5px）、低透明度的 border-shadow，不是 1px solid border。

失焦状态

窗口失去焦点时，accent color 替换为灰色变体。这是原生应用的标志行为。

来源：Making Electron apps feel native (DEV Community)

窗口行为

• 先隐藏后显示（避免白屏闪烁）
• 记住窗口位置和尺寸
• Dark Mode 下设置 backgroundColor 防止 resize 闪烁
• 自定义标题栏空白区域可拖拽（-webkit-app-region: drag）

必须有键盘快捷键

• Cmd+, 打开偏好设置
• Cmd+K 命令面板
• Cmd+Z / Cmd+Shift+Z 撤销/重做
• 每个菜单操作都应有快捷键

"视觉恐怖谷"

"Users can instantly tell when something isn't native without necessarily understanding why."

— Evil Martians

功能正常但缺少平台细节时，用户会本能感到"不对劲"。具体暴露点： 1. pointer cursor 代替 default cursor 2. 16px 基础字号 3. 所有按钮都有 hover 效果 4. 缺少窗口失焦颜色变化 5. 缺少 vibrancy 6. 使用厚边框 7. 使用单一重阴影（应该分层） 8. 缺少键盘快捷键

---

十、图标

遵循 SF Symbols 设计语言：

• 单线描边风格（1.5-2px 描边宽度）
• 简单几何形状
• 默认尺寸 16px，突出操作 20px，内联提示 12px
• 使用 currentColor 继承文本颜色
• 描边轻微圆角

来源：ceorkm/macos-design-skill

---

十一、顶级应用的具体设计决策

Linear 的颜色策略

• 从 HSL 迁移到 LCH 色彩空间，保证感知均匀亮度
• 主题变量从 98 个减到仅 3 个：base color、accent color、contrast
• 侧边栏亮度降低数个档位，让主内容区获得视觉优先级
• 从冷蓝灰转向暖灰
• 限制 chrome 蓝色使用，追求"neutral and timeless appearance"

来源：Linear UI Redesign Part II

Raycast 的设计细节

• Search bar 增大以突出核心地位
• 搜索结果使用更大的前导图标加速视觉扫描
• 底部 Action bar 整合 actions、toasts、navigation
• Toast 移到应用窗口内部
• 图标 outline 风格，加粗描边使其更突出
• 支持 Compact Mode

来源：Raycast Blog

Arc 的差异化

• 主工作区没有任何界面元素——全收进自动隐藏侧边栏
• 地址栏不在顶部
• muted, bright colors + serif 字体组合
• 大量负空间、柔和圆角、细腻动画

来源：LogRocket UX Analysis、Medium Design Analysis

---

来源索引

• Apple HIG
• Apple HIG - Designing for macOS
• Apple HIG - Typography
• Apple Fonts
• WWDC20 - Adopt the new look of macOS
• ceorkm/macos-design-skill (GitHub)
• macOS System Colors (andrejilderda)
• NSFont Helpers (shaps80)
• Sidebar Guidelines (Mario Aguzman)
• Evil Martians - How to make any app look like macOS
• Making Electron feel native (DEV)
• Raycast Blog - A Fresh Look and Feel
• Linear UI Redesign Part II
• Arc Browser UX Analysis (LogRocket)