mcpField
M
mobile-ui-ux-designer

mobile-ui-ux-designer

github.com/mdrmuhaimin设计与 UI375 次安装3 周前更新
代码仓库

关于 mobile-ui-ux-designer

mobile-ui-ux-designer 是用于设计或评审移动界面的技能,可处理需求、屏幕、用户流程和实现请求。它引导设计者先梳理用户目标与项目现状,并纳入无障碍要求和范围明确的交接内容。

主要功能

  1. 01从用户目标与风险出发
  2. 02检查现有项目上下文
  3. 03按任务规模调整输出
  4. 04明确组件与交互行为
  5. 05纳入无障碍和减少动态效果
  6. 06实现前遵循审批要求

适用场景

  1. 01依据需求设计移动端界面
  2. 02检查流程中的错误和空状态
  3. 03按授权范围准备实现交接

安装

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

$npx skills add https://github.com/mdrmuhaimin/agentic-skills --skill mobile-ui-ux-designer

安装后在 Claude Code 中输入/mobile-ui-ux-designer确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
design.md
project-context.md
understand.md
verify.md

详细介绍

移动端用户界面与用户体验设计

接受功能、需求、截图、线框图、用户流程、评审意见或实现请求。在视觉设计前,先明确用户目标。

开始

  1. 阅读适用的项目说明和产品背景。
  2. 确认用户、主要操作、当前问题和失败风险。
  3. 查找现有组件、设计令牌、导航、本地化内容和测试。
  4. 选择下方的任务规模。

设计令牌是用于颜色、间距、字体或其他视觉属性的命名值。优先使用现有令牌,不要随意设定数值。

规模范围输出字数预算
LOW一处文案、组件、间距或状态变更300–600 字
MEDIUM一个屏幕、表单、底部弹层或流程步骤900–1,600 字
HIGH多个屏幕、敏感流程或设计系统工作1,800–3,500 字

如需了解背景和研究,请阅读 understand.md。如需了解设计规范和限制,请阅读 design.md。

如需评审或实现,请阅读 verify.md。通过 project-context.md 获取项目的实际值。

设计要求

确保紧凑屏幕上的关键信息和下一步操作清晰可用。说明大号文本、本地化、键盘或安全警告带来的限制。

在常规任务状态下,只设置一个主操作。对于同等重要的选项,明确说明如何选择。不要弱化合理的同级操作。

为错误、空状态、锁定和禁用状态提供明确的下一步操作。诚实说明不可用的功能。失败时保留用户输入。

明确指定具体组件、令牌用途和行为。不要使用“现代”或“高端”等模糊的设计描述。

在所有任务规模中都考虑无障碍性。尊重减少动态效果的设置。不要只用颜色或图标传达含义。

不要捏造研究结果。如果无法浏览,请说明限制。使用经过验证的本地背景信息和已知的平台限制。

合并内容重复的部分。省略与模板无关的部分。将设计和交付说明控制在所选字数预算内。

语言与决策

遵循 ASD-STE100 写作规则:使用主动语态和简单动词,统一已定义术语,不使用缩写形式或分号。

每条指令不超过 20 个单词,每条描述不超过 25 个单词。每段只讨论一个主题,且不超过六句话。

保留令牌名称、界面标签和引文原文。产品文案使用项目要求的语言地区设置。

在最终设计前,解决用户目标不明、状态无法访问、数据缺失和范围发生重大变化等问题。遵循 verify.md 中的审批规则。

对同一设计的审批仍然有效。不要将沉默视为审批。不得超出授权任务范围进行实现或发布。

评论

支持 Markdown