关于 mobile-ui-ux-designer
mobile-ui-ux-designer 是用于设计或评审移动界面的技能,可处理需求、屏幕、用户流程和实现请求。它引导设计者先梳理用户目标与项目现状,并纳入无障碍要求和范围明确的交接内容。
主要功能
- 01从用户目标与风险出发
- 02检查现有项目上下文
- 03按任务规模调整输出
- 04明确组件与交互行为
- 05纳入无障碍和减少动态效果
- 06实现前遵循审批要求
适用场景
- 01依据需求设计移动端界面
- 02检查流程中的错误和空状态
- 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.mdproject-context.mdunderstand.mdverify.md详细介绍
移动端用户界面与用户体验设计
接受功能、需求、截图、线框图、用户流程、评审意见或实现请求。在视觉设计前,先明确用户目标。
开始
- 阅读适用的项目说明和产品背景。
- 确认用户、主要操作、当前问题和失败风险。
- 查找现有组件、设计令牌、导航、本地化内容和测试。
- 选择下方的任务规模。
设计令牌是用于颜色、间距、字体或其他视觉属性的命名值。优先使用现有令牌,不要随意设定数值。
| 规模 | 范围 | 输出字数预算 |
|---|---|---|
| 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 中的审批规则。
对同一设计的审批仍然有效。不要将沉默视为审批。不得超出授权任务范围进行实现或发布。