如何利用 AI 构建适配移动端的触控优先设计系统 #

解决 AI 在设计移动端应用时容易陷入的“缩小版桌面端”误区，通过强制性的可行性评估（MFRI）和触控心理学准则，确保产出的 UI 方案真正符合移动端使用场景。

为什么需要这个技能 #

移动端并非简单的“小屏幕桌面端”。由于手指触控（而非精确鼠标）、电池电量限制、网络环境不稳定以及用户碎片化注意力的特点，移动端设计需要一套完全不同的底层逻辑。

AI 默认生成的方案往往倾向于通用 Web 模式，容易出现触控区域过小、忽略离线状态、过度依赖 JS 线程导致卡顿等问题。本技能通过建立一套强制性的决策矩阵和反模式清单，约束 AI 在执行任务前必须先考虑“限制”，而非先考虑“美学”。

适用场景 #

• 在设计或开发 iOS/Android 应用的界面与交互流时。
• 需要评估某个移动端功能在性能、触控和离线场景下的可行性。
• 为 React Native 或 Flutter 项目制定性能优化方案。
• 审核 AI 生成的 UI 代码是否符合平台原生规范（如 iOS 的 SF Pro 字体与 Android 的 Roboto 字体）。

核心工作流 #

1. 移动端可行性与风险评估 (MFRI) #

在开始任何设计前，通过五个维度（平台明确度、交互复杂度、性能风险、离线依赖、无障碍风险）进行打分。

• 公式：MFRI = (平台明确度 + 无障碍准备) − (交互复杂度 + 性能风险 + 离线依赖)
• 决策：得分 $\ge 6$ 为安全；$<0$ 则必须重新设计，禁止直接进入实现阶段。

2. 强制性前置询问 #

AI 必须在执行前确认以下关键点：

• 目标平台：iOS、Android 还是双端？
• 技术栈：React Native, Flutter 还是原生？
• 导航模式：标签页 (Tabs)、堆栈 (Stack) 还是抽屉 (Drawer)？
• 设备范围：仅手机还是包含平板？

3. 避坑反模式清单 (Hard Bans) #

• 性能禁区：严禁在长列表使用 ScrollView，必须使用 FlatList 或 ListView.builder；严禁在生产环境保留 console.log。
• 触控禁区：点击区域严禁小于 44-48px；严禁设计仅依赖手势而无按钮退路的交互。
• 安全禁区：严禁将 Token 存放在不安全的 AsyncStorage 中，必须使用 SecureStore 或 Keychain。

4. 平台差异化处理 #

根据“统一逻辑，区分表现”原则，业务逻辑和 API 保持一致，但导航行为、手势、图标（SF Symbols vs Material Icons）必须根据平台特性进行分叉处理。

下载和安装 #

下载 mobile-design 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐