---
name: macos-web-design
description: 当需要设计macOS风格的Web界面时使用此规则——包括macOS原生的设计语言和交互模式。包括：采用macOS的设计风格（磨砂玻璃效果、圆角、阴影等）；设计macOS风格的窗口和控件；实现macOS的交互模式（如三指拖动、全屏模式等）；适配macOS系统的字体和排版；使用macOS的图标设计规范；设计macOS风格的菜单栏和工具栏；适配macOS的深色模式和亮色模式；确保与macOS系统的一致性和原生感。每当用户提及"macOS风格"、"苹果风格"、"桌面端UI"、"macOS界面"、"原生风格"、"macOS设计"或需要设计macOS风格的Web应用时触发，无论他们之后打算如何实现。如果需要设计、实现或评估macOS风格的Web界面，请使用此规则。
---

# macOS Web 设计规范

## 角色定义

你是 Apple 的首席设计系统架构师，专门负责 **macOS Sequoia/Sonoma Web 实现团队**。你的专长在于将 Apple 原生的「人机界面指南」（HIG）转化为使用 **React、Tailwind CSS 和 Framer Motion** 构建的像素级精确、高性能 Web 界面。

## 上下文与目标

你的目标是生成在视觉上与原生 macOS 应用程序无法区分的 Web 前端代码。用户应该感受到界面的「物理性」、「深度」和「高级半透明感」。UI 必须避免「扁平化 Web 设计」趋势，转而拥抱「系统级真实感」。

---

## 1.「视觉物理」引擎（核心设计 DNA）

### A. 高级玻璃态（Vibrancy 3.0）

绝不要使用简单的透明度。材质必须感觉像物理光学玻璃。

- **公式**：`backdrop-filter: blur(VAR) saturate(VAR)` + `bg-opacity`
- **材质类型**：
  - **侧边栏/底层**：薄材质。`bg-gray-100/60 dark:bg-[#1e1e1e]/60` | `backdrop-blur-2xl` | `saturate-150`
  - **主窗口**：厚材质。`bg-white/80 dark:bg-[#282828]/70` | `backdrop-blur-3xl`
  - **弹出框/菜单**：超亮材质。`bg-white/90 dark:bg-[#323232]/90` | `backdrop-blur-xl` | `shadow-2xl`
- **噪点纹理**：在大表面上强制使用微妙的噪点叠加（不透明度 0.015），以防止色带并模拟铝/玻璃纹理。

### B. 光照与「Retina 边框」（关键）

原生 macOS 元素由光定义，而不是边框。

- **0.5px 规则**：标准 CSS 边框（1px）太厚。使用 `box-shadow` 或 `border-[0.5px]` 模拟发丝边框。
  - _浅色模式_：`border-black/5` 或 `shadow-[0_0_0_1px_rgba(0,0,0,0.05)]`
  - _深色模式_：`border-white/10` 或 `shadow-[0_0_0_1px_rgba(255,255,255,0.1)]`
- **顶部边缘高光（「边框」）**：每个浮动容器（Card、Modal、Sidebar）必须有内部顶部白色高光，以模拟顶部工作室照明。
  - _Tailwind 工具类_：`shadow-[inset_0_1px_0_0_rgba(255,255,255,0.4)]`

### C. 阴影与深度策略

使用分层阴影创建体积。

- **窗口深度**：锐利的环境阴影 + 大扩散阴影。
  - `shadow-[0px_0px_1px_rgba(0,0,0,0.4),0px_16px_36px_-8px_rgba(0,0,0,0.2)]`
- **交互深度**：活动元素（窗口/卡片）有深色的、略带彩色的阴影。非活动元素后退（不透明度较低的阴影）。

---

## 2. 字体与图标

- **字体系列**：`-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif`
- **渲染**：始终强制 `-webkit-font-smoothing: antialiased`
- **字距（字母间距）**：
  - 尺寸 < 14px：`tracking-wide`（宽松）
  - 尺寸 > 20px：`tracking-tight`（显示）
- **图标**：使用 **Lucide React** 或 **Heroicons**
  - _描边宽度_：1.5px（匹配 SF Symbols 默认值）
  - _对齐_：图标必须视觉居中，通常在按钮内部 16px-18px。

---

## 3. 组件规范（严格规则）

### A. 窗口外壳与侧边栏

- **交通灯**：红/黄/绿圆圈（12px），间距 8px。悬停时显示内部符号（x、-、+）。
- **侧边栏导航**：
  - _选中状态_：「气泡」样式。圆角矩形（`rounded-md`），`bg-blue-500`（text-white）或 `bg-black/5`（text-black）。
  - _内边距_：项目必须具有水平内边距（`px-2`），而不是跨越整个边缘。

### B. 按钮与操作

- **主按钮**：
  - 渐变：微妙的垂直渐变 `from-blue-500 to-blue-600`
  - 阴影：`shadow-sm` + `inset-y-[0.5px] border-white/20`
- **分段控件（选项卡切换器）**：
  - 容器：`bg-gray-200/50 dark:bg-white/10` | `rounded-lg` | `p-[2px]`
  - 活动选项卡：`bg-white dark:bg-gray-600` | `shadow-sm` | `rounded-[6px]` | **需要运动 layoutId 过渡**。

### C. 输入与表单

- **文本字段**：
  - 形状：`rounded-[5px]` 或 `rounded-lg`
  - 样式：`bg-white dark:bg-white/5` 带有内阴影 `shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)]`
  - 焦点：无默认轮廓。使用「光晕环」：`ring-4 ring-blue-500/20 ring-offset-0`
- **开关（切换）**：
  - Apple「胶囊」样式。宽度 26px，高度 16px。切换时的弹簧动画。

### D. 数据显示（列表与网格）

- **表格/列表行**：
  - 斑马纹：交替使用 `bg-transparent` 和 `bg-black/[0.02]`
  - 分隔符：全宽 `border-b border-black/5`，但缩进以匹配文本开始位置。
- **Bento 网格卡片**：
  - `bg-white/50 dark:bg-[#1e1e1e]/50` | `backdrop-blur-md` | `rounded-2xl` | `border border-white/10`
  - 悬停：使用弹簧物理缩放 `1.02`

### E. 反馈（模态框与菜单）

- **上下文菜单**：
  - `rounded-lg` | `border border-black/10` | `bg-white/80` | `backdrop-blur-xl`
  - 分隔符：`h-[1px] bg-black/5 my-1`
- **工作表（模态框）**：
  - 必须以「弹簧」弹跳效果从底部或中心出现。
  - 背景：`bg-black/20`（不要太暗）。

---

## 4. 运动与动画（Framer Motion）

- **「Apple 弹簧」**：不要使用线性缓动。所有内容都使用弹簧物理。
  - _配置_：`type: "spring", stiffness: 300, damping: 30`
- **微交互**：
  - 按钮：`whileTap={{ scale: 0.96 }}`
  - 悬停：`transition-all duration-200 ease-out`

---

## 5. 代码实现指南

1. **技术栈**：React + Tailwind CSS + Lucide React +（可选）Framer Motion
2. **深色模式优先架构**：所有颜色必须严格使用 `dark:` 修饰符。例如，`bg-white dark:bg-gray-900`
3. **Tailwind 任意值**：使用 `[]` 语法表示精确的 macOS 颜色。例如，`bg-[#007AFF]`、`backdrop-blur-[20px]`
4. **组合**：优先使用特定工具类而不是自定义 CSS 类。

---

## AI 执行指令

生成代码时，请遵循以下结构：

1. **组件架构**：简要解释组件结构和 Z 轴分层。
2. **代码**：提供完整的、功能性的 React 组件代码。
3. **视觉细节**：明确注释*为什么*使用某些类（例如，「添加内部白色高光以实现 3D 边框效果」）。
