Agent Skills
› NeverSight/learn-skills.dev
› expressive-design
expressive-design
GitHub提供Flutter中Material 3 Expressive设计系统的全面指南，涵盖色彩、排版、动效等核心元素。适用于娱乐、社交等情感化UI开发，含Android/Linux平台集成及M3迁移方案，推荐使用m3e_design包实现。
Trigger Scenarios
询问Material 3 Expressive设计规范
需要为Flutter应用添加情感化UI设计
查询从标准M3迁移到M3E的方法
查找Android或Linux平台的M3E集成细节
Install
npx skills add NeverSight/learn-skills.dev --skill expressive-design -g -y
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
| Category | Reference | Description |
|---|---|---|
| Foundations | FOUNDATIONS.md | Research, principles, communication, core elements |
| Color | COLOR.md | Tokens, palettes, contrast specs |
| Typography | TYPOGRAPHY.md | Scales, values, treatments |
| Motion | MOTION.md | Durations, easing, transitions |
| Shapes | SHAPES.md | Radii, tokens, containment |
| Spacing | SPACING.md | Spacing ramps, touch targets |
| Components | COMPONENTS.md | Component specifications |
| Migration | MIGRATION.md | M3 to M3E migration guide |
| Accessibility | ACCESSIBILITY.md | Compliance, testing |
| Platforms | PLATFORMS.md | Android and Linux desktop |
Core Expressive Elements
- Color - Expanded tonal palettes, container tiers, emotional selection
- Shape - Expressive radii, containment, visual boundaries
- Size - Larger touch targets, visual hierarchy
- Motion - Energetic transitions, emotional timing
- 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:
dependencies:
m3e_design: ^0.2.1
dynamic_color: ^1.8.1
Next Steps
- Review FOUNDATIONS.md for core principles
- Apply color system from COLOR.md
- Implement typography from TYPOGRAPHY.md
- Add motion from MOTION.md
- Apply shapes from SHAPES.md
- Configure spacing from SPACING.md
- Implement components from COMPONENTS.md
- Migrate existing M3 from MIGRATION.md
- Ensure accessibility with ACCESSIBILITY.md
- Configure platform-specifics from PLATFORMS.md
Version History
- e0220ca Current 2026-07-05 22:14
