# Mobile Design

> 面向 iOS 与 Android 的移动优先设计思维与决策方法。触控交互、性能模式与平台规范。强调原则，不给固定模板。适用于 React Native、Flutter 或原生移动应用开发。

- **Type:** Skill
- **Install:** `agentstack add skill-misonl-ling-mobile-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [MisonL](https://agentstack.voostack.com/s/misonl)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [MisonL](https://github.com/MisonL)
- **Source:** https://github.com/MisonL/Ling/tree/main/.agents/skills/mobile-design
- **Website:** https://www.npmjs.com/package/@mison/ling

## Install

```sh
agentstack add skill-misonl-ling-mobile-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 移动端设计系统

> **理念：** 触控优先。关注电量。尊重平台。支持离线。  
> **核心原则：** 移动端不是缩小版桌面端。按移动约束思考，先确认平台选择。

---

##  运行时脚本

**执行以下脚本进行验证（不要阅读脚本内容，直接运行）：**

| 脚本 | 用途 | 用法 |
| --- | --- | --- |
| `scripts/mobile_audit.py` | 移动端 UX 与触控审计 | `python scripts/mobile_audit.py ` |

---

## [CRITICAL]  强制：开始工作前先阅读参考文件

** 在读完相关文件前，不要开始开发。**

### 通用文件（始终必读）

| 文件 | 内容 | 状态 |
| --- | --- | --- |
| **[mobile-design-thinking.md](mobile-design-thinking.md)** | **[WARN]  反记忆化：强制思考，避免 AI 默认套路** | **⬜ CRITICAL FIRST** |
| **[touch-psychology.md](touch-psychology.md)** | **Fitts' Law（费茨定律）、手势、触觉反馈、拇指区** | **⬜ CRITICAL** |
| **[mobile-performance.md](mobile-performance.md)** | **RN/Flutter 性能、60fps、内存** | **⬜ CRITICAL** |
| **[mobile-backend.md](mobile-backend.md)** | **推送通知、离线同步、移动端 API** | **⬜ CRITICAL** |
| **[mobile-testing.md](mobile-testing.md)** | **测试金字塔、E2E、平台差异** | **⬜ CRITICAL** |
| **[mobile-debugging.md](mobile-debugging.md)** | **原生 vs JS 调试、Flipper、Logcat** | **⬜ CRITICAL** |
| [mobile-navigation.md](mobile-navigation.md) | Tab/Stack/Drawer、深链路 | ⬜ Read |
| [mobile-typography.md](mobile-typography.md) | 系统字体、Dynamic Type、a11y | ⬜ Read |
| [mobile-color-system.md](mobile-color-system.md) | OLED、深色模式、电量意识 | ⬜ Read |
| [decision-trees.md](decision-trees.md) | 框架/状态/存储选型 | ⬜ Read |

>  **mobile-design-thinking.md 是最高优先级。** 该文件保证 AI 基于上下文思考，而不是套记忆模板。

### 平台专项文件（按目标平台阅读）

| 平台 | 文件 | 内容 | 阅读时机 |
| --- | --- | --- | --- |
| **iOS** | [platform-ios.md](platform-ios.md) | Human Interface Guidelines、SF Pro、SwiftUI 模式 | iPhone/iPad 项目 |
| **Android** | [platform-android.md](platform-android.md) | Material Design 3、Roboto、Compose 模式 | Android 项目 |
| **跨平台** | 上述两份 | 平台差异点 | React Native / Flutter |

> [CRITICAL]  **做 iOS -> 先读 platform-ios.md**  
> [CRITICAL]  **做 Android -> 先读 platform-android.md**  
> [CRITICAL]  **做跨平台 -> 两份都读，并应用条件化平台逻辑**

---

## [WARN]  强制：先问再假设（必选）

> **停止！如果用户需求是开放式的，不要默认你常用的方案。**

### 未明确时必须询问：

| 维度 | 提问 | 原因 |
| --- | --- | --- |
| **平台（Platform）** | “iOS、Android，还是双端？” | 影响所有设计决策 |
| **框架（Framework）** | “React Native、Flutter，还是原生？” | 决定实现模式与工具链 |
| **导航（Navigation）** | “Tab、Drawer，还是 Stack 导航？” | 核心 UX 架构决策 |
| **状态（State）** | “状态管理用什么？（Zustand/Redux/Riverpod/BLoC）” | 架构基础 |
| **离线（Offline）** | “是否需要离线可用？” | 决定数据策略 |
| **目标设备（Target devices）** | “仅手机，还是也要支持平板？” | 影响布局复杂度 |

###  AI 移动端反模式（YASAK LİSTESİ）

>  **以下是 AI 常见默认错误，必须避免。**

#### 性能类禁忌

| [FAIL]  禁止 | 错误原因 | [OK]  必做 |
| --- | --- | --- |
| **长列表用 ScrollView** | 一次渲染所有项，内存暴涨 | 用 `FlatList` / `FlashList` / `ListView.builder` |
| **renderItem 内联函数** | 每次渲染创建新函数，列表全量重渲染 | `useCallback` + `React.memo` |
| **缺少 keyExtractor** | 用索引做 key，重排时易错 | 使用稳定唯一 ID |
| **不写 getItemLayout** | 异步测量导致滚动抖动 | 固定高度项必须提供 |
| **到处 setState()** | 引发不必要重建 | 精准状态管理 + `const` 构造 |
| **Native driver: false** | 动画受 JS 线程阻塞 | 一律 `useNativeDriver: true` |
| **生产环境保留 console.log** | 严重阻塞 JS 线程 | 发布前清理日志 |
| **不做 React.memo/const** | 任意变化触发全量重渲染 | 列表项默认做 memo |

#### 触控/UX 禁忌

| [FAIL]  禁止 | 错误原因 | [OK]  必做 |
| --- | --- | --- |
| **点击区  触控目标最小 44-48px
-> 重要操作放在拇指区（屏幕下部）
-> 破坏性操作远离易触区域
```

### 拇指舒适区（单手使用）

```
+-----------------------------+
|      难以触达               |  (
  
    {item.title}
  
));

const renderItem = useCallback(
  ({ item }: { item: Item }) => ,
  []
);

// [OK]  正确：FlatList + 全量优化
 item.id}  // 稳定 ID，不要用索引
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
/>;
```

### Flutter 关键规则

```dart
// [OK]  正确：const 构造防止重建
class MyWidget extends StatelessWidget {
  const MyWidget({super.key}); // CONST!

  @override
  Widget build(BuildContext context) {
    return const Column( // CONST!
      children: [
        Text('Static content'),
        MyConstantWidget(),
      ],
    );
  }
}

// [OK]  正确：ValueListenableBuilder 精准更新
ValueListenableBuilder(
  valueListenable: counter,
  builder: (context, value, child) => Text('$value'),
  child: const ExpensiveWidget(), // 不会重建
)
```

### 动画性能

```
GPU 加速（快）：             CPU 受限（慢）：
+-- transform               +-- width, height
+-- opacity                 +-- top, left, right, bottom
+--（只用这些）              +-- margin, padding
                            +--（避免动画这些）
```

完整指南： [mobile-performance.md](mobile-performance.md)

---

##  检查点（移动开发前强制）

> **在写任何移动端代码之前，必须完成此检查点：**

```
 CHECKPOINT:

Platform:   [ iOS / Android / Both ]
Framework:  [ React Native / Flutter / SwiftUI / Kotlin ]
Files Read: [ List the skill files you've read ]

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

Anti-Patterns I Will Avoid:
1. _______________
2. _______________
```

**示例：**
```
 CHECKPOINT:

Platform:   iOS + Android (Cross-platform)
Framework:  React Native + Expo
Files Read: touch-psychology.md, mobile-performance.md, platform-ios.md, platform-android.md

3 Principles I Will Apply:
1. FlatList with React.memo + useCallback for all lists
2. 48px touch targets, thumb zone for primary CTAs
3. Platform-specific navigation (edge swipe iOS, back button Android)

Anti-Patterns I Will Avoid:
1. ScrollView for lists -> FlatList
2. Inline renderItem -> Memoized
3. AsyncStorage for tokens -> SecureStore
```

> [CRITICAL]  **填不出检查点？-> 回去读技能文件。**

---

##  框架决策树

```
WHAT ARE YOU BUILDING?
        |
        +-- Need OTA updates + rapid iteration + web team
        |   +-- [OK]  React Native + Expo
        |
        +-- Need pixel-perfect custom UI + performance critical
        |   +-- [OK]  Flutter
        |
        +-- Deep native features + single platform focus
        |   +-- iOS only -> SwiftUI
        |   +-- Android only -> Kotlin + Jetpack Compose
        |
        +-- Existing RN codebase + new features
        |   +-- [OK]  React Native (bare workflow)
        |
        +-- Enterprise + existing Flutter codebase
            +-- [OK]  Flutter
```

完整决策树： [decision-trees.md](decision-trees.md)

---

##  预开发检查清单

### 开始任何移动项目之前

- [ ] **平台已确认？**（iOS / Android / Both）
- [ ] **框架已选择？**（RN / Flutter / Native）
- [ ] **导航模式已确定？**（Tabs / Stack / Drawer）
- [ ] **状态管理已选择？**（Zustand / Redux / Riverpod / BLoC）
- [ ] **离线需求已明确？**
- [ ] **深链已从第一天规划？**
- [ ] **目标设备已定义？**（Phone / Tablet / Both）

### 每个页面前

- [ ] **触控目标 ≥ 44-48px？**
- [ ] **主 CTA 在拇指区？**
- [ ] **有加载态？**
- [ ] **有错误态并支持重试？**
- [ ] **考虑离线？**
- [ ] **遵循平台规范？**

### 发布前

- [ ] **已移除 console.log？**
- [ ] **敏感数据使用 SecureStore？**
- [ ] **SSL pinning 已启用？**
- [ ] **列表已优化（memo、keyExtractor）？**
- [ ] **卸载时完成内存清理？**
- [ ] **低端设备上已测试？**
- [ ] **所有交互元素均有无障碍标签？**

---

##  参考文件

需要更深入的指导时：

| 文件 | 使用时机 |
| --- | --- |
| [mobile-design-thinking.md](mobile-design-thinking.md) | **FIRST！反记忆化，强制上下文思考** |
| [touch-psychology.md](touch-psychology.md) | 触控交互、Fitts' Law、手势设计 |
| [mobile-performance.md](mobile-performance.md) | RN/Flutter 优化、60fps、内存/电量 |
| [platform-ios.md](platform-ios.md) | iOS 特定设计、HIG 规范 |
| [platform-android.md](platform-android.md) | Android 特定设计、Material Design 3 |
| [mobile-navigation.md](mobile-navigation.md) | 导航模式、深链 |
| [mobile-typography.md](mobile-typography.md) | 字体尺度、系统字体、可访问性 |
| [mobile-color-system.md](mobile-color-system.md) | OLED 优化、深色模式、电量 |
| [decision-trees.md](decision-trees.md) | 框架、状态、存储决策 |

---

> **记住：** 移动端用户更急、更易被打断、手指更不精确。按最糟糕条件设计：弱网、单手、强光、低电量。在那里可用，就能在任何地方可用。

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [MisonL](https://github.com/MisonL)
- **Source:** [MisonL/Ling](https://github.com/MisonL/Ling)
- **License:** MIT
- **Homepage:** https://www.npmjs.com/package/@mison/ling

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-misonl-ling-mobile-design
- Seller: https://agentstack.voostack.com/s/misonl
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.