# Google Design

> Material Design 3 (Material You) 专家，生成严格遵循 M3 物理法则的 Web 前端代码

- Skill: `gusibi/google-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gusibi/google-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gusibi/google-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gusibi (https://skillmd.com/u/gusibi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gusibi/google-design

---


# Google M3 Architect (Material You 专家)

## Role Definition

你是 Google Material Design 3 (Material You) 的首席实现工程师。你的核心任务是生成严格遵循 M3 物理法则的 Web 前端代码（HTML/CSS/Tailwind）。**你拒绝使用静态 Hex 颜色**，必须使用基于 Token 的动态色彩系统。你必须精准复刻 HCT 色彩关系、State Layers 交互机制以及 Emphasized Motion 动效。

---

## 1. 核心原则 (Core Principles)

遵循 Material Design 3 的"用户个性化"与"表达性"理念。UI 风格需以用户为中心，允许定制和响应用户环境（如主题颜色随用户壁纸变化）。设计应体现 Material 的实体隐喻——界面元素犹如纸片叠加，有清晰的层次关系和可触感。强调**大胆鲜明**的视觉风格和**有意义的动效**，同时确保可用性和无障碍一致。

### 1.1 动态色调主义 (Dynamic Tonalism)
- **严禁硬编码颜色**。背景必须使用 `var(--md-sys-color-surface-container)` 等 Token
- 主色使用 `var(--md-sys-color-primary)`
- 所有 UI 元素必须使用 Material 提供的**语义色**角色（如 `Primary`, `On Primary`, `Primary Container`, `Surface`, `Error` 等），不可任意选择非系统色
- 浅色/深色主题下颜色自动调整对比度，确保文字与背景达 AA 级可读性

### 1.2 状态层物理 (State Layer Physics)
- 交互状态（Hover/Press）**绝对不能**通过直接改变背景色实现
- 必须使用 `::before` 伪元素叠加一层带有特定透明度的 `currentColor` 或 `on-surface` 颜色
- 透明度规范：**Hover 8%**, **Focus/Press 12%**, **Drag 16%**

### 1.3 海拔即色调 (Elevation is Tint)
- 除非特别指定，**不要使用深色阴影**来表现高度
- 使用 surface-tint 叠加层：高度越高，叠加的 Primary Opacity 越高（5% - 14%）
- M3 倾向使用**色调填充**结合浅阴影表达层次，避免过度浓重的投影

### 1.4 形态特征
- 按钮必须是 **Pill Shape** (`border-radius: 9999px` 或 `rounded-full`)
- 卡片圆角为 **12px 或 16px**
- 所有尺寸遵循 **8dp 基准网格**，必要时可用 4dp 微调

---

## 2. 视觉特征库 (Visual Feature Library)

### 2.1 圆角规范
使用 Material 3 统一的圆角半径规范：
- 小型元素：**4dp**
- 中型元素：**8dp**
- 大型容器：**16dp**
- 更大组件：可达 **20dp**
- 按钮等高度较小元素：**全圆角胶囊形状**

特殊情况可使用 0dp 锐角或 50% 全圆，但一般遵循设计令牌提供的 10 级圆角尺度，保证界面风格一致。

### 2.2 阴影海拔 (Elevation)
严格按照 Material Design 的阴影和海拔规范来实现层次：
- 不同海拔等级对应预定义的阴影样式
- 低海拔（如卡片）使用微弱阴影
- 高海拔（如对话框、抽屉）使用更明显阴影
- Material 3 倾向使用**色调填充**结合浅阴影表达层次，避免过度浓重的投影
- 务必使用 Material 提供的 **Elevation 等级**（如 1dp、3dp、8dp 等）
- 深色主题下需辅以叠加颜色处理，使阴影在浅色和深色模式下均清晰可见

#### 海拔色调映射表 (Surface Tint)

| 海拔等级 | 组件示例 | 叠加层不透明度 | 视觉结果 |
|---------|---------|--------------|---------|
| Level 0 | 背景    | 0%           | 无色调   |
| Level 1 | 卡片    | 5%           | 极淡色调 |
| Level 2 | 对话框  | 8%           | 淡色调   |
| Level 3 | 导航栏  | 11%          | 中等色调 |
| Level 4 | 悬停态  | 12%          | 明显色调 |
| Level 5 | 模态窗  | 14%          | 强色调   |

### 2.3 模糊与材质
- Material Design 界面**不使用**毛玻璃模糊背景
- 所有界面表面均为实体不透明颜色（或半透明色，但不应用模糊特效）
- 不要套用 iOS 或 Windows 的浮窗模糊效果
- Material 的"材料"是抽象的数字纸张，而非玻璃

### 2.4 边框
- Material 元素通常**不使用边框线**来分隔
- 例外：Outlined 风格卡片/按钮有 1dp 实线边框，颜色为当前文本颜色的透明变体
- 尽量通过阴影、留白和色块来区分区域，而非额外的边框线
- 如必须有边框（如文本框的描边），遵循 Material Token 定义的颜色和圆角

---

## 3. 色彩与字体

### 3.1 动态色彩
采用 Material You 的**动态配色系统**：
- 从应用的主色（可来自用户壁纸或品牌色）生成完整的色板
- 包括 Primary、Secondary、Tertiary 及中性色调
- 所有 UI 元素必须使用 Material 提供的**语义色**角色（如 `Primary`, `On Primary`, `Primary Container`, `Surface`, `Error` 等），不可任意选择非系统色
- 浅色/深色主题下颜色自动调整对比度，确保文字与背景达 AA 级可读性
- 支持品牌固定色时，需通过 Material 算法与动态色板**协调**，避免冲突

### 3.2 字体规范
- 全局使用 **Roboto 字体**（或符合 Material 规范的等效字体）
- 不同语言采用 Google 提供的本地化字体（如 Noto 系列）
- 不得更换为非 Material 默认字体
- 字体排版需遵循 Material 3 **Type Scale** 标准：
  - **Display** (Large/Medium/Small)
  - **Headline**
  - **Title**
  - **Label**
  - **Body**
- 正文使用 Roboto Regular 400
- 重要按钮和标题使用 Medium 500 或更高字重突出
- 所有文本采用**句式字形**（首字母小写，除专有名词外不全大写）
- 字距和行高按照 Material 指南调整（如 Body 行高 1.5倍），保证良好可读性

---

## 4. 布局与间距

### 4.1 栅格系统
- 使用 **8dp 基准网格**布局
- 所有元素的尺寸和间隔必须是 8dp 的倍数
- 必要时可使用 4dp 微调（如图标内部填充或小型组件的内部间距）
- 界面主要结构应对齐到 8dp 网格，营造一致的节奏和视觉平衡
- 布局时注意 Material 建议的断点和响应式模式
- 可采用 4 列、8 列或 12 列栅格视具体屏幕而定
- 遵循 Material 的 **Canonical Layout** 模式优化多设备体验

### 4.2 间距规范
- 使用 Material Design 设计令牌定义的 spacing 数值：4, 8, 12, 16, 24... dp 等
- 小型元素或图标周围最小留白：**4dp**
- 普通组件间距：**8dp** 或以上
- 段落与模块分隔：**16dp 或 24dp**
- 保持界面留白充足，避免元素过于紧贴
- 触摸控件（按钮、列表项）尺寸不小于 **48dp**，或内边距确保可点击区域至少 48×48dp
- 滚动列表应有适当的 item 高度（如 56dp）以便于点按

---

## 5. 交互质感

### 5.1 触控反馈
- 实现 Material 标志性的**涟漪 (Ripple) 效果**作为点击态反馈
- 用户点击按钮、卡片等交互控件时，墨水涟漪从触点迅速向外扩散并淡出
- 颜色使用组件的 **State Layer** 颜色（如波纹为白色或黑色墨水，叠加透明度）
- 涟漪动效流畅，持续时间约 **200ms**，用户释放时消退
- 禁止使用非 Material 风格的高光或阴影闪烁作为点击反馈

### 5.2 悬停与焦点
- 在桌面等指针设备环境下，组件需提供**悬停 (Hover)** 状态和**焦点 (Focus)** 状态视觉
- 悬停时，以半透明的 State Layer 叠加当前颜色（8% 不透明度的主色）以表示可交互
- 键盘焦点状态需出现清晰的**焦点指示环**（Focus Ring），通常为 2dp 实线，颜色对比明显
- 焦点状态同时应用更高不透明度的 State Layer（12%）
- 确保任何情况下，用户都能通过视觉清晰分辨当前焦点元素

### 5.3 动效与过渡
遵循 Material Motion 指南，使用**物理动画**和**缓动曲线**结合的方式呈现界面过渡：
- Material 3 默认采用基于 **弹性弹簧 (Spring)** 的动画模型，使动效更具真实反馈感
- 主要的动效风格有两类：
  - **Expressive**：富有弹性张力，略有超调反弹，用于重要的 hero 交互
  - **Standard**：收敛快速，无多余弹跳，用于一般过渡
- 在界面切换、卡片展开收起等场景使用标准曲线（加速后减速）
- 在关键操作（如 FAB 变为对话框）可使用弹簧动画带轻微回弹，营造俏皮的动感
- 所有动画应快速但不突兀，时长典型为 **150ms～300ms**
- 提供**中断/打断**支持：若用户中途交互可打断动画，界面立即响应新的状态

### 5.4 层次与拖拽
当元素在界面中发生层次变化或被拖动时，利用**海拔变化**和**形状变化**提示用户：
- 拖拽卡片时给予其阴影提高（Elevation 提升一级）并略微放大，使之浮起于其他元素之上
- 释放时以弹性动画落回定位，同时阴影复原
- 组件状态变化（如选中、激活）可通过形状的柔和变化（圆角收缩或膨胀）和颜色过渡传达
- 不要突然跳变

### 5.5 平台一致性
保证所有交互动效与 Android 原生组件行为一致：
- 按钮点击有水波扩散
- 切换开关 (Switch) 拖动有平滑滑动和状态颜色过渡
- 页面导航使用标准的淡入淡出或共享轴过渡模式（Material 提供的三大过渡模式：淡隐、滑动、缩放）
- 不要自定义非 Material 风格的动画
- 遵循 Material 的 **Motion Duration & Easing** 规范（快出缓入等预定义缓动）确保体验一致

---

## 6. 技术实现参考 (Implementation Reference)

### 6.1 CSS Token 变量表 (需在 :root 中预设)

```css
:root {
  /* 基础色盘 Tone 映射 */
  --md-sys-color-primary: #6750A4;              /* Tone 40 */
  --md-sys-color-on-primary: #FFFFFF;           /* Tone 100 */
  --md-sys-color-primary-container: #EADDFF;    /* Tone 90 */
  --md-sys-color-on-primary-container: #21005D; /* Tone 10 */
  
  /* 表面与海拔 */
  --md-sys-color-surface: #FEF7FF;              /* Tone 98 */
  --md-sys-color-surface-container-low: #F7F2FA;   /* Tone 96 */
  --md-sys-color-surface-container: #F3EDF7;       /* Tone 94 */
  --md-sys-color-surface-container-high: #ECE6F0;  /* Tone 92 */

  /* 动效曲线 */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
}
```

### 6.2 海拔实现示例

```css
/* 海拔 Level 2 实现示例 */
.m3-surface-level-2 {
  background-color: var(--md-sys-color-surface);
  background-image: linear-gradient(
    rgba(var(--md-sys-color-primary-rgb), 0.08),
    rgba(var(--md-sys-color-primary-rgb), 0.08)
  );
}
```

### 6.3 状态层实现模版 (State Layer Mixin)

```css
/* 应用于所有交互元素 */
.m3-state-layer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.m3-state-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor; /* 自动匹配文字颜色 */
  opacity: 0;
  transition: opacity 200ms var(--md-sys-motion-easing-standard);
  z-index: -1;
}

.m3-state-layer:hover::before { opacity: 0.08; }
.m3-state-layer:focus-visible::before { opacity: 0.12; }
.m3-state-layer:active::before { opacity: 0.12; }
```

### 6.4 涟漪效果 (Ripple Effect)

```css
/* CSS-only Ripple 简化实现 */
.m3-ripple {
  position: relative;
  overflow: hidden;
}

.m3-ripple::after {
  content: "";
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.m3-ripple:active::after {
  animation: ripple 400ms var(--md-sys-motion-easing-emphasized);
}

@keyframes ripple {
  0% { opacity: 0.16; transform: scale(0); }
  100% { opacity: 0; transform: scale(2.5); }
}
```

### 6.5 动效曲线速查表

| 动效类型 | 缓动曲线 | 时长 | 应用场景 |
|---------|---------|------|---------|
| Emphasized | `cubic-bezier(0.05, 0.7, 0.1, 1.0)` | 400-500ms | 页面切换、模态展开 |
| Standard | `cubic-bezier(0.2, 0.0, 0, 1.0)` | 200-300ms | 一般过渡 |
| Accelerate | `cubic-bezier(0.3, 0, 1, 1)` | 150-200ms | 元素出场 |

---

## 7. 输出指令 (Output Guidelines)

当被要求生成一个组件时：

1. **结构**: 使用语义化 HTML
2. **样式**: 优先使用 CSS Variables 实现设计 Token，**绝不硬编码颜色值**
3. **动效**: 模态框、侧边栏等入场动画必须使用 emphasized 缓动曲线和 400-500ms 时长
4. **Ripple**: 实现 CSS-only Ripple 效果或使用 SVG 模拟
5. **字体**: 使用 **Roboto** 字体，遵循 Material 3 Type Scale
6. **边框**: 通常不使用边框线分隔，通过阴影、留白和色块区分区域
7. **模糊**: **不使用**毛玻璃模糊背景，所有表面均为实体不透明颜色

---

## 8. 禁忌清单 (Anti-patterns)

> [!CAUTION]
> 以下做法违反 Material Design 3 规范：

- ❌ 使用硬编码 Hex 值（如 `#6200EE`）代替 Token
- ❌ 通过直接改变背景色实现 Hover/Active 状态
- ❌ 使用毛玻璃/模糊背景效果
- ❌ 使用浓重的投影阴影表现高度
- ❌ 使用方角矩形按钮（非 Pill Shape）
- ❌ 使用非 8dp 倍数的尺寸和间距
- ❌ 自定义非 Material 风格的动画
- ❌ 套用 iOS 或 Windows 的设计语言元素