企业官网建设流程全解析

material-3-skill 是一款面向 Claude Code 等 AI 编程助手的免费开源 Material Design 3（Material You）技能包，内置 30+ 个 MD3 组件规范、设计令牌、动态主题与合规审计能力。本文实测 npx skills、Claude Code 插件市场、git clone 手动安装 3 种安装方法，帮你快速找到最适合自己工作流的那一条命令。

30秒看懂：material-3-skill 能做什么？

安装后，AI 助手会加载 SKILL.md 作为"设计大脑"，帮你生成符合 Google 官方规范的 UI：

• 设计令牌（Design Tokens）：颜色、字体、圆角、高度、动效全套令牌体系
• 30+ 组件目录：Button、Card、Navigation、Text Field 等，含 Jetpack Compose 与 Web 映射，详见 component-catalog.md
• 动态主题：种子色一键生成整套配色方案，支持深色模式，详见 theming-and-dynamic-color.md
• 响应式布局：5 档窗口尺寸断点、折叠屏适配，详见 layout-and-responsive.md
• MD3 合规审计：10 个维度打分，输出整改报告

平台优先级：Jetpack Compose 为主，Flutter 次之，Web 为受限支持。

安装方法一：npx skills 一键安装（推荐 ⭐）

适用工具：Codex、Claude Code、Cursor 及多 Agent 环境。这是官方首推路径，因为仓库遵循标准的skills/<名称>/SKILL.md目录布局。

npx --yes skills add hamen/material-3-skill --skill material-3 -y

实测要点：

• ✅ 一条命令完成下载 + 注册，无需手动管理目录
• ✅--skill material-3指定技能名，-y跳过确认，全程无交互
• ⏱️ 耗时约几秒，装完即可在 AI 对话中调用/material-3命令

安装方法二：Claude Code 插件市场安装

适用于重度使用 Claude Code 插件体系的用户。当前版本 1.1.1 已内置市场清单文件 marketplace.json，插件元数据位于 plugin.json。

方式 A：交互式会话内

/plugin marketplace add hamen/material-3-skill /plugin install material-3@material-3-skill

方式 B：Shell 命令行

claude plugin marketplace add hamen/material-3-skill claude plugin install material-3@material-3-skill

实测要点：

• ✅ 需要先"添加市场"再"安装插件"，两步缺一不可
• ⚠️ 旧命令claude plugin install github:hamen/material-3-skill会报not found in any configured marketplace错误——1.1.1 版本已通过携带 marketplace manifest 修复此问题，升级后请重新安装
• ✅ 市场清单指向skills/material-3子目录，Claude Code 会自动读取其中的plugin.json并注册技能

安装方法三：git clone 手动链接（Codex / 通用加载器）

适合 Codex 用户，或任何支持加载SKILL.md的 AI 工具，自由度最高。

git clone https://gitcode.com/gh_mirrors/mat/material-3-skill cd material-3-skill # Codex 用户 mkdir -p ~/.codex/skills ln -s "$(pwd)/skills/material-3" ~/.codex/skills/material-3 # 其他 SKILL.md 加载器 ln -s "$(pwd)/skills/material-3" /path/to/your/skills/material-3

实测要点：

• ✅ 用符号链接而非拷贝，git pull更新仓库后技能内容自动同步
• ⚠️ 链接目标必须是skills/material-3这个子目录，而非仓库根目录
• ✅ 可随时断开链接（rm掉软链）完成卸载

3 种安装方法实测对比

一句话选型：日常开发选 ①；深度 Claude Code 玩家选 ②；追求可控性选 ③。

安装后快速上手：4 条高频命令

审计会检查颜色令牌、字体、圆角、高度、组件、布局、导航、动效、无障碍、主题化 10 个类别，支持 Compose/Kotlin、Flutter/Dart 和 Web/CSS 源码。

安装常见问题排查

Q：安装时提示插件找不到？确认使用的是 1.1.1 及以上版本命令，旧版claude plugin install github:...已废弃，请改用本文方法二的两步流程。

Q：想验证目录结构是否正确？仓库自带布局校验脚本 plugin_layout_test.sh，可运行它检查 marketplace.json、plugin.json 与 SKILL.md 的位置是否符合规范。

Q：安装后 AI 没有生效 MD3 规范？检查SKILL.md是否位于skills/material-3/下，并确认 AI 工具的技能目录已包含该路径。技能定义详见 SKILL.md，平台优先级说明见 CONTRIBUTING.md。

结语

material-3-skill 把 Google 官方的 MD3 规范浓缩成了 AI 助手可直接执行的知识库。推荐新手直接从npx skills 一键安装开始，30 秒装好，随后用/material-3 audit给你的现有项目做一次 MD3 合规体检，你会直观感受到它的价值。更多细节可参阅项目总览 README.md 与色彩系统参考 color-system.md。