skills.rest
ShawnRn
ShawnRnCOMMUNITY
Explore all skills by this author →
GitHub

material-design

Implement Material You color, typography, components, shapes, and motion across Android, web, and cross-platform UIs.

1|Updated Apr 3, 2026
Search Tags:#typography#design#theming#android#ui-design#material-design#material3
One-click install
npx skills add https://github.com/ShawnRn/SmartDash-by-Shawn-Rain --skill material-design-shawnrn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design
Source: https://github.com/ShawnRn/SmartDash-by-Shawn-Rain/tree/main/.agents/skills/material-design
Command: npx skills add https://github.com/ShawnRn/SmartDash-by-Shawn-Rain --skill material-design-shawnrn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Material Design 3 实战参考帮助设计师和开发者在 Android、Web 与跨平台应用中一致地实现 Material You 的色彩、排版、组件、形状和动效，从而提升用户体验并减少设计决策时间。

Core Features & Use Cases

  • 详细覆盖色彩系统、排版、组件规格、Shape、Motion、Dark Theme 适配，以及 Jetpack Compose/Flutter 对照，帮助快速决策与审计。
  • 适用于 Android、Web 以及跨平台 UI 项目，提供可直接应用的设计要点和对比参考。

Quick Start

快速查看 Material Design 3 实战参考以制定 UI 策略。

Frequently Asked Questions about material-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Material You color systems and typography scales in Jetpack Compose?▼

To implement Material You in Jetpack Compose, reference consolidated guidelines for color systems, typography scales, and component specs to ensure consistent UI decisions and dark theme adaptation across Android apps.

What is Material Design 3 and how does it handle dark theme adaptation?▼

Material Design 3 provides detailed specifications for shapes, motion, and dark theme adaptation, allowing you to consistently apply color systems and typography across Android, web, and cross-platform UIs to improve user experience.

Does the Material Design 3 reference apply to web apps and cross-platform UI projects?▼

Yes, the Material Design 3 reference applies to web apps using Material UI libraries and cross-platform projects, providing direct design points and comparisons for components, shapes, and motion decisions.

What's the best way to audit UI components for Material Design 3 compliance?▼

The best way to audit Material Design 3 compliance is to check your UI against consolidated guidelines covering component specs, elevation, shapes, and motion to reduce design decision time and ensure consistency.

Can I use Material Design 3 guidelines for Flutter cross-platform projects?▼

Yes, you can use Material Design 3 guidelines for Flutter cross-platform projects by referencing the provided Jetpack Compose and Flutter comparisons to make accurate color, typography, and component decisions.

Related Skills

Explore More Design & Creative Skills→
hanamizukihanamizuki
127

mobile-android-design

Implement Material Design 3 theming and Jetpack Compose UI patterns for Android apps.

Community
Intermediate
vinnie357vinnie357
24

material-design

Implement Material Design 3 theming and components across Android, web, and Flutter.

Community
Intermediate
ThedouglerThedougler

mobile-android-design

Create native Android UIs with Jetpack Compose and Material Design 3.

Community
Intermediate
MadAppGangMadAppGang
7

design-references

Provide design system references for UI review tasks.

Official
Basic