以 skill 自身的术语
指导以 Jetpack Compose Material3 为主要目标实现 Google 的 Material Design 3(Material You),同时涵盖 Flutter 及通过 @material/web 实现的有限网页路径。它涵盖了颜色、字号体系、形状、层级和动效的 md.sys token 系统,30 多个组件及其变体的快速参考,自适应布局与导航、主题与动态颜色、M3 Expressive 平台矩阵,以及无障碍性。
审查模式会在十个类别上为应用或页面打出 0-10 分,并生成合规报告。它面向需要具体 MD3 默认值的设计师和开发者:五种窗口尺寸类别、以色调层级取代阴影、8dp 间距系统,以及大窗口下的最大内容宽度。
它产出什么
- 一份 markdown 格式的 MD3 合规报告,包含总体评分和各类别评分、严重问题、警告、通过项以及优先修复建议。
- 一个基于 MaterialTheme 构建的 Compose 主题,其 colorScheme 由 dynamicLightColorScheme、lightColorScheme 或生成的主题代码提供。
- 一段由 md-sys 自定义属性组成的 CSS 主题代码块,包括通过媒体查询或类应用的深色主题变体。
工作方式
- 01除非技术栈另有说明,否则从 Compose 开始
该文件将 Jetpack Compose Material3 视为默认路径,在编写任何代码之前,「决策树」会将应用外壳、单个组件、主题、表单、导航和数据展示分别导向特定章节和参考文件。
- 02应用 Token 层
所有 MD3 token 都位于 md.sys 命名空间;Compose 将相同的语义角色映射到 MaterialTheme.colorScheme、typography 和 shapes,而 web 端则将其映射到以 md-sys 为前缀的 CSS custom properties。
- 03从 Quick Reference 中选取 Components
组件表列出了每个组件的 web element 名称、关键变体和分类,并标注了哪些没有 @material/web 实现,以便可以用 CSS custom properties 结合标准 HTML 来构建。
- 04使用 Common Patterns 进行组装
App Shell、Card Grid 和 Form Layout 模式均以 HTML 加 CSS 形式给出,包括一个断点,可在窄宽度下将导航栏(navigation rail)转换为底部导航。
- 05按需进行审查
通过 audit 调用时,该 skill 会检查一个 URL、源文件或正在运行的应用,并在撰写报告前对十个类别分别打出 0 到 10 分。