跳转到使用指南
mobile-android-design作者 Seth Hobson

Mobile Android Design Skill.

用于移动应用设计的 Claude Code 和 Codex skill:使用 Material Design 3 和 Jetpack Compose 的原生 Android UI。

  • Mobile Apps
  • UI 代码
wshobson/agents · plugins/ui-design/skills/mobile-android-design/SKILL.mdSKILL.md
--- name: mobile-android-design description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices
前言和章节标题读取自上游文件,2026-09-14 · 完整 3,797 字符

01 功能说明

mobile-android-design Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

该 skill 教 Agent 使用 Material Design 3(Material You)和 Jetpack Compose 构建原生 Android 应用。内容涵盖实现 Compose UI 布局、使用 Navigation Compose 的 Android 导航模式、适配手机、平板与折叠屏的自适应布局、带动态色彩的 Material 3 主题、无障碍的 Android 界面,以及 Android 特有的手势与交互。

该 skill 专注于创建能与 Android 生态无缝集成的现代自适应 Android 应用,遵循 Google 的 Material Design 指南,并处理不同的屏幕配置。

UI 代码
查看示例提示词 ↗

工作方式

  1. 01
    应用 Material 3 主题

    通过 MaterialTheme.colorScheme 访问颜色,以自动支持深色模式,并在 Android 12+ 上启用动态色彩以实现个性化。

  2. 02
    构建 Compose UI 组件

    使用 Jetpack Compose 模式创建组件(composable),并采用恰当的状态提升,使组件可复用、可测试。

  3. 03
    实现自适应布局

    使用 WindowSizeClass 创建能够在手机、平板和折叠设备间自适应的响应式设计。

  4. 04
    添加无障碍支持

    为所有交互元素提供 contentDescription,并确保触控目标至少为 48dp,以符合无障碍合规要求。

  5. 05
    正确处理状态

    恰当使用 remember 和 rememberSaveable,防止在配置变更期间发生状态丢失。

02 找到适合场景

何时使用 mobile-android-design Skill

在 Claude Code 或 Codex 中使用 mobile-android-design skill 来完成此类移动应用设计工作。适用范围和限制来自该 skill 自己的文件。

适合场景

  • 设计遵循 Material Design 3 指南的 Android 应用界面
  • 为原生 Android 应用构建 Jetpack Compose UI 与布局
  • 创建可在手机、平板和折叠设备间通用的自适应布局
  • 使用 Navigation Compose 实现 Android 导航模式
  • 构建具备恰当触控目标与内容描述的无障碍 Android 界面

    03 Skill 内部

    mobile-android-design skill 为 Claude Code 和 Codex 提供的规则

    1 SKILL.md 为 Agent 设定的具体指令、默认值和限制 —— 文件中真正影响结果的部分。

    1. 长列表使用 LazyColumn

      在显示长的可滚动列表时,使用 LazyColumn 而非 Column,以避免性能问题。

    04 投入使用

    在 Claude Code 或 Codex 中安装 mobile-android-design

    一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

    将 mobile-android-design 添加到 Claude Code、Codex 或你的 Agent

    在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

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

    针对 plugins/ui-design/skills/mobile-android-design/SKILL.md 的通用 skills CLI 形式;具体仓库可能有自己的路径说明。

    给 Skill 第一个移动应用设计任务

    按 skill 自身的术语撰写;把括号中的部分换成你的内容。

    Starter prompt
    Build a product listing screen for [app name] using Jetpack Compose with Material Design 3. The screen should display a list of [items] with thumbnails, titles, and prices. Use adaptive layout with WindowSizeClass to show a single column on phones and a two-column grid on tablets. Each item card should navigate to a detail screen when tapped. Include proper state hoisting and accessibility support with content descriptions.

    来源:依据 SKILL.md,按 skill 自身的术语撰写。

    检查首次结果

    在接受输出之前,在记录和文件中查找以下内容:

    • 结果以 UI 代码形式交付,如此 skill 的目录中所列。
    • Agent 在生成结果之前,会在其计划或输出记录中提及 mobile-android-design skill。
    • 您自己的内容、名称和数字在输出中保持不变。

    在 OpenDesign 中,通过其 SKILL.md 链接导入 mobile-android-design:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

    05 开源、可追溯

    来源、许可与验证

    本页面事实的来源,以及最后检查时间。

    Repository
    github.com/wshobson/agents 分支 main
    Skill 文件
    plugins/ui-design/skills/mobile-android-design/SKILL.md 验证时记录的内容校验和;提交 4236bb9
    License
    MIT 来自 LICENSE。
    仓库星标数
    39,635 GitHub 快照数据采集于 2026-09-14,来源于整个 wshobson/agents 仓库,该仓库在此目录中包含 18 个 skill。这不是 mobile-android-design 的评分或使用次数。
    已由 OpenDesign 验证
    2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

    SKILL.md 内部

    1. 何时使用此 skill列出 Material Design 3、Compose UI、导航、自适应布局、主题和无障碍相关场景
    2. 核心概念由于篇幅限制,详细技术内容已移至 references/details.md
    3. 快速上手组件提供带有 Material Design 3 样式的 ItemListCard 完整 Compose 代码示例
    4. 最佳实践涵盖主题、动态色彩、布局、无障碍、状态和预览的八条具体规则
    5. 常见问题六个常见问题:重组、状态丢失、性能、主题泄漏、导航和内存泄漏
    Skill 自身的描述
    "掌握 Material Design 3 和 Jetpack Compose 模式,用于构建原生 Android 应用。在设计 Android 界面、实现 Compose UI 或遵循 Google 的 Material Design 指南时使用。"

    SKILL.md 文件的 Front-matter 描述。完整文件约 3,797 个字符。在 GitHub 上阅读完整文件。

    移动端 Android 设计

    在真实的移动应用设计任务上运行 mobile-android-design。

    下载 OpenDesign,从其 SKILL.md 链接导入 mobile-android-design,粘贴上面的提示词,并在生成结果前阅读计划。

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

    OpenDesign 桌面客户端

    一套设计系统,让每一次创作都保持品牌一致

    在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

    • 覆盖网页、PPT、原型、数据看板、图像与视频
    • 140+ 设计系统,以及完整模板与技能库
    • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
    免费下载

    支持 macOS 与 Windows