ui-mobile

ui-mobile 技能概览

ui-mobile 技能的用途

ui-mobile 技能是一份面向实战的移动端 UI 构建指南，尤其适合 React Native 以及相关移动代码库。它面向需要更快、更稳地判断触控目标、对比度和移动端交互模式的贡献者，关注的是 UI 设计中的可用性决策，而不只是视觉美化。

适合谁使用

如果你正在设计或修改 iOS/Android 界面、审查移动组件库，或者把一个粗略的产品想法落到可用于移动端的 UI 上，就适合使用 ui-mobile 技能。它最适合那些需要一个可提示、可执行的无障碍与交互标准的场景，因为这些细节在普通设计提示词里很容易被漏掉。

它的不同之处

这个 repo 的立场很明确，而且只在关键处保持强约束：最小触控尺寸、WCAG 对比度要求，以及可见的交互状态规则都被当作硬性约束，而不是建议。这让 ui-mobile 在你的主要风险是“做出好看但不好用的移动 UI”时，更适合用于安装决策。

如何使用 ui-mobile 技能

安装并激活

使用项目的 skill manager 安装 ui-mobile 技能，然后把它指向你要完成的移动 UI 任务。典型的 ui-mobile 安装最适合任务足够具体的时候，例如“把这个表单重设计成更适合单手操作”或“检查这些按钮的无障碍性”。

给它正确的输入形态

最有效的输入会描述平台、屏幕场景、组件类型和约束条件。比如，不要只说“让这个 mobile UI 更好”，而是说：“优化这个 React Native 结账页，让它更适合单手操作；如果对比度允许，保留当前品牌色；并修复所有触控目标和可见性问题。” 这种详细程度能帮助 ui-mobile 技能输出真正可用的 UI Design 指导，而不是泛泛的建议。

先读对文件

先从 SKILL.md 开始，理解它强制执行的规则，再查看你的 repo 里是否还有项目提示词或相关指引。就这个仓库而言，文件树很精简，SKILL.md 是 ui-mobile 使用方式的主要事实来源；没有额外的脚本或参考目录可供依赖。

在工作流中落实这些约束

把触控目标尺寸和对比度当作布局细化之前的门槛检查。如果你要让模型生成代码，先说明平台和组件类型，再要求它验证最小点击区域、可读文本和可见的状态变化。一个好的 ui-mobile 提示词，应该同时要求输出 UI 结果，以及每一项移动端约束是如何被满足的理由。

ui-mobile 技能常见问题

ui-mobile 只适用于 React Native 吗？

不是。这个技能以 React Native 为中心，但相关规则同样适用于更广泛的 iOS/Android UI 工作。如果你的技术栈是 Flutter 或其他移动框架，ui-mobile 技能仍然能帮助你做无障碍和交互决策，只是需要把输出适配到你的框架中。

什么时候不该用这个技能？

如果你的任务是桌面优先、纯内容型，或者与交互式移动 UI 无关，就不该使用 ui-mobile。如果你想做纯品牌探索，而不想强制遵守移动可用性约束，它也不是合适的选择。

它比普通提示词更好吗？

通常是的，尤其当你担心移动可用性回归时。普通提示词可能产出外观尚可的结果，但 ui-mobile 技能会把模型往生产环境真正重要的约束上推：可触达的控件、易读的文本，以及移动端特有的可见性规则。

它适合新手吗？

适合，只要你能描述屏幕和问题。新手在一次只处理一个组件或一个页面，并提供当前 UI、目标设备行为和任何固定不变的设计 token 时，能获得最大的价值。

如何改进 ui-mobile 技能

先说最容易出问题的要求

提升最大的一步，是先讲清楚最可能失败的地方。对 ui-mobile 来说，这通常是触控目标尺寸、对比度或拥挤的布局。如果你直接说“保留设计，但把每个点击目标都做成至少 44x44，并确保文本符合 WCAG AA”，输出通常会更可执行。

提供平台级上下文

移动 UI 在 iOS 和 Android 上的表现不同，而这个技能在你明确目标平台时效果更好。像“iOS 的账户操作底部弹窗”这样的提示，会比“mobile modal”给出更好的 ui-mobile 结果，因为间距、安全区域和交互预期都更清楚。

要求检查，不只要结果

最好的 ui-mobile 结果会包含一轮自检。你可以要求它给出简短的验证清单，例如：“确认每个可交互元素都满足最小触控尺寸，识别任何对比度风险，并标出可能被键盘或系统 UI 遮住的元素。” 这样能减少你接受一个外观漂亮但脆弱的设计的概率。

针对具体失败点迭代

如果第一轮已经接近目标，但还不够好，就直接指出具体缺陷：“次要按钮太小了”“图标标签对比度太低”“这个表单单手操作不方便”。这样比再次说“提升 mobile usability”更能给 ui-mobile 技能一个明确的修正目标。