[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-95136":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":43,"readmeContent":44,"aiSummary":45,"trendingCount":15,"starSnapshotCount":15,"syncStatus":46,"lastSyncTime":47,"discoverSource":48},95136,"material-design-3-ui-skill","skydashnet\u002Fmaterial-design-3-ui-skill","skydashnet","A reusable Agent Skill for designing, reviewing, and implementing UI\u002FUX with Google Material Design 3, Material You, M3 Expressive, accessibility, adaptive layouts, and semantic design tokens.","",null,"PowerShell",102,9,101,0,1,43.6,"MIT License",false,"main",true,[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"accessibility","adaptive-design","agent-skills","ai-agent","android-design","design-system","design-tokens","figma","jetpack-compose","m3-expressive","material-components","material-design","material-design-3","material-you","material3","product-design","responsive-design","ui-ux","ui-ux-design","ux-design","2026-08-24 04:01:23","\u003Cdiv align=\"center\">\n\n# Material Design 3 UI\u002FUX Skill\n\n### Design the system. Not just the screenshot.\n\nA reusable **Agent Skill** that helps AI design and coding agents create, review, and implement interfaces using **Material Design 3**, **Material You**, and optional **Material 3 Expressive** principles.\n\n[![Material Design 3](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FMaterial_Design-3-6750A4?style=flat-square&logo=materialdesign&logoColor=white)](https:\u002F\u002Fm3.material.io\u002F) [![Skill Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fskill-v1.1.0-1f6feb?style=flat-square)](CHANGELOG.md) [![Supported Agents](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fagents-7-0f9d58?style=flat-square)](#supported-agents) [![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fskydashnet\u002Fmaterial-design-3-ui-skill?style=flat-square&logo=github&label=stars)](https:\u002F\u002Fgithub.com\u002Fskydashnet\u002Fmaterial-design-3-ui-skill\u002Fstargazers) [![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fskydashnet\u002Fmaterial-design-3-ui-skill?style=flat-square&logo=github&label=forks)](https:\u002F\u002Fgithub.com\u002Fskydashnet\u002Fmaterial-design-3-ui-skill\u002Fforks) [![License](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fskydashnet\u002Fmaterial-design-3-ui-skill?style=flat-square&label=license)](LICENSE)\n\n**Claude Code · OpenAI Codex · Google Antigravity · Kiro · OpenCode · Hermes Agent · OpenClaw**\n\n\u003C\u002Fdiv>\n\n------------------------------------------------------------------------\n\n## Quick install\n\n**macOS \u002F Linux**\n\n``` bash\ncurl -fsSL https:\u002F\u002Fraw.githubusercontent.com\u002Fskydashnet\u002Fmaterial-design-3-ui-skill\u002Fmain\u002Finstall.sh | bash\n```\n\n**Windows PowerShell**\n\n``` powershell\nirm https:\u002F\u002Fraw.githubusercontent.com\u002Fskydashnet\u002Fmaterial-design-3-ui-skill\u002Fmain\u002Finstall.ps1 | iex\n```\n\n> The installer distributes the same portable skill package to the supported global agent locations. It does **not** install, authenticate, configure, or launch any AI agent.\n\n------------------------------------------------------------------------\n\n## What this skill changes\n\n| Without a design skill             | With `material-design-3-ui`                         |\n|------------------------------------|-----------------------------------------------------|\n| “Make it look Material”            | Start from user goal, hierarchy, and semantics      |\n| Rounded cards everywhere           | Use containment only when it has a purpose          |\n| Components chosen by appearance    | Components chosen by behavior                       |\n| Random hex values                  | Semantic Material color roles and tokens            |\n| Mobile UI stretched to desktop     | Adaptive structure for the available window         |\n| Accessibility checked at the end   | Accessibility treated as a release requirement      |\n| “Expressive” means more decoration | Expression used selectively to strengthen hierarchy |\n\nThis is not a collection of pretty defaults. It is a **decision system for AI agents**.\n\n------------------------------------------------------------------------\n\n## Highlights\n\n- **Progressive disclosure** — a compact `SKILL.md` routes agents to 13 focused references only when needed.\n- **Semantic component rules** — buttons, FABs, chips, navigation, forms, feedback, surfaces, and more are selected by purpose.\n- **Adaptive by design** — compact through extra-large windows, multi-pane layouts, foldables, resizable windows, and edge-to-edge behavior.\n- **Accessibility-first** — contrast, touch targets, focus, keyboard, semantics, text scaling, localization, and reduced motion.\n- **M3 Expressive with restraint** — color, shape, size, motion, containment, and typography are used intentionally.\n- **Cross-agent distribution** — one package for 7 supported AI agents on Windows, macOS, and Linux.\n- **Regression checks** — static validation plus behavioral evaluation cases help prevent rule regressions.\n\n> **Core idea:** Material Design 3 is a semantic, adaptive, accessible design system—not a rounded-card aesthetic.\n\n------------------------------------------------------------------------\n\n## Explore\n\n[**Why it exists**](#why-this-exists) · [**Coverage**](#what-the-skill-covers) · [**Architecture**](#repository-structure) · [**Install options**](#installation) · [**Examples**](#example-tasks) · [**Tests**](#testing-and-regression-checks) · [**Contributing**](#contributing)\n\n------------------------------------------------------------------------\n\n## Why this exists\n\nMaterial Design 3 is easy to imitate visually and surprisingly easy to apply incorrectly.\n\nA UI can look “Material” while still using the wrong component semantics, weak hierarchy, arbitrary colors, inaccessible controls, broken responsive behavior, excessive cards, or decorative motion that does not communicate anything.\n\nThis skill is designed to prevent that.\n\nInstead of telling an agent to simply *“make this look like Material Design 3,”* give it a reusable system that defines **how M3 decisions should actually be made**.\n\n``` text\nUser goal\n   ↓\nInformation architecture\n   ↓\nHierarchy\n   ↓\nAdaptive layout\n   ↓\nSemantic tokens\n   ↓\nComponents\n   ↓\nStates & interaction\n   ↓\nMotion\n   ↓\nAccessibility\n   ↓\nVisual expression\n```\n\n------------------------------------------------------------------------\n\n## What the skill covers\n\n### Material 3 foundations\n\n- Semantic color roles and surface hierarchy\n- Material typography roles\n- Shape systems and reusable shape tokens\n- Elevation and tonal surface relationships\n- Spacing and alignment\n- Design tokens\n- Light and dark theme behavior\n- Dynamic color considerations\n\n### Component selection\n\nThe skill teaches agents to choose components by **purpose and behavior**, not by appearance.\n\nCoverage includes:\n\n- Filled, tonal, elevated, outlined, and text buttons\n- Icon buttons\n- FAB and Extended FAB\n- Split buttons and button groups\n- Cards\n- Lists\n- Dividers\n- Badges\n- Carousels\n- Chips\n- Checkboxes\n- Radio buttons\n- Switches\n- Segmented buttons\n- Navigation bars\n- Navigation rails\n- Navigation drawers\n- Top and bottom app bars\n- Tabs\n- Text fields\n- Search\n- Menus\n- Sliders\n- Date and time pickers\n- Dialogs\n- Bottom sheets\n- Snackbars\n- Tooltips\n- Progress and loading indicators\n\n### Adaptive UI\n\nThe skill treats responsiveness as a structural design problem rather than simply scaling a mobile screen.\n\nIt covers:\n\n| Width class | Available width |\n|-------------|----------------:|\n| Compact     |       `\u003C 600dp` |\n| Medium      |     `600–839dp` |\n| Expanded    |    `840–1199dp` |\n| Large       |   `1200–1599dp` |\n| Extra large |      `≥ 1600dp` |\n\nIt also guides agents through list-detail layouts, supporting panes, feeds, adaptive navigation, resizable windows, tablets, foldables, desktop-sized layouts, safe areas, and edge-to-edge interfaces.\n\n### Accessibility\n\nAccessibility is treated as a release requirement.\n\nThe rules include:\n\n- `48dp × 48dp` minimum Android-oriented touch targets\n- Text and UI contrast requirements\n- Visible and logical focus\n- Keyboard support\n- Accessible names for icon-only controls\n- Screen-reader semantics\n- Text scaling\n- Localization resilience\n- Reduced-motion support\n- Error recovery\n- Non-color state communication\n\n### Material 3 Expressive\n\nM3 Expressive is supported as an **optional layer**, not a license to make every screen visually loud.\n\nThe skill guides agents in the intentional use of:\n\n- Color\n- Shape\n- Size\n- Motion\n- Containment\n- Typography\n- Shape morphing\n- Expressive hierarchy\n- Emphasized actions\n- Selective visual moments\n\nThe core rule is simple:\n\n> **Expression must improve hierarchy, usability, recognition, or emotional clarity.**\n\n------------------------------------------------------------------------\n\n## The anti-“fake Material” rules\n\nThis skill explicitly rejects common shortcuts that produce interfaces which only *look* vaguely Material.\n\n``` text\nDON'T:\n✗ Put every section inside a rounded card\n✗ Turn every control into a pill\n✗ Use the primary color everywhere\n✗ Add shadows to every container\n✗ Use chips as generic buttons\n✗ Use tabs as unrelated top-level navigation\n✗ Add multiple competing FABs\n✗ Treat gradients as a shortcut to “Material”\n✗ Stretch a phone layout across desktop widths\n✗ Animate elements purely for spectacle\n✗ Ignore focus, keyboard, text scaling, or reduced motion\n\nDO:\n✓ Start from the user's task\n✓ Establish information hierarchy first\n✓ Use semantic design tokens\n✓ Select components by behavior\n✓ Design all important states\n✓ Adapt structure to available window size\n✓ Preserve accessibility\n✓ Use expression selectively\n```\n\n------------------------------------------------------------------------\n\n## Repository structure\n\n``` text\n.\n├── SKILL.md\n├── skill-files.txt\n├── references\u002F\n│   ├── accessibility.md\n│   ├── adaptive-design.md\n│   ├── anti-patterns.md\n│   ├── color-system.md\n│   ├── component-selection.md\n│   ├── feedback-and-overlays.md\n│   ├── forms-and-input.md\n│   ├── m3-expressive.md\n│   ├── motion.md\n│   ├── navigation.md\n│   ├── shape-and-elevation.md\n│   ├── spacing-and-layout.md\n│   └── typography.md\n├── tests\u002F\n│   ├── cases\u002F\n│   └── validate_skill.py\n├── install.sh\n├── install.ps1\n├── uninstall.sh\n├── uninstall.ps1\n├── CHANGELOG.md\n├── CONTRIBUTING.md\n├── LICENSE\n└── .github\u002F\n```\n\n### Progressive disclosure\n\n`SKILL.md` is intentionally the **decision engine**, not a giant Material 3 textbook.\n\nIt routes the agent to focused files under `references\u002F` only when a task needs them. A navigation task can load navigation guidance; a form can load form and accessibility guidance; M3 Expressive guidance is loaded only when expression is relevant.\n\nThis reduces unnecessary context while keeping detailed rules available on demand.\n\n`skill-files.txt` defines the portable skill package. The cross-agent installers copy `SKILL.md` plus every referenced package file to the selected host.\n\n## Installation\n\nThe fastest install commands are shown at the top of this README. The options below cover selective installation, upgrades, symlinks, and uninstalling.\n\nBy default, the universal installer places the skill in the global skill location for every supported host. This avoids false negatives when an IDE is installed without its CLI on `PATH`.\n\nThe installer is filesystem-only. It does **not** install, configure, authenticate, or launch any AI agent.\n\n> **Security note:** Piping a remote script directly into a shell is convenient, but review the script first when that matters for your environment. The clone-and-run method below is easier to inspect and pin to a specific commit or release.\n\n### Supported agents\n\n| Agent              | Global installation used by this project                          |\n|--------------------|-------------------------------------------------------------------|\n| Claude Code        | `~\u002F.claude\u002Fskills\u002Fmaterial-design-3-ui\u002F`                          |\n| OpenAI Codex       | `~\u002F.agents\u002Fskills\u002Fmaterial-design-3-ui\u002F`                          |\n| Google Antigravity | `~\u002F.gemini\u002Fconfig\u002Fskills\u002Fmaterial-design-3-ui\u002F`                   |\n| Kiro               | `~\u002F.kiro\u002Fskills\u002Fmaterial-design-3-ui\u002F`                            |\n| OpenCode           | `~\u002F.config\u002Fopencode\u002Fskills\u002Fmaterial-design-3-ui\u002F`                 |\n| Hermes Agent       | `~\u002F.hermes\u002Fskills\u002Fmaterial-design-3-ui\u002F`                          |\n| OpenClaw           | `${OPENCLAW_STATE_DIR:-~\u002F.openclaw}\u002Fskills\u002Fmaterial-design-3-ui\u002F` |\n\nEvery destination receives the same portable skill package: `SKILL.md` plus its progressive-disclosure `references\u002F` files.\n\n### Clone and install\n\n``` bash\ngit clone https:\u002F\u002Fgithub.com\u002Fskydashnet\u002Fmaterial-design-3-ui-skill.git\ncd material-design-3-ui-skill\n.\u002Finstall.sh\n```\n\nWindows:\n\n``` powershell\ngit clone https:\u002F\u002Fgithub.com\u002Fskydashnet\u002Fmaterial-design-3-ui-skill.git\ncd material-design-3-ui-skill\n.\\install.ps1\n```\n\n### Install only detected agents\n\n``` bash\n.\u002Finstall.sh --detect\n```\n\n``` powershell\n.\\install.ps1 -Detect\n```\n\nDetection checks the relevant CLI when available and the host’s existing configuration directory. Universal mode remains the default because it is more reliable for GUI-only installations.\n\n### Install for selected agents\n\n``` bash\n.\u002Finstall.sh --agent claude --agent codex --agent antigravity\n```\n\n``` powershell\n.\\install.ps1 -Agent claude,codex,antigravity\n```\n\nSupported names: `claude`, `codex`, `antigravity`, `kiro`, `opencode`, `hermes`, `openclaw`.\n\n> **Upgrading from v1.0:** v1.1 installs a multi-file skill package instead of only `SKILL.md`. If an older installation already exists, run the installer with `--force` \u002F `-Force` after reviewing any local edits.\n\n### Updating an existing installation\n\nThe installer never silently overwrites a different existing skill directory. Re-run with force after reviewing local changes.\n\n``` bash\n.\u002Finstall.sh --force\n```\n\n``` powershell\n.\\install.ps1 -Force\n```\n\nIf the installed `SKILL.md` is already identical, the installer reports it as up to date and makes no change.\n\n### Symlink mode for contributors\n\nWhen working from a clone, link each host directly to the repository instead of copying the skill:\n\n``` bash\n.\u002Finstall.sh --link\n```\n\n``` powershell\n.\\install.ps1 -Link\n```\n\nWindows symbolic links may require Developer Mode or appropriate privileges.\n\n### Uninstall\n\n``` bash\n.\u002Funinstall.sh\n```\n\n``` powershell\n.\\uninstall.ps1\n```\n\nThe uninstaller only removes the `material-design-3-ui` skill directories at the supported global destinations.\n\n------------------------------------------------------------------------\n\n## Example tasks\n\nOnce the skill is loaded, requests can stay focused on the actual product:\n\n``` text\nRedesign this dashboard using Material Design 3.\n\nAudit this mobile screen for incorrect M3 component usage.\n\nCreate an adaptive M3 layout for compact, medium, and expanded widths.\n\nConvert this design system to semantic Material 3 color roles.\n\nReview this settings screen for accessibility and hierarchy problems.\n\nUse Material 3 Expressive, but keep the interface suitable for a productivity app.\n\nCreate a developer handoff for this screen using semantic M3 tokens and exact component variants.\n```\n\nThe agent should then apply the rules from `SKILL.md` instead of relying on a vague visual interpretation of Material Design.\n\n------------------------------------------------------------------------\n\n## Testing and regression checks\n\nThe repository includes both static validation and behavioral evaluation fixtures.\n\nRun the static validator:\n\n``` bash\npython tests\u002Fvalidate_skill.py\n```\n\nIt checks the skill frontmatter, reference routing, package manifest, installer coverage, repository guardrails, and evaluation fixtures.\n\n`tests\u002Fcases\u002F` contains behavioral scenarios for settings, dashboards, adaptive navigation, form validation, M3 Expressive restraint, and fake-Material audits. These cases are designed to catch regressions in **agent decisions**, not merely Markdown formatting.\n\nGitHub Actions runs the static validator and Bash syntax checks on pushes and pull requests.\n\n------------------------------------------------------------------------\n\n## Design philosophy\n\n### Semantics before styling\n\nA component is selected because its behavior matches the task—not because it has the desired shape.\n\n### Tokens before literals\n\nPrefer:\n\n``` text\nsurface\nonSurface\nprimary\nonPrimary\nsurfaceContainer\noutlineVariant\nerrorContainer\n```\n\nover scattered values such as:\n\n``` text\n#FFFFFF\n#6750A4\n23px radius\n18px shadow blur\n```\n\nLiteral values can still exist inside a project’s token implementation, but screens should depend on **semantic roles**.\n\n### Hierarchy before decoration\n\nSpacing, typography, containment, color, shape, and size should communicate importance before decorative effects are introduced.\n\n### Adaptive, not stretched\n\nA wider window should improve context or productivity. It should not simply produce a wider phone screen.\n\n### Accessible by default\n\nContrast, focus, touch targets, semantics, text scaling, keyboard input, localization, and reduced motion are part of the design—not cleanup work after the design is finished.\n\n### Expressive with restraint\n\nM3 Expressive works best when important moments receive stronger emphasis and routine content remains calm enough to scan.\n\n------------------------------------------------------------------------\n\n## Workflow encoded in `SKILL.md`\n\n``` text\n1. Understand the product and platform\n2. Establish information architecture\n3. Define the primary task and hierarchy\n4. Choose the adaptive layout\n5. Build the semantic theme\n6. Select the correct M3 components\n7. Define interaction and system states\n8. Apply accessibility requirements\n9. Add meaningful motion\n10. Apply M3 Expressive treatment when appropriate\n11. Review against anti-patterns\n12. Produce implementation-ready handoff\n```\n\nThis ordering matters. Styling is intentionally not the first step.\n\n------------------------------------------------------------------------\n\n## Review contract\n\nBefore approving a UI, the skill asks the agent to evaluate:\n\n| Area          | What should be verified                                             |\n|---------------|---------------------------------------------------------------------|\n| Structure     | Primary task, grouping, hierarchy, navigation vs. actions           |\n| Theme         | Semantic colors, typography, shapes, elevation, dark theme          |\n| Components    | Correct M3 semantics and variants                                   |\n| States        | Loading, empty, error, disabled, selected, pressed, focus, hover    |\n| Adaptive      | Compact through large-window behavior                               |\n| Accessibility | Targets, contrast, focus, labels, scaling, reduced motion           |\n| Expressive    | Whether expression improves the experience rather than adding noise |\n\nThis makes the skill useful not only for generating UI, but also for **design reviews and audits**.\n\n------------------------------------------------------------------------\n\n## Intended use\n\nThis repository is useful for:\n\n- UI\u002FUX design agents\n- AI coding agents\n- Product design workflows\n- Design-system generation\n- Material 3 UI reviews\n- Accessibility reviews\n- Figma-oriented design specifications\n- Android and Jetpack Compose planning\n- Web interfaces inspired by Material 3 semantics\n- Responsive and adaptive UI planning\n- Designer-to-developer handoff\n\nIt is especially useful when an agent would otherwise receive a vague instruction such as *“use Material Design 3.”*\n\n------------------------------------------------------------------------\n\n## Platform notes\n\nThe design guidance is intentionally broader than a single implementation framework.\n\nFor Android and Jetpack Compose, the skill favors current `androidx.compose.material3` guidance, semantic theme roles, adaptive layouts, edge-to-edge behavior, and stable APIs for production unless experimental dependencies are explicitly acceptable.\n\nFor web and other platforms, the goal is to preserve M3 semantics, hierarchy, tokens, interaction logic, and accessibility without blindly reproducing Android-specific implementation details.\n\nLibrary\u002FAPI availability changes over time. `SKILL.md` therefore instructs agents to verify current official documentation before asserting exact dependency versions or the availability of newer M3 Expressive APIs.\n\n------------------------------------------------------------------------\n\n## Source of truth\n\nThis project is based on official Material Design and Android guidance.\n\n- [Material Design 3](https:\u002F\u002Fm3.material.io\u002F)\n- [Material 3 Components](https:\u002F\u002Fm3.material.io\u002Fcomponents)\n- [Material 3 Color Roles](https:\u002F\u002Fm3.material.io\u002Fstyles\u002Fcolor\u002Froles)\n- [Material 3 Typography](https:\u002F\u002Fm3.material.io\u002Fstyles\u002Ftypography\u002Foverview)\n- [Material Design Tokens](https:\u002F\u002Fm3.material.io\u002Ffoundations\u002Fdesign-tokens\u002Foverview)\n- [Material Usability & Accessibility](https:\u002F\u002Fm3.material.io\u002Ffoundations\u002Fusability)\n- [Material 3 Expressive](https:\u002F\u002Fm3.material.io\u002Fblog\u002Fbuilding-with-m3-expressive)\n- [Google Design research on M3 Expressive](https:\u002F\u002Fdesign.google\u002Flibrary\u002Fexpressive-material-design-google-research)\n- [Material 3 in Jetpack Compose](https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fui\u002Fcompose\u002Fdesignsystems\u002Fmaterial3)\n- [Adaptive Window Size Classes](https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fadaptive-apps\u002Fguides\u002Fuse-window-size-classes)\n- [Canonical Adaptive Layouts](https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fadaptive-apps\u002Fguides\u002Fcanonical-layouts)\n- [Android Accessibility](https:\u002F\u002Fdeveloper.android.com\u002Fdesign\u002Fui\u002Fmobile\u002Fguides\u002Ffoundations\u002Faccessibility)\n\nWhen this repository and the current official specification disagree, **the current official specification wins**.\n\n------------------------------------------------------------------------\n\n## Contributing\n\nContributions that improve accuracy, component coverage, accessibility, adaptive behavior, implementation guidance, or compatibility with newer Material 3 guidance are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) before opening a pull request.\n\nWhen proposing a rule change:\n\n1.  Prefer official Material Design or Android documentation as evidence.\n2.  Separate design guidance from framework-specific API availability.\n3.  Avoid introducing Material 2 behavior as if it were Material 3.\n4.  Keep rules semantic and reusable rather than tied to one screenshot or product.\n5.  Preserve accessibility requirements.\n6.  Explain why the change improves correctness or practical agent behavior.\n\n------------------------------------------------------------------------\n\n## License\n\nReleased under the [MIT License](LICENSE).\n\nYou may use, copy, modify, merge, publish, and distribute this project under the terms of the license.\n\n------------------------------------------------------------------------\n\n## Disclaimer\n\nThis is an **unofficial community project** and is not affiliated with, endorsed by, or sponsored by Google.\n\nMaterial Design, Material You, Android, and related names are trademarks or products of their respective owners. Official Google documentation remains the source of truth.\n\n------------------------------------------------------------------------\n\n## Make AI-generated Material UI actually behave like Material\n\nIf this skill helps your workflow, consider starring the repository and contributing improvements as Material Design 3 continues to evolve.\n\n**Design the system—not just the screenshot.**\n","这是一个面向AI代理（Agent）的可复用技能模块，用于在UI\u002FUX设计与实现过程中系统性应用Material Design 3（M3）、Material You及M3 Expressive规范。核心功能包括基于语义化设计令牌（design tokens）生成可访问、自适应的布局，依据用户目标与交互行为推荐组件，而非仅依赖视觉样式；支持无障碍（accessibility）前置集成与跨设备自适应结构。适用于AI驱动的产品设计、前端自动化生成、设计系统落地辅助等场景，尤其适合需合规遵循Google官方设计语言的Android、Jetpack Compose或跨平台应用开发流程。",2,"2026-08-21 02:30:14","CREATED_QUERY"]