mobile-android-design

概览

什么是 mobile-android-design？

mobile-android-design 是为 Android 开发者和设计师打造的专业技能，帮助他们创建视觉吸引力强、适应性好且无障碍的移动界面。它聚焦于 Material Design 3（Material You）原则和 Jetpack Compose，这是 Google 推出的现代 Android UI 工具包。该技能涵盖主题设计、导航、布局系统以及设计适用于手机、平板和折叠屏设备的应用的最佳实践。

谁适合使用此技能？

• 构建原生 UI 的 Android 应用开发者
• 实施 Material Design 3 指南的设计师
• 采用 Jetpack Compose 进行现代 Android 项目的团队
• 需要自适应布局、动态主题或高级导航功能的任何人

解决的问题

• 利用 Material Design 3 组件简化 UI 设计流程
• 通过 Navigation Compose 简化导航设置
• 支持动态色彩主题和无障碍功能
• 适配多种设备类型的响应式布局

使用方法

安装步骤

1. 通过以下命令安装技能：

   npx skills add https://github.com/wshobson/agents --skill mobile-android-design
   

2. 首先查看 SKILL.md，了解概念和工作流程概览。
3. 浏览 references/ 文件夹，获取实用指南：
   • android-navigation.md：导航模式和设置
   • compose-components.md：Jetpack Compose UI 组件与交互
   • material3-theming.md：主题设计与动态色彩实现

关键概念与文件

Material Design 3 原则

• 通过动态色彩实现个性化
• 通过色调调色板提升无障碍体验
• 针对大屏设备的响应式布局

Jetpack Compose 布局系统

• 使用 Column 和 Row 实现灵活布局
• 利用 Compose 实现列表、下拉刷新和滑动删除

导航模式

• 在 android-navigation.md 中设置 Navigation Compose
• 使用类型安全的路由和参数实现稳健导航

主题设计与自适应 UI

• 通过动态色彩应用 Material 3 主题（详见 material3-theming.md）
• 自定义浅色和深色模式的配色方案

适配您的项目

• 参考提供的指南和代码示例
• 将 Material 3 和 Compose 模式集成到您的代码库中
• 根据您的工具和应用需求调整工作流程

常见问题

mobile-android-design 适合所有 Android 项目吗？

该技能最适合使用 Jetpack Compose 并面向现代 Android UI 标准的项目。如果您的应用依赖旧版 XML 布局或旧设计系统，建议先升级到 Compose 和 Material 3。

哪里可以找到导航和主题示例？

请查看 references/android-navigation.md 和 references/material3-theming.md 文件，内含详细代码示例和设置说明。

如何预览完整技能内容？

打开 Files 标签，浏览完整文件树，包括嵌套的参考资料和高级 UI 模式的辅助脚本。

我可以自定义 Material 3 色彩调色板吗？

可以。请参阅 material3-theming.md，了解如何定义自定义配色方案并启用动态色彩支持。

如果需要支持平板和折叠屏怎么办？

mobile-android-design 包含响应式布局策略和适应大屏设备的 UI 模式。请查看 SKILL.md 中的布局部分及 Compose 组件指南，了解最佳实践。