AgentSkillsCN

expressive-design

Material 3 Expressive（M3E）。为 Flutter 提供全面的表达性设计系统指南，支持 Android 与 Linux 桌面平台。涵盖色彩标记、字体比例、动效规范、形状标记、间距渐变以及组件增强，助力打造情感充沛的用户界面。同时提供从标准 M3 迁移的指导，以及各平台专属的集成注意事项。

SKILL.md
--- frontmatter
name: expressive-design
description: Material 3 Expressive (M3E). Comprehensive guidance on expressive design system for Flutter with platform support for Android and Linux desktop. Covers color tokens, typography scales, motion specifications, shape tokens, spacing ramps, and component enhancements for creating emotionally engaging UIs. Includes migration guidance from standard M3 and platform-specific integration notes.

Material 3 Expressive Design System

Material 3 Expressive (M3E) is Google's most researched design system update, based on 46 studies with 18,000+ participants. It creates emotionally engaging user experiences through strategic use of color, shape, size, motion, and containment.

Quick Reference

CategoryReferenceDescription
FoundationsFOUNDATIONS.mdResearch, principles, core elements
ColorCOLOR.mdTokens, palettes, contrast specs
TypographyTYPOGRAPHY.mdScales, values, treatments
MotionMOTION.mdDurations, easing, transitions
ShapesSHAPES.mdRadii, tokens, containment
SpacingSPACING.mdSpacing ramps, touch targets
ComponentsCOMPONENTS.mdComponent specifications
MigrationMIGRATION.mdM3 to M3E migration guide
AccessibilityACCESSIBILITY.mdCompliance, testing
PlatformsPLATFORMS.mdAndroid and Linux desktop

Core Expressive Elements

  1. •Color - Expanded tonal palettes, container tiers, emotional selection
  2. •Shape - Expressive radii, containment, visual boundaries
  3. •Size - Larger touch targets, visual hierarchy
  4. •Motion - Energetic transitions, emotional timing
  5. •Containment - Surface elevation, tonal separation

When to Use M3 Expressive

  • •Media and entertainment applications
  • •Communication apps (email, messaging)
  • •Social platforms
  • •Creative tools
  • •Consumer-facing products

When to Avoid M3 Expressive

  • •Banking and financial applications
  • •Safety-critical interfaces
  • •Healthcare and medical software
  • •Productivity tools requiring efficiency
  • •Forms-heavy applications

Platform Support

  • •Android - Dynamic color, Android 16 integration, native behaviors
  • •Linux Desktop - Keyboard navigation, focus management, desktop interactions

Key Research Findings

  • •87% preference among 18-24 age group
  • •4x faster element recognition
  • •32% increase in subculture perception
  • •34% boost in modernity
  • •Erases age-related usability gaps

Flutter Integration

Use the m3e_design package for M3 Expressive implementation:

yaml
dependencies:
  m3e_design: ^0.2.1
  dynamic_color: ^1.8.1

Next Steps

  1. •Review FOUNDATIONS.md for core principles
  2. •Apply color system from COLOR.md
  3. •Implement typography from TYPOGRAPHY.md
  4. •Add motion from MOTION.md
  5. •Apply shapes from SHAPES.md
  6. •Configure spacing from SPACING.md
  7. •Implement components from COMPONENTS.md
  8. •Migrate existing M3 from MIGRATION.md
  9. •Ensure accessibility with ACCESSIBILITY.md
  10. •Configure platform-specifics from PLATFORMS.md