OpenClaw

material-design

Google Material Design 3 实战参考。涵盖 Material You 动态色彩、排版系统、组件规格、Shape 系统、Motion 规范、Dark Theme 适配和 Jetpack Compose/Flutter 对照。适用于 Android 应用、Web 应用和跨平台应用的 UI 设计决策。

bingfoon0 来源安装数☆ 0 仓库 Starsv1.0.0

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install bingfoon/material-design

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

Google Material Design 3 实战参考

Material Design 3（Material You）的实战速查，覆盖色彩、排版、组件和动效。

适用场景

Android 应用 UI 设计（Jetpack Compose / XML Views）
Flutter 跨平台应用
Web 应用使用 Material 组件库（MUI / Angular Material）
审计现有 UI 是否符合 Material 3 规范

不适用

macOS / iOS 原生应用（参考 apple-hig）
Windows 原生应用（参考 fluent-design）

1. 核心设计原则

Material 3 的三大支柱：

原则	含义	实践
Personal（个性化）	适应用户偏好	Dynamic Color 从壁纸取色
Adaptive（自适应）	适应各种设备	响应式布局、折叠屏支持
Expressive（表达力）	丰富的视觉表达	大圆角、色彩层次、motion

与 Apple HIG / Fluent 的区别

Apple:   做减法，克制，内容优先
Fluent:  融入环境（Mica/Acrylic），层次丰富
Material: 做加法，表达力强，色彩大胆，圆角更大

2. 色彩系统（Dynamic Color）

Material 3 色彩方案

M3 使用 色调调色板（Tonal Palette） 生成完整配色：

Source Color（种子色）
  → Primary Palette（主色调 13 级）
  → Secondary Palette（辅色调 13 级）
  → Tertiary Palette（第三色调 13 级）
  → Neutral Palette（中性色 13 级）
  → Neutral Variant Palette（中性变体 13 级）
  → Error Palette（错误色 13 级）

关键色槽（Key Color Roles）

角色	Light	Dark	用途
Primary	Tone 40	Tone 80	主要交互元素（FAB、按钮）
On Primary	Tone 100	Tone 20	Primary 上的文字/图标
Primary Container	Tone 90	Tone 30	次要强调容器
On Primary Container	Tone 10	Tone 90	容器上的内容
Secondary	Tone 40	Tone 80	次要交互元素
Tertiary	Tone 40	Tone 80	对比/强调
Surface	Tone 99	Tone 6	页面主背景
Surface Variant	Tone 90	Tone 30	卡片/区块背景
On Surface	Tone 10	Tone 90	主文字
On Surface Variant	Tone 30	Tone 80	辅助文字
Outline	Tone 50	Tone 60	边框
Outline Variant	Tone 80	Tone 30	弱边框/分隔线
Error	`#B3261E`	`#F2B8B5`	错误...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/bingfoon/material-design
Version: 1.0.0
Commit: 3cdd50b03df94b2c3db7407d4e543f005c1d7a67
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# Google Material Design 3 实战参考

Material Design 3（Material You）的实战速查，覆盖色彩、排版、组件和动效。

## 适用场景

- Android 应用 UI 设计（Jetpack Compose / XML Views）
- Flutter 跨平台应用
- Web 应用使用 Material 组件库（MUI / Angular Material）
- 审计现有 UI 是否符合 Material 3 规范

## 不适用

- macOS / iOS 原生应用（参考 apple-hig）
- Windows 原生应用（参考 fluent-design）

---

## 1. 核心设计原则

Material 3 的三大支柱：

| 原则 | 含义 | 实践 |
|------|------|------|
| **Personal（个性化）** | 适应用户偏好 | Dynamic Color 从壁纸取色 |
| **Adaptive（自适应）** | 适应各种设备 | 响应式布局、折叠屏支持 |
| **Expressive（表达力）** | 丰富的视觉表达 | 大圆角、色彩层次、motion |

### 与 Apple HIG / Fluent 的区别

```
Apple:   做减法，克制，内容优先
Fluent:  融入环境（Mica/Acrylic），层次丰富
Material: 做加法，表达力强，色彩大胆，圆角更大
```

---

## 2. 色彩系统（Dynamic Color）

### Material 3 色彩方案

M3 使用 **色调调色板（Tonal Palette）** 生成完整配色：

```
Source Color（种子色）
  → Primary Palette（主色调 13 级）
  → Secondary Palette（辅色调 13 级）
  → Tertiary Palette（第三色调 13 级）
  → Neutral Palette（中性色 13 级）
  → Neutral Variant Palette（中性变体 13 级）
  → Error Palette（错误色 13 级）
```

### 关键色槽（Key Color Roles）

| 角色 | Light | Dark | 用途 |
|------|-------|------|------|
| Primary | Tone 40 | Tone 80 | 主要交互元素（FAB、按钮） |
| On Primary | Tone 100 | Tone 20 | Primary 上的文字/图标 |
| Primary Container | Tone 90 | Tone 30 | 次要强调容器 |
| On Primary Container | Tone 10 | Tone 90 | 容器上的内容 |
| Secondary | Tone 40 | Tone 80 | 次要交互元素 |
| Tertiary | Tone 40 | Tone 80 | 对比/强调 |
| Surface | Tone 99 | Tone 6 | 页面主背景 |
| Surface Variant | Tone 90 | Tone 30 | 卡片/区块背景 |
| On Surface | Tone 10 | Tone 90 | 主文字 |
| On Surface Variant | Tone 30 | Tone 80 | 辅助文字 |
| Outline | Tone 50 | Tone 60 | 边框 |
| Outline Variant | Tone 80 | Tone 30 | 弱边框/分隔线 |
| Error | `#B3261E` | `#F2B8B5` | 错误...

搜索