mobile-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile Design System

移动设计系统

(Mobile-First · Touch-First · Platform-Respectful)

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Law: Mobile is NOT a small desktop. Operating Rule: Think constraints first, aesthetics second.

This skill exists to prevent desktop-thinking, AI-defaults, and unsafe assumptions when designing or building mobile applications.

（移动优先 · 触摸优先 · 尊重平台特性）

设计理念： 触摸优先、注重续航、尊重平台、支持离线。 核心准则： 移动设备绝非缩小版桌面。 操作原则： 优先考虑限制条件，其次才是美观。

本技能旨在避免在设计或开发移动应用时陷入桌面思维、AI默认行为和不安全假设。

1. Mobile Feasibility & Risk Index (MFRI)

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

Before designing or implementing any mobile feature or screen, assess feasibility.

在设计或实现任何移动功能或界面之前，需评估其可行性。

MFRI Dimensions (1–5)

MFRI评估维度（1–5分）

Dimension	Question
Platform Clarity	Is the target platform (iOS / Android / both) explicitly defined?
Interaction Complexity	How complex are gestures, flows, or navigation?
Performance Risk	Does this involve lists, animations, heavy state, or media?
Offline Dependence	Does the feature break or degrade without network?
Accessibility Risk	Does this impact motor, visual, or cognitive accessibility?

维度	问题
平台清晰度	是否明确定义了目标平台（iOS / Android / 两者兼顾）？
交互复杂度	手势、流程或导航的复杂程度如何？
性能风险	是否涉及列表、动画、大量状态或媒体资源？
离线依赖性	无网络时该功能是否会失效或体验降级？
无障碍风险	是否会影响运动、视觉或认知障碍用户的使用体验？

Score Formula

评分公式

MFRI = (Platform Clarity + Accessibility Readiness)
       − (Interaction Complexity + Performance Risk + Offline Dependence)

Range:

-10 → +10

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

分值范围：

-10 → +10

Interpretation

结果解读

MFRI	Meaning	Required Action
6–10	Safe	Proceed normally
3–5	Moderate	Add performance + UX validation
0–2	Risky	Simplify interactions or architecture
< 0	Dangerous	Redesign before implementation

MFRI分值	含义	要求行动
6–10	安全	正常推进开发
3–5	中等风险	增加性能与UX验证环节
0–2	高风险	简化交互逻辑或架构设计
< 0	危险级	重新设计后再启动开发

2. Mandatory Thinking Before Any Work

2. 启动工作前的强制思考

⛔ STOP: Ask Before Assuming (Required)

⛔ 停止：先提问再假设（必须执行）

If any of the following are not explicitly stated, you MUST ask before proceeding:

Aspect	Question	Why
Platform	iOS, Android, or both?	Affects navigation, gestures, typography
Framework	React Native, Flutter, or native?	Determines performance and patterns
Navigation	Tabs, stack, drawer?	Core UX architecture
Offline	Must it work offline?	Data & sync strategy
Devices	Phone only or tablet too?	Layout & density rules
Audience	Consumer, enterprise, accessibility needs?	Touch & readability

🚫 Never default to your favorite stack or pattern.

如果以下任何一项未明确说明，必须先提问确认再推进：

方面	问题	原因
平台	目标平台是iOS、Android还是两者兼顾？	影响导航、手势、排版设计
框架	使用React Native、Flutter还是原生开发？	决定性能表现与设计模式
导航	采用标签栏、栈式导航还是抽屉导航？	核心UX架构
离线支持	是否必须支持离线使用？	影响数据与同步策略
设备范围	仅支持手机还是同时兼容平板？	影响布局与密度规则
用户群体	面向普通消费者、企业用户还是有无障碍需求的用户？	影响触摸目标与可读性设计

🚫 绝不能默认使用自己偏好的技术栈或设计模式。

3. Mandatory Reference Reading (Enforced)

3. 强制参考阅读（强制执行）

Universal (Always Read First)

通用类（必须优先阅读）

File	Purpose	Status
mobile-design-thinking.md	Anti-memorization, context-forcing	🔴 REQUIRED FIRST
touch-psychology.md	Fitts’ Law, thumb zones, gestures	🔴 REQUIRED
mobile-performance.md	60fps, memory, battery	🔴 REQUIRED
mobile-backend.md	Offline sync, push, APIs	🔴 REQUIRED
mobile-testing.md	Device & E2E testing	🔴 REQUIRED
mobile-debugging.md	Native vs JS debugging	🔴 REQUIRED

文件	用途	状态
mobile-design-thinking.md	打破固化思维，强化场景意识	🔴 必须优先阅读
touch-psychology.md	菲茨定律、拇指区域、手势设计	🔴 必须阅读
mobile-performance.md	60fps帧率、内存、续航优化	🔴 必须阅读
mobile-backend.md	离线同步、推送通知、API设计	🔴 必须阅读
mobile-testing.md	设备测试与端到端测试	🔴 必须阅读
mobile-debugging.md	原生与JS调试对比	🔴 必须阅读

Platform-Specific (Conditional)

平台专属类（按需阅读）

Platform	File
iOS	platform-ios.md
Android	platform-android.md
Cross-platform	BOTH above

❌ If you haven’t read the platform file, you are not allowed to design UI.

平台	文件
iOS	platform-ios.md
Android	platform-android.md
跨平台	需阅读上述两份文件

❌ 未阅读对应平台文件，不得开展UI设计工作。

4. AI Mobile Anti-Patterns (Hard Bans)

4. AI移动端反模式（严格禁止）

🚫 Performance Sins (Non-Negotiable)

🚫 性能大忌（不可协商）

❌ Never	Why	✅ Always
ScrollView for long lists	Memory explosion	FlatList / FlashList / ListView.builder
Inline renderItem	Re-renders all rows	useCallback + memo
Index as key	Reorder bugs	Stable ID
JS-thread animations	Jank	Native driver / GPU
console.log in prod	JS thread block	Strip logs
No memoization	Battery + perf drain	React.memo / const widgets

❌ 绝对禁止	原因	✅ 正确做法
为长列表使用ScrollView	内存激增	使用FlatList / FlashList / ListView.builder
内联renderItem函数	触发全量重渲染	搭配useCallback + memo使用
用索引作为key	排序时出现bug	使用稳定ID
JS线程执行动画	画面卡顿	使用原生驱动 / GPU加速
生产环境保留console.log	阻塞JS线程	移除日志
不做缓存优化	消耗电量与性能	使用React.memo / const widgets

🚫 Touch & UX Sins

🚫 触摸与UX大忌

❌ Never	Why	✅ Always
Touch <44–48px	Miss taps	Min touch target
Gesture-only action	Excludes users	Button fallback
No loading state	Feels broken	Explicit feedback
No error recovery	Dead end	Retry + message
Ignore platform norms	Muscle memory broken	iOS ≠ Android

❌ 绝对禁止	原因	✅ 正确做法
触摸目标小于44–48px	误触或无法点击	设置最小触摸目标
仅支持手势操作	排除部分用户	提供按钮备选方案
无加载状态	让用户误以为应用故障	显示明确反馈
无错误恢复机制	导致用户陷入死胡同	提供重试按钮与错误提示
忽略平台规范	打破用户肌肉记忆	区分iOS与Android设计

🚫 Security Sins

🚫 安全大忌

❌ Never	Why	✅ Always
Tokens in AsyncStorage	Easily stolen	SecureStore / Keychain
Hardcoded secrets	Reverse engineered	Env + secure storage
No SSL pinning	MITM risk	Cert pinning
Log sensitive data	PII leakage	Never log secrets

❌ 绝对禁止	原因	✅ 正确做法
在AsyncStorage中存储令牌	易被盗取	使用SecureStore / Keychain
硬编码敏感信息	易被逆向工程破解	使用环境变量 + 安全存储
不做SSL证书绑定	存在中间人攻击风险	启用证书绑定
记录敏感数据	导致个人信息泄露	绝不记录敏感信息

5. Platform Unification vs Divergence Matrix

5. 平台统一与差异化矩阵

UNIFY                          DIVERGE
──────────────────────────     ─────────────────────────
Business logic                Navigation behavior
Data models                    Gestures
API contracts                  Icons
Validation                     Typography
Error semantics                Pickers / dialogs

统一范畴                          差异化范畴
──────────────────────────     ─────────────────────────
业务逻辑                导航行为
数据模型                    手势交互
API协议                  图标设计
校验规则                     排版规范
错误语义                选择器/对话框

Platform Defaults

平台默认规范

Element	iOS	Android
Font	SF Pro	Roboto
Min touch	44pt	48dp
Back	Edge swipe	System back
Sheets	Bottom sheet	Dialog / sheet
Icons	SF Symbols	Material Icons

元素	iOS	Android
字体	SF Pro	Roboto
最小触摸目标	44pt	48dp
返回操作	边缘滑动	系统返回键
底部弹窗	Bottom sheet	Dialog / sheet
图标	SF Symbols	Material Icons

6. Mobile UX Psychology (Non-Optional)

6. 移动端UX心理学（必学内容）

Fitts’ Law (Touch Reality)

Fitts’ Law（触摸交互现实）

Finger ≠ cursor
Accuracy is low
Reach matters more than precision

Rules:

Primary CTAs live in thumb zone
Destructive actions pushed away
No hover assumptions

手指≠光标
精准度低
可及范围比精度更重要

规则：

主要CTA按钮放置在拇指舒适区
破坏性操作放在远离拇指的区域
绝不假设用户会使用悬停交互

7. Performance Doctrine

7. 性能准则

React Native (Required Pattern)

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,
  })}
/>

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 (Required Pattern)

Flutter（必用模式）

dart

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

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

```
const
```
everywhere possible
Targeted rebuilds only

dart

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

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

尽可能使用
```
const
```
修饰
仅触发针对性重渲染

8. Mandatory Mobile Checkpoint

8. 强制移动端检查点

Before writing any code, you must complete this:

🧠 MOBILE CHECKPOINT

Platform:     ___________
Framework:    ___________
Files Read:   ___________

3 Principles I Will Apply:
1.
2.
3.

Anti-Patterns I Will Avoid:
1.
2.

❌ Cannot complete → go back and read.

在编写任何代码之前，必须完成以下检查：

🧠 移动端检查点

目标平台:     ___________
使用框架:    ___________
已读文件:   ___________

将遵循的3条原则:
1.
2.
3.

将避免的反模式:
1.
2.

❌ 无法完成检查 → 返回重新阅读相关文档。

9. Framework Decision Tree (Canonical)

9. 框架决策树（标准流程）

Need OTA + web team → React Native + Expo
High-perf UI → Flutter
iOS only → SwiftUI
Android only → Compose

No debate without justification.

需要OTA更新 + 已有Web团队 → React Native + Expo
高性能UI需求 → Flutter
仅iOS平台 → SwiftUI
仅Android平台 → Compose

无合理理由不得偏离此决策。

10. Release Readiness Checklist

10. 发布就绪检查清单

Before Shipping

上线前需完成

11. Related Skills

11. 相关技能

frontend-design – Visual systems & components
frontend-dev-guidelines – RN/TS architecture
backend-dev-guidelines – Mobile-safe APIs
error-tracking – Crash & performance telemetry

Final Law: Mobile users are distracted, interrupted, and impatient—often using one hand on a bad network with low battery. Design for that reality, or your app will fail quietly.

frontend-design – 视觉系统与组件设计
frontend-dev-guidelines – RN/TS架构规范
backend-dev-guidelines – 移动端友好API设计
error-tracking – 崩溃与性能遥测

最终准则： 移动用户通常处于分心、被打断的状态，且缺乏耐心——往往单手操作、网络不佳、电量不足。 针对这种现实场景设计，否则你的应用会悄然失败。

When to Use

使用场景

This skill is applicable to execute the workflow or actions described in the overview.

本技能适用于执行概述中描述的工作流程或操作。

Limitations

局限性

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

仅当任务明确匹配上述范围时使用本技能。
不得将输出结果替代环境特定的验证、测试或专家评审。
若缺失必要输入、权限、安全边界或成功标准，请停止操作并请求澄清。