material-design-3-ui

用途

Material Design 3 UI 用于设计、重设计、审查或实现用户界面，依据 Google Material Design 3（M3）、Material You 以及可选的 Material 3 Expressive 原则。其目标不是做出“看起来圆润或像 Google”的界面，而是让界面真正按照 M3 系统运作。

该技能把 M3 视为一条完整链路：用户目标 → 信息架构 → 层级 → 自适应布局 → 语义令牌 → 组件 → 状态 → 交互 → 动效 → 无障碍 → 视觉表达。M3 Expressive 是可选项，用于强化层级、可用性、识别度和情感清晰度，而不是让每个元素都变得张扬。

主要能力

• 以用户任务、内容、层级和平台为起点，先结构后样式。
• 使用语义设计令牌，而不是散落的一次性数值。
• 按用途和行为选择组件，而不是按视觉相似度。
• 定义重要状态：默认、按下、聚焦、悬停（适用时）、选中、禁用、加载、错误、空状态和成功状态。
• 针对实际可用窗口设计，而不是猜测设备类别。
• 保持无障碍对比度、目标尺寸、焦点、语义、缩放和非颜色状态传达。
• 处理系统栏、安全区域、刘海、键盘/输入法、折叠铰链和边到边行为。
• 让自定义组件继承系统的令牌、状态、动效和无障碍逻辑。
• 提供渐进式参考文档，按任务需要加载，避免默认通读全部内容。

使用方式

该技能建议按以下工作流程推进，除非任务明确限定某一阶段：

1. 理解产品：识别平台、主要用户目标与操作、顶层目的地、内容层级、数据密度、输入方式、品牌约束、所需状态与边界情况、目标窗口尺寸，以及是否适合使用 M3 Expressive。
2. 建立信息架构：在样式之前分组相关信息，明确每个屏幕的主要任务，区分导航与操作，区分破坏性操作，去除重复控件，定义渐进式披露。
3. 选择自适应结构：在涉及多种窗口尺寸或导航形式时，参考自适应设计与导航文档，优先采用列表-详情、支持窗格、信息流和自适应导航等规范模式。
4. 语义化构建主题：按“参考/系统令牌 → 语义/系统角色 → 组件令牌”的层级使用色彩、排版、形状/高度和间距。
5. 选择组件：对每个重要控件确定其语义用途、强调程度、即时或事务性行为、交互状态、无障碍行为和自适应行为。
6. 定义状态与反馈：覆盖加载、空、错误、成功、禁用、选中、按下、聚焦、悬停和忙碌/提交中等相关状态；错误状态必须提供恢复路径。
7. 应用无障碍：无障碍是发布要求，不能推迟到视觉打磨阶段。
8. 添加动效：仅在动效属于任务一部分时参考动效文档；动效必须解释状态、层级、空间关系或响应，不应为炫技而动画。
9. 酌情应用 M3 Expressive：使用少量有意的表达时刻；常规阅读、表单、设置和密集生产力界面应保持克制，除非更强的表达能改善可用性。
10. 批准前审查：参考反模式文档并运行自审清单。

该技能还提供渐进式参考文档索引，按需读取，例如色彩角色与深色主题、排版层级、形状与高度、间距与布局、组件选择、导航、表单与输入、反馈与浮层、自适应设计、无障碍、动效、M3 Expressive 和反模式。最终批准前应始终包含无障碍参考。

适用场景

• 设计或重设计遵循 M3 的界面。
• 审查或审计现有界面是否符合 M3 原则。
• 实现 M3 组件、主题、状态和自适应布局。
• 需要语义化交付说明，便于其他设计师或开发者复现决策。
• 涉及 Android/Jetpack Compose、Web 或其他平台，但希望沿用 M3 语义与令牌关系。

限制

• 该技能强调以当前官方 Material 3 指南为准，并建议在断言具体尺寸、依赖版本、实验性 API 名称或近期变更行为前先核实官方信息。
• 不应把 Material 2 规则悄悄混入 Material 3。
• Pixel 和 Google 应用截图是示例，不是规范。
• 不应仅通过大圆角、柔和色彩、阴影或 Material Symbols 来“Material 化”界面。
• 不应在可以使用语义角色时到处硬编码原始颜色。
• 不应仅用颜色传达含义或状态。
• 不应把每个区块或列表行都包在卡片中，不应最大化每个组件的圆角。
• 不应将 FAB 用于次要、破坏性或模糊操作；不应把 chips 当作通用按钮或主导航；不应把 tabs 用于不相关的顶层目的地。
• 不应让所有组件同等表达；不应在已有 M3/平台控件能解决交互时发明新控件。
• 不应为保持视觉构图而牺牲无障碍；不应把紧凑/移动布局原样拉伸到宽窗口。
• 平台实现方面，Android/Jetpack Compose 建议优先使用 androidx.compose.material3，生产环境优先稳定 API，除非明确接受 alpha/实验性依赖；不要假设每个 M3 Expressive API 都稳定；Wear OS 应使用 Wear Material 3。Web 或其他平台可借鉴 M3 设计，但应复现语义和令牌关系，而非 Android 特有细节，并保留原生平台无障碍与输入约定。
• 该技能包含自审评分机制，任何在组件语义、状态与反馈或无障碍方面得 0 分的设计都不应批准；不应为满足用户而虚高评分。

交付契约

当被要求设计、重设计、审计或交付 UI 时，应提供足够细节以便复现决策，通常包括：设计意图、布局、主题角色、组件映射、状态、无障碍、动效、实现说明和自审（当用户要求审查、审计或生产就绪检查时）。创建实际代码或产物时，应直接应用这些决策，而不是停留在描述。语义交付示例包括：屏幕背景用 surface，主文本用 onSurface，次要文本用 onSurfaceVariant，主 CTA 用 filled button / primary + onPrimary，次 CTA 用 outlined button，区块容器用 surfaceContainer，细微分隔线用 outlineVariant，错误容器用 errorContainer + onErrorContainer。