Claude Code 技能：Material Design 3 UI

Claude Code 的 Material Design 3 专家：UI 生成与审计技能

Claude Code 的 material-3-skill 技能简化了 UI 组件创建、主题设计和代码审计，确保完全符合 MD3 规范。将它安装到 ~/.claude/skills/ 目录下，使用 /material-3 激活。它优先支持 Jetpack Compose，同时提供部分 Flutter 支持，Web 兼容性有限。

四个核心模式：

• 根据描述生成组件。
• 从种子颜色创建 ColorScheme。
• 构建自适应 Scaffold。
• 审计应用源代码。

示例登录表单生成：

/material-3 component 创建一个带有邮箱和密码字段的登录表单

结果：包含 MaterialTheme、OutlinedTextField、FilledButton、合适间距和 MD3 阴影效果的 Compose 代码。

主题与 Scaffold 生成

主题命令生成完整的 ColorScheme：

/material-3 theme 从种子颜色 #1A73E8 生成主题

输出：primary、secondary、tertiary、surface、error 等颜色，包括 onPrimary、primaryContainer 变体，支持 Material You 色调调色板生成的暗黑模式。

用于应用骨架：

/material-3 scaffold 创建带导航的自适应外壳

生成自适应布局：手机端底部导航、平板端导航栏、桌面端导航抽屉，基于 MD3 断点。

参考文件结构

该技能包含从 m3.material.io 和 AndroidX Compose Material3 提炼的数据：

material-3-skill/
├── SKILL.md
├── references/
│   ├── color-system.md
│   ├── component-catalog.md
│   ├── theming-and-dynamic-color.md
│   ├── typography-and-shape.md
│   ├── navigation-patterns.md
│   └── layout-and-responsive.md
├── CONTRIBUTING.md
└── LICENSE (MIT)

文件涵盖令牌表、30+ 组件模板映射到 Compose、断点和标准布局。

代码审计：10 大检查类别

审计扫描如 ./app/src/main 等目录，并对照以下标准评估代码：

• 颜色令牌 — 优先使用 MaterialTheme.colorScheme.primary，避免硬编码。
• 排版 — 来自 MaterialTheme.typography 的样式。
• 形状 — small、medium、large、extraLarge 令牌。
• 阴影 — 组件专属阴影级别。
• 组件 — 优先标准组件而非自定义。
• 布局 — 自适应性和标准模式。
• 导航 — 根据屏幕尺寸选择类型。
• 动画 — 富有表现力的过渡效果。
• 无障碍 — 对比度、触摸目标、内容描述。
• 主题 — 动态颜色、暗黑模式。

报告包含分数、问题列表和逐行修复建议。

平台支持与 M3 表现力

| 平台 | 支持程度 |

|-----------------|------------------------------|

| Jetpack Compose | 完整支持，包括表现力特性 |

| Flutter | ThemeData(useMaterial3: true)、ColorScheme.fromSeed |

| Web | 有限支持，无表现力特性 |

M3 表现力（2025 年 5 月起）新增排版强调、形状变形和动画。该技能提供支持矩阵：Compose 完整支持，Flutter 部分支持，Web 无支持。

安装与限制

克隆并复制：

git clone https://github.com/hamen/material-3-skill.git
cp -r material-3-skill ~/.claude/skills/material-3

或使用软链接便于更新：

ln -s /path/to/material-3-skill ~/.claude/skills/material-3

限制：

• 优先 Compose，Flutter/Web 为次要支持。
• 规范提炼可能滞后于 Google 更新。
• 无法替代设计决策（如种子颜色选择、FAB 位置）。

关键要点

• 严格基于 MD3 令牌生成代码，省去手动规范检查。
• 审计 10 大类别，提供针对性修复。
• 为中高级开发者提供 M3 表现力支持矩阵。
• 参考文件作为快速规范查询。
• 真实评估 Web 支持 — 无夸大宣传。

— Editorial Team