SKILL.md
readonly只读
name
mobile-design
description
（移动优先 · 触控优先 · 尊重平台）
移动设计系统
（移动优先 · 触控优先 · 尊重平台）
理念： 触控优先。省电优先。尊重平台。支持离线。
核心法则： 移动端不是缩小版的桌面端。
操作规则： 先考虑约束，再考虑美观。
此技能旨在防止桌面思维、AI默认值和危险假设，用于设计或构建移动应用。
1. 移动可行性及风险指数（MFRI）
在设计或实现任何移动功能或界面之前，评估可行性。
MFRI 维度（1–5）
| 维度 | 问题 |
|---|---|
| 平台清晰度 | 目标平台（iOS / Android / 两者）是否明确？ |
| 交互复杂度 | 手势、流程或导航有多复杂？ |
| 性能风险 | 是否涉及列表、动画、大量状态或媒体？ |
| 离线依赖 | 无网络时功能是否中断或降级？ |
| 无障碍风险 | 是否影响运动、视觉或认知无障碍？ |
评分公式
MFRI = (平台清晰度 + 无障碍准备度)
− (交互复杂度 + 性能风险 + 离线依赖)
范围： -10 → +10
解读
| MFRI | 含义 | 所需操作 |
|---|---|---|
| 6–10 | 安全 | 正常进行 |
| 3–5 | 中等 | 增加性能和UX验证 |
| 0–2 | 有风险 | 简化交互或架构 |
| < 0 | 危险 | 实现前重新设计 |
2. 开始任何工作前的强制思考
⛔ 停止：先问再假设（必需）
如果以下任何一项未明确说明，你必须在继续之前提问：
| 方面 | 问题 | 原因 |
|---|---|---|
| 平台 | iOS、Android 还是两者？ | 影响导航、手势、排版 |
| 框架 | React Native、Flutter 还是原生？ | 决定性能和模式 |
| 导航 | 标签、堆栈、抽屉？ | 核心UX架构 |
| 离线 | 是否必须离线工作？ | 数据和同步策略 |
| 设备 | 仅手机还是也包括平板？ | 布局和密度规则 |
| 受众 | 消费者、企业、无障碍需求？ | 触控和可读性 |
🚫 永远不要默认使用你最喜欢的栈或模式。
3. 强制参考阅读（强制执行）
通用（始终先读）
| 文件 | 目的 | 状态 |
|---|---|---|
| mobile-design-thinking.md | 反记忆、强制上下文 | 🔴 必须首先阅读 |
| touch-psychology.md | 菲茨定律、拇指区域、手势 | 🔴 必须阅读 |
| 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 | JS线程阻塞 | 移除日志 |
| 无记忆化 | 电池和性能损耗 | React.memo / const组件 |
🚫 触控与UX罪
| ❌ 禁止 | 原因 | ✅ 始终使用 |
|---|---|---|
| 触控区域 <44–48px | 点击失败 | 最小触控目标 |
| 仅手势操作 | 排除用户 | 按钮后备 |
| 无加载状态 | 感觉像坏了 | 明确反馈 |
| 无错误恢复 | 死胡同 | 重试 + 消息 |
| 忽略平台规范 | 肌肉记忆混乱 | iOS ≠ Android |
🚫 安全罪
| ❌ 禁止 | 原因 | ✅ 始终使用 |
|---|---|---|
| 令牌存储在AsyncStorage | 易被窃取 | SecureStore / Keychain |
| 硬编码密钥 | 可逆向工程 | 环境变量 + 安全存储 |
| 无SSL证书锁定 | MITM风险 | 证书锁定 |
| 记录敏感数据 | PII泄露 | 绝不记录密钥 |
5. 平台统一与分化矩阵
统一 分化
────────────────────────── ─────────────────────────
业务逻辑 导航行为
数据模型 手势
API契约 图标
验证 排版
错误语义 选择器 / 对话框
平台默认值
| 元素 | iOS | Android |
|---|---|---|
| 字体 | SF Pro | Roboto |
| 最小触控 | 44pt | 48dp |
| 返回 | 边缘滑动 | 系统返回 |
| 面板 | 底部面板 | 对话框 / 面板 |
| 图标 | SF Symbols | Material Icons |
6. 移动端UX心理学（非可选）
菲茨定律（触控现实）
- 手指 ≠ 光标
- 精度低
- 可达性比精确性更重要
规则：
- 主要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条原则：
1.
2.
3.
我将避免的反模式：
1.
2.
❌ 无法完成 → 返回并阅读。
9. 框架决策树（标准）
需要OTA + 有Web团队 → React Native + Expo
高性能UI → Flutter
仅iOS → SwiftUI
仅Android → Compose
无正当理由不得争论。
10. 发布就绪检查清单
发布前
- [ ] 触控目标 ≥ 44–48px
- [ ] 离线处理
- [ ] 使用安全存储
- [ ] 列表已优化
- [ ] 日志已移除
- [ ] 在低端设备上测试
- [ ] 无障碍标签存在
- [ ] MFRI ≥ 3
11. 相关技能
- frontend-design – 视觉系统与组件
- frontend-dev-guidelines – RN/TS架构
- backend-dev-guidelines – 移动安全API
- error-tracking – 崩溃与性能遥测
最终法则：
移动用户容易分心、被打断且缺乏耐心——通常单手操作，网络差，电量低。
为这种现实设计，否则你的应用会悄然失败。
使用时机
此技能适用于执行概述中描述的工作流或操作。
限制
- 仅当任务明确符合上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家评审的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准，请停止并请求澄清。
