用途：本技能用于指导实现 Google Material Design 3（MD3，又称 Material You），一套个性化、自适应、富有表现力的设计系统，核心是动态配色、色调表面、圆角形状与弹簧动效。
主要能力：
- 设计令牌体系：颜色（--md-sys-color-）、字体（--md-sys-typescale-）、形状（--md-sys-shape-corner-*）与高度层级（0–5 级，以色调表面而非阴影表达深度）。
- 组件速查：按钮、FAB、图标按钮、卡片、对话框、底部/侧边面板、分隔线、复选框、Chips、日期/时间选择器、菜单、单选、滑块、开关、文本框、应用栏、导航栏/抽屉/轨道、搜索、标签页、列表等，并标注 Web 元素与变体。
- 动效：MD3 Expressive 采用弹簧物理；过渡沿用缓动/时长体系（Emphasized 500ms、Emphasized decelerate 400ms、Emphasized accelerate 200ms、Standard 300ms 等），并给出对应 CSS cubic-bezier 值。
- 平台路径：Jetpack Compose 为主（androidx.compose.material3、MaterialTheme、Scaffold、动态配色 dynamicLightColorScheme/dynamicDarkColorScheme，Android 12+/API 31+）；Flutter 用 useMaterial3: true 与 ColorScheme.fromSeed()；Web 用 @material/web（维护模式，未实现 M3 Expressive），或仅用 CSS 自定义属性。
使用方式：Compose 中通过 MaterialTheme(colorScheme, typography, shapes) 包裹内容，部分 API 需 @OptIn(ExperimentalMaterial3Api::class)。Web 端安装 npm install @material/web，按需单独导入组件（如 import '@material/web/button/filled-button.js'），避免整包导入；在 :root 或祖先元素设置 CSS 自定义属性做主题，可对单个组件覆盖令牌，并用 prefers-color-scheme 实现深色主题。
适用场景：Android 新项目、跨手机/桌面/折叠屏/手表/XR 的自适应界面、需要动态配色与统一令牌的 Web 界面。
限制：Web 组件处于维护模式且不支持 M3 Expressive；部分组件尚无 @material/web 实现，需用 CSS 变量配合标准 HTML；MD3 与 frontend-design 技能同时启用时，组件结构与令牌以 MD3 为准，且 MD3 默认字体为 Roboto/Roboto Flex。