mobile-design

用途

mobile-design 是一套移动优先、触控优先、尊重平台的移动端设计与工程准则，用于在设计和构建 iOS 与 Android 应用时防止桌面思维、AI 默认套路以及不安全的假设。

其核心法则为：移动端不是缩小版桌面。操作规则是：先思考约束，再考虑美观。

主要能力

1. 移动可行性风险指数（MFRI）

在设计或实现任何移动功能或界面前，需先评估可行性。维度（1–5 分）包括：

平台清晰度：目标平台（iOS / Android / 两者）是否明确？
交互复杂度：手势、流程或导航有多复杂？
性能风险：是否涉及列表、动画、重状态或媒体？
离线依赖：无网络时功能是否会中断或退化？
无障碍风险：是否影响运动、视觉或认知无障碍？

计算公式：

MFRI = (平台清晰度 + 无障碍就绪度) − (交互复杂度 + 性能风险 + 离线依赖)

范围：-10 → +10

解读：

6–10 安全：正常进行
3–5 中等：增加性能与 UX 验证
0–2 有风险：简化交互或架构
< 0 危险：实现前重新设计

2. 工作前的强制思考

若以下任一项未被明确说明，必须先询问再继续：平台（iOS、Android 或两者）、框架（React Native、Flutter 或原生）、导航（标签、堆栈、抽屉）、离线（是否必须离线工作）、设备（仅手机还是含平板）、受众（消费者、企业、无障碍需求）。不得默认使用自己喜欢的栈或模式。

3. 强制参考阅读

通用必读（始终先读）：mobile-design-thinking.md（防死记、强制上下文）、touch-psychology.md（Fitts 定律、拇指区域、手势）、mobile-performance.md（60fps、内存、电池）、mobile-backend.md（离线同步、推送、API）、mobile-testing.md（设备与端到端测试）、mobile-debugging.md（原生与 JS 调试）。

平台特定（条件性）：iOS 读 platform-ios.md，Android 读 platform-android.md，跨平台两者都读。未阅读平台文件则不允许设计 UI。

4. AI 移动端反模式（硬性禁令）

性能类禁止项：长列表使用 ScrollView（应使用 FlatList / FlashList / ListView.builder）；内联 renderItem（应用 useCallback + memo）；以索引作 key（应用稳定 ID）；JS 线程动画（应用原生驱动 / GPU）；生产环境 console.log（应清除日志）；无 memoization（应用 React.memo / const widgets）。

触控与 UX 类禁止项：触控目标小于 44–48px（应用最小触控目标）；仅手势操作（应提供按钮回退）；无加载状态（应明确反馈）；无错误恢复（应提供重试与提示）；忽略平台规范（iOS ≠ Android）。

安全类禁止项：令牌存于 AsyncStorage（应用 SecureStore / Keychain）；硬编码密钥（应用环境变量与安全存储）；无 SSL pinning（应证书固定）；记录敏感数据（绝不记录机密）。

5. 平台统一与分化矩阵

统一：业务逻辑、数据模型、API 契约、校验、错误语义。分化：导航行为、手势、图标、排版、选择器 / 对话框。

平台默认值：iOS 使用 SF Pro、44pt 最小触控、边缘滑动返回、底部表单、SF Symbols；Android 使用 Roboto、48dp 最小触控、系统返回、对话框 / 表单、Material Icons。

6. 移动 UX 心理学

Fitts 定律：手指不同于光标，精度低，可达性比精确更重要。规则：主 CTA 放在拇指区域，破坏性操作放远，不做悬停假设。

7. 性能准则

React Native 必需模式：

const Row = React.memo(({ item }) => (
  <View><Text>{item.title}</Text></View>
));

const renderItem = useCallback(
  ({ item }) => <Row item={item} />,
  []
);

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(i) => i.id}
  getItemLayout={(_, i) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * i,
    index: i,
  })}
/>

Flutter 必需模式：

class Item extends StatelessWidget {
  const Item({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Static');
  }
}

尽可能使用 const，仅做定向重建。

8. 强制移动检查点

写任何代码前必须完成：平台、框架、已读文件，将要应用的 3 条原则，将要避免的 2 个反模式。无法完成则返回阅读。

9. 框架决策树

需要 OTA + Web 团队 → React Native + Expo；高性能 UI → Flutter；仅 iOS → SwiftUI；仅 Android → Compose。无正当理由不辩论。

10. 发布就绪检查清单

触控目标 ≥ 44–48px；已处理离线；使用安全存储；列表已优化；日志已清除；在低端设备上测试；存在无障碍标签；MFRI ≥ 3。

使用方式

该技能作为移动端设计与开发的行为准则使用，在动手前强制评估 MFRI、明确关键前提、阅读参考文档，并遵守反模式禁令与框架决策树。具体安装与调用方式资料中暂未提供。

适用场景

适用于 iOS 与 Android 应用的移动优先设计与工程，包括原生、React Native 与 Flutter 开发，尤其适合需要防范桌面思维与 AI 默认套路、重视触控体验、性能、离线与无障碍的移动项目。

限制

其强制阅读的参考文档（mobile-design-thinking.md、touch-psychology.md、mobile-performance.md、mobile-backend.md、mobile-testing.md、mobile-debugging.md、platform-ios.md、platform-android.md）的具体内容、获取方式，以及本技能的安装与调用方法，资料中暂未提供。实际收费标准、平台支持范围与效果亦未说明。