mcpField
M
mobile-app-design

mobile-app-design

github.com/podo设计与 UI29186 次安装1 天前更新
代码仓库

关于 mobile-app-design

mobile-app-design 是面向跨平台移动 UI/UX 决策的设计技能，涵盖 iOS、Android、无障碍、React Native、触控尺寸、拇指操作区域及自适应布局。

主要功能

  1. 01iOS 人机界面指南
  2. 02Android Material 3
  3. 03移动无障碍指导
  4. 04React Native 实践
  5. 05触控目标与拇指区域
  6. 06手机和平板自适应布局

适用场景

  1. 01评审跨平台移动布局
  2. 02检查移动无障碍设计
  3. 03确定触控目标尺寸
  4. 04规划手机和平板适配

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill mobile-app-design

安装后在 Claude Code 中输入/mobile-app-design确认已加载。

附带文件stub.yaml

详细介绍

移动应用设计

目录条目 — 完整技能：awesome-skills/mobile-app-design

决策树

  1. 是否已安装完整技能？ 检查此位置的技能是否仍包含 das: 块：

    • 全局：grep -q "^das:" ~/.agents/skills/mobile-app-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 项目：grep -q "^das:" .agents/skills/mobile-app-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 不含 das: 块 → 已安装完整技能，调用该技能并继续
    • 存在 das: 块 → 前往第 2 步

  2. 检测范围，然后安装：

    检测范围：

    [ -e ~/.agents/skills/mobile-app-design ] && echo "global" || echo "project"

    全局（使用 -g 安装）：

    npx skills add awesome-skills/mobile-app-design --skill mobile-app-design -g -y

    项目（不使用 -g 安装）：

    npx skills add awesome-skills/mobile-app-design --skill mobile-app-design -y

    Claude Code： 将任一命令作为以 ! 开头的聊天消息发送，即可在不离开对话的情况下运行该命令。

安装后调用

  • 技能名称：mobile-app-design
  • 触发词：“移动应用设计”、“iOS 设计”、“Android 设计”、“触控目标”、“拇指操作区域”

功能

提供 26,000 多字的移动 UI/UX 设计指南，涵盖 Apple iOS 人机界面指南、Android Material 3、WCAG 移动端无障碍规范、React Native 实现最佳实践、正确的触控目标尺寸、拇指操作区域的人体工学设计，以及适用于手机和平板电脑的自适应布局模式。适用于任何跨平台移动设计决策。

不适用场景

  • 仅涉及 Apple HIG 的工作——使用 apple-hig-skills
  • SwiftUI 专属实现——使用 swiftui-patterns
  • 专业移动 UI 设计技巧——使用 mobile-app-ui-design

评论

支持 Markdown