SuperAPI AI 工具集

material-3-expressive

设计与创作

查看项目

更新于 10-15 17:27

技能介绍

用途:在 Android UI/UX 设计与评审中应用 Material 3 Expressive(Material You Expressive),优先处理对话框、面板、模态、工具栏和按钮等组件的令牌请求,默认输出指导加令牌引用。

主要能力:提供组件令牌查找与输出模板;覆盖 Buttons、Button Groups、Dialogs、Sheets、Toolbars、FAB 及扩展 FAB、FAB Menu、Icon Buttons、Split Button、Navigation Bar/Rail、App Bars、Carousel、Progress/Loading Indicator 等组件;提供 Color、Typography、Shape、Motion、Elevation、State 等基础令牌(Tier 3,用于主题化);并含研究依据、测试指南、Wear OS 相关内容与 Compose 映射参考。

使用方式:先确认表达强度(Foundational / Excellent / Transformative)、目标设备类与窗口尺寸类(Compact / Medium / Expanded);默认假设为 Foundational、Compact、启用动态颜色、保留标准导航。工作流:确认强度与 hero moment→确认设备与窗口尺寸→加载 Tier 1 索引与输出模板→加载组件概览与令牌规范→如需主题化加载 Tier 3 基础令牌→输出指导与令牌引用。输出默认使用 references/m3-component-token-output-template.md 模板,包含上下文意图、强度与 hero moment、窗口与设备类、组件与变体、令牌引用、行为约束、减弱动效回退、无障碍与性能检查等。

表达策略:形状对比(主元素大圆角、次元素克制)、丰富色彩(主/次容器)、字体层级(字号与字重变化)、动效(按压/选择时的形状变形);每流程最多 1-2 个 hero moment。

适用场景:手机、平板、折叠屏、Wear OS 的界面设计与评审,尤其需要组件令牌、主题化与表达性样式时。

限制与注意:保留文字标签,不破坏导航模式,避免每屏过多 hero moment,不使用硬编码令牌值(改用语义令牌如 md.sys.color.*),需测试三种窗口尺寸类,遵循系统动画缩放并提供减弱动效或即时过渡,触控目标至少 48dp,文字对比度 4.5:1、非文字 3:1。

维护:可用 skills/material-3-expressive/scripts/update_m3_expressive_refs.py 刷新引用,需 Playwright 与 Chromium(.venv/bin/python -m playwright install chromium);CI 每周运行。搜索示例:rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md。示例文件含 assets/examples/ui/ExpressiveHomeScreen.kt 等,仅为示意,需按项目适配。