33a - AI 辅助移动端开发概览

┌─────────────────────────────────────────────────────────────────┐
│                    AI 辅助移动端开发决策树                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  你的项目需要什么？                                               │
│  │                                                              │
│  ├─ 快速 MVP / 验证想法                                          │
│  │  └─→ AI 应用构建器（Bolt.new + Expo / Replit）                │
│  │      技术栈：React Native + Expo                              │
│  │      AI 优势：★★★★★ 对话即应用，分钟级交付                     │
│  │                                                              │
│  ├─ 标准商业应用（CRUD / 社交 / 电商）                             │
│  │  ├─ 团队熟悉 React → React Native + Expo                     │
│  │  │   AI 优势：★★★★☆ 生态成熟，AI 训练数据丰富                  │
│  │  └─ 团队熟悉 Dart → Flutter                                   │
│  │      AI 优势：★★★★☆ Cursor + Flutter 规则文件效果优秀           │
│  │                                                              │
│  ├─ 深度平台集成（ARKit / HealthKit / Widgets）                   │
│  │  ├─ iOS → Swift + SwiftUI（Xcode 26 + Claude Agent）          │
│  │  │   AI 优势：★★★★☆ Xcode 原生 AI，平台 API 理解深入           │
│  │  └─ Android → Kotlin + Jetpack Compose（Android Studio + Gemini）│
│  │      AI 优势：★★★★☆ Gemini 原生集成，Compose 预览自动生成       │
│  │                                                              │
│  └─ 高性能 / 游戏 / 底层硬件                                      │
│     └─→ 原生开发（Swift / Kotlin / C++）                          │
│         AI 优势：★★★☆☆ AI 对底层优化的理解仍有限                   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

❌ 错误：请生成一个登录页面
✅ 正确：请为 React Native + Expo SDK 54 生成一个登录页面，
        支持 iOS 18+ 和 Android 14+，使用 expo-router 导航，
        包含 Apple Sign In（iOS）和 Google Sign In（双平台）

❌ 错误：请生成一个设置页面
✅ 正确：请生成一个设置页面，iOS 端遵循 Human Interface Guidelines
        使用 SF Symbols 图标和系统分组列表样式，Android 端遵循
        Material Design 3 使用 Material Icons 和 Preference 布局

❌ 错误：请生成一个数据列表
✅ 正确：请生成一个数据列表，使用 FlatList 虚拟化渲染，
        支持下拉刷新（RefreshControl）、上拉加载更多（onEndReached），
        列表项支持左滑删除（Swipeable），长按显示操作菜单

❌ 错误：请生成一个图片上传功能
✅ 正确：请生成一个图片上传功能，包含：
        - 权限请求（相机/相册，附带使用说明）
        - 图片选择（expo-image-picker，支持多选）
        - 图片压缩（上传前压缩到 1MB 以内）
        - 上传进度显示（带取消功能）
        - 网络中断时的重试机制
        - 后台上传支持（expo-background-fetch）

┌──────────────────────────────────────────────────────────────┐
│              AI 辅助 React Native 开发工作流                    │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  1. 项目初始化                                                │
│     ├─ 快速路径：Bolt.new → 对话描述 → 生成 Expo 项目          │
│     └─ 专业路径：Claude Code / Cursor → Expo 模板 + 定制       │
│                                                              │
│  2. UI 开发                                                   │
│     ├─ 设计稿 → Figma Make → React Native 组件                │
│     ├─ 自然语言 → AI 生成组件 → Expo Go 即时预览               │
│     └─ 截图 → AI 识别 → 生成对应组件代码                       │
│                                                              │
│  3. 业务逻辑                                                  │
│     ├─ Spec 驱动：需求文档 → AI 生成 API 层 + 状态管理         │
│     ├─ 导航：AI 生成 React Navigation 配置                    │
│     └─ 数据：AI 生成 API 集成 + 离线缓存策略                   │
│                                                              │
│  4. 平台适配                                                  │
│     ├─ AI 生成 Platform.select() 条件代码                     │
│     ├─ AI 处理 iOS/Android 权限差异                           │
│     └─ AI 生成平台特定的原生模块桥接                           │
│                                                              │
│  5. 测试                                                      │
│     ├─ AI 生成 Jest 单元测试                                  │
│     ├─ AI 生成 Detox / Maestro E2E 测试                      │
│     └─ 云端真机测试（BrowserStack / pCloudy）                  │
│                                                              │
│  6. 构建与发布                                                │
│     ├─ Expo EAS Build → 云端构建 iOS/Android                  │
│     ├─ AI 辅助 App Store 元数据生成                           │
│     └─ Expo EAS Update → OTA 热更新                          │
│                                                              │
└──────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────┐
│              AI 辅助 iOS 原生开发工作流                         │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  1. Xcode 26 Coding Intelligence                             │
│     ├─ 代码补全：Swift/SwiftUI 智能补全（ChatGPT 驱动）        │
│     ├─ 代码重构：选中代码 → AI 建议重构方案                    │
│     ├─ 错误修复：编译错误 → AI 自动建议修复                    │
│     └─ 代码解释：选中代码 → AI 解释功能和逻辑                  │
│                                                              │
│  2. Xcode 26.3 Agentic 编码                                  │
│     ├─ Claude Agent：自主浏览项目 → 理解架构 → 编写代码        │
│     ├─ OpenAI Codex：自主执行多步骤编码任务                    │
│     ├─ 自主测试：AI 编写并运行 XCTest 测试                    │
│     └─ 自主级别控制：开发者可设置 AI 自主修改代码的权限         │
│                                                              │
│  3. 外部 AI 工具补充                                          │
│     ├─ Cursor：复杂重构、多文件编辑（导出后在 Xcode 构建）     │
│     ├─ Claude Code：CLI 驱动的大规模代码修改                   │
│     └─ Copilot for Xcode：行级补全插件                        │
│                                                              │
└──────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────┐
│              AI 辅助 Android 原生开发工作流                     │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  1. Android Studio Gemini AI 助手                             │
│     ├─ 代码补全：Kotlin/Jetpack Compose 智能补全               │
│     ├─ Compose 预览自动生成：AI 自动为 Composable 生成预览     │
│     ├─ 自然语言 UI 转换：描述需求 → AI 修改 Compose UI 代码    │
│     ├─ 上下文感知：附加图片和项目文件到 prompt 获取更精准响应   │
│     └─ App Links Assistant：AI 辅助生成 Deep Link 处理代码     │
│                                                              │
│  2. Journeys 自动化测试（预览）                                │
│     ├─ 自然语言描述测试场景 → AI 自动执行 UI 测试              │
│     ├─ 跨设备测试：在多个虚拟设备上并行运行                    │
│     └─ 自愈测试：UI 变更后 AI 自动调整测试步骤                 │
│                                                              │
│  3. Version Upgrade Agent（预览）                              │
│     ├─ AI 自动分析项目依赖 → 建议升级路径                      │
│     ├─ 自动处理 API 变更和弃用                                │
│     └─ 生成迁移代码和测试                                     │
│                                                              │
└──────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────┐
│              AI 辅助 Flutter 开发工作流                         │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  1. 环境配置                                                  │
│     ├─ Cursor + Flutter 专用规则文件（.cursorrules）           │
│     │   - Widget 模式约束（StatelessWidget vs StatefulWidget） │
│     │   - 状态管理约定（Riverpod / Bloc / Provider）           │
│     │   - 设计系统引用（@workspace 包含主题文件）               │
│     └─ 或 FlutterFlow 可视化构建 + AI 辅助                    │
│                                                              │
│  2. UI 开发                                                   │
│     ├─ 组件规格描述 → AI 生成 Widget 树                       │
│     ├─ Flutter Hot Reload 即时预览                            │
│     ├─ AI 生成自适应布局（LayoutBuilder + MediaQuery）         │
│     └─ AI 生成平台自适应组件（Material / Cupertino）           │
│                                                              │
│  3. 后端集成                                                  │
│     ├─ Google AI Dart SDK（Gemini API 集成）                  │
│     ├─ Firebase 集成（Auth / Firestore / Storage）            │
│     └─ AI 生成 Repository 模式 + 离线缓存                     │
│                                                              │
│  4. 测试                                                      │
│     ├─ AI 生成 Widget 测试                                    │
│     ├─ AI 生成 Integration 测试                               │
│     └─ Golden 测试（截图对比）                                 │
│                                                              │
└──────────────────────────────────────────────────────────────┘

你是一个移动端开发专家。请为 [iOS/Android/跨平台] 生成以下功能的代码：

## 功能需求
[功能描述]

## 技术约束
- 目标平台：[iOS 18+ / Android 14+ / 双平台]
- 技术栈：[SwiftUI / Jetpack Compose / React Native + Expo / Flutter]
- 最低支持版本：[版本号]
- 需要的权限：[相机/位置/通知/...]

## 平台特定要求
- iOS：遵循 Human Interface Guidelines，使用 SF Symbols
- Android：遵循 Material Design 3，使用 Material Icons
- 跨平台：使用 Platform.select() 处理差异，共享 80%+ 代码

## 代码规范
- 使用 [状态管理方案]
- 错误处理使用 [Result 类型 / try-catch / Either]
- 包含完整的 TypeScript/Swift/Kotlin 类型定义

## Steering 规则示例：移动端性能约束

### 内存管理
- 图片加载必须使用懒加载和缓存（React Native: FastImage; Flutter: cached_network_image; iOS: SDWebImage; Android: Coil）
- 长列表必须使用虚拟化（React Native: FlatList; Flutter: ListView.builder; iOS: LazyVStack; Android: LazyColumn）
- 避免在组件中创建大型对象，使用 useMemo/useCallback 或等效机制

### 电池优化
- 位置服务使用 significant-change 模式而非持续定位
- 后台任务使用 BackgroundFetch 而非持续运行
- 网络请求使用批量处理而非频繁小请求

### 网络优化
- 所有 API 请求必须有超时设置（默认 30 秒）
- 实现离线优先策略：先读缓存，后台同步
- 图片使用 WebP 格式，支持多分辨率（@1x/@2x/@3x）

### 包体积
- 禁止引入超过 500KB 的第三方库而不经过审查
- 使用 tree-shaking 和代码分割
- 图片资源使用压缩工具处理

请审查以下移动应用代码，检查是否存在 App Store / Google Play 审核风险：

## 检查清单
1. 隐私合规
   - [ ] 所有权限请求都有明确的使用说明
   - [ ] 隐私政策链接可访问
   - [ ] 数据收集声明与实际行为一致
   - [ ] 提供账号删除功能

2. 安全合规
   - [ ] 所有网络请求使用 HTTPS
   - [ ] 敏感数据使用 Keychain/EncryptedSharedPreferences 存储
   - [ ] 没有硬编码的 API 密钥或密码

3. 平台合规
   - [ ] iOS：ATS 配置正确，无私有 API 调用
   - [ ] Android：targetSdkVersion 满足最新要求
   - [ ] 无障碍标签完整

4. 内容合规
   - [ ] 用户生成内容有审核机制
   - [ ] 年龄分级设置正确

请列出所有发现的问题和修复建议。

请为 [React Native / Flutter / SwiftUI] 应用实现离线优先架构：

## 需求
- 应用在无网络时仍可正常使用核心功能
- 网络恢复后自动同步本地变更
- 冲突解决策略：[最后写入胜出 / 手动合并 / 服务端优先]

## 技术方案
1. 本地存储：[SQLite / Realm / AsyncStorage / Core Data]
2. 同步策略：[增量同步 / 全量同步 / 事件溯源]
3. 冲突检测：[版本号 / 时间戳 / 向量时钟]
4. 队列管理：离线操作队列 + 重试机制

## 约束
- 本地数据库大小限制：[X] MB
- 同步频率：[实时 / 每 N 分钟 / 手动触发]
- 需要处理的数据类型：[文本 / 图片 / 文件]

请对以下移动应用代码进行安全审查：

## 审查范围
1. 数据存储安全
   - 敏感数据是否使用加密存储？
   - API 密钥是否硬编码在客户端？
   - 用户凭证存储是否使用 Keychain/EncryptedSharedPreferences？

2. 网络安全
   - 所有请求是否使用 HTTPS？
   - 是否实现了证书固定？
   - API 响应是否验证了完整性？

3. 认证安全
   - Token 刷新机制是否正确？
   - 会话超时是否合理？
   - 生物识别是否正确实现？

4. 代码安全
   - 是否有调试代码残留？
   - 日志是否泄露敏感信息？
   - 是否启用了代码混淆？

请列出所有安全风险，按严重程度排序（高/中/低），并提供修复代码。

┌──────────────────────────────────────────────────────────────┐
│              AI 辅助移动端测试金字塔                            │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│                    ┌─────────┐                               │
│                    │ 手动探索 │  ← AI 辅助：生成测试场景建议    │
│                   ┌┴─────────┴┐                              │
│                   │  E2E 测试  │ ← AI 生成：Maestro/Detox 脚本│
│                  ┌┴───────────┴┐                             │
│                  │  集成测试    │ ← AI 生成：API + 数据库测试   │
│                 ┌┴─────────────┴┐                            │
│                 │  组件/Widget   │ ← AI 生成：渲染 + 交互测试  │
│                ┌┴───────────────┴┐                           │
│                │    单元测试      │ ← AI 生成：逻辑 + 工具函数  │
│                └─────────────────┘                           │
│                                                              │
│  + 跨设备视觉回归测试（AI 驱动）                               │
│  + 性能基准测试（AI 分析）                                     │
│  + App Store 合规检查（AI 审查）                               │
│                                                              │
└──────────────────────────────────────────────────────────────┘

请为以下 [React Native / Flutter / SwiftUI / Jetpack Compose] 组件生成完整的测试套件：

## 组件信息
- 组件名称：[名称]
- 功能描述：[描述]
- 依赖的外部服务：[API / 数据库 / 设备功能]

## 测试要求
1. 单元测试：覆盖核心业务逻辑，至少 [N] 个测试用例
2. 组件测试：验证渲染、交互、状态变化
3. 平台特定测试：验证 iOS/Android 差异行为
4. 边界条件：空数据、网络错误、权限拒绝、设备旋转

## 测试框架
- 单元测试：[Jest / flutter_test / XCTest / JUnit]
- E2E 测试：[Maestro / Detox / XCUITest / Espresso]
- Mock 策略：[最小化 mock，优先使用真实依赖]

## 输出格式
- 每个测试文件包含清晰的 describe/it 结构
- 测试名称使用中文描述行为
- 包含 setup/teardown 逻辑

# 移动端开发 Steering 规则
 
## 目标平台
- 主要平台：[iOS / Android / 双平台]
- 技术栈：[React Native + Expo / Flutter / SwiftUI / Jetpack Compose]
- 最低支持版本：iOS [版本] / Android API [级别]
 
## 代码生成规则
 
### 通用规则
- 所有 UI 组件必须支持 Dark Mode
- 所有可交互元素必须有 accessibilityLabel
- 所有网络请求必须使用 HTTPS
- 敏感数据必须使用安全存储（Keychain / EncryptedSharedPreferences）
- 禁止在主线程执行耗时操作（网络请求、文件 I/O、数据库查询）
 
### React Native / Expo 规则
- 使用 Expo SDK 的托管 API 而非裸 React Native 模块
- 长列表使用 FlatList 而非 ScrollView + map
- 图片使用 expo-image 而非 Image 组件
- 导航使用 expo-router 而非手动配置 React Navigation
- 状态管理使用 [Zustand / Jotai / Redux Toolkit]
 
### Flutter 规则
- 使用 const 构造函数优化 Widget 重建
- 状态管理使用 [Riverpod / Bloc / Provider]
- 使用 ListView.builder 而非 Column + children
- 平台自适应使用 Platform.isIOS / Platform.isAndroid
- 主题使用 ThemeData 统一管理
 
### iOS 原生规则
- 使用 SwiftUI 而非 UIKit（除非需要 UIKit 特有功能）
- 遵循 Human Interface Guidelines
- 使用 SF Symbols 而非自定义图标
- 使用 async/await 而非 completion handler
- 使用 @Observable 宏而非 ObservableObject（iOS 17+）
 
### Android 原生规则
- 使用 Jetpack Compose 而非 XML 布局
- 遵循 Material Design 3 规范
- 使用 Kotlin Coroutines 而非 AsyncTask
- 使用 Hilt 进行依赖注入
- 使用 Room 进行本地数据库操作
 
## 禁止事项
- 禁止硬编码 API 密钥、密码或敏感信息
- 禁止使用已弃用的 API
- 禁止请求不必要的设备权限
- 禁止在 ScrollView 中嵌套 FlatList/ListView
- 禁止使用 any 类型（TypeScript）或 dynamic 类型（Dart）
- 禁止忽略平台差异（必须处理 iOS/Android 行为不同的情况）

Prompt（在 Bolt.new 中）：

创建一个健身追踪移动应用，使用 React Native + Expo，包含以下功能：

1. 首页：今日运动概览（步数、卡路里、运动时长），使用圆形进度条
2. 记录页：选择运动类型（跑步/骑行/游泳/力量训练），开始/暂停/结束计时
3. 统计页：周/月运动数据图表（使用 react-native-chart-kit）
4. 个人页：头像、昵称、目标设置

设计风格：
- 深色主题为主，支持浅色模式切换
- 使用渐变色强调运动数据
- 底部 Tab 导航（4 个 Tab）
- 遵循 iOS 和 Android 各自的设计规范

技术要求：
- 使用 expo-router 进行导航
- 使用 Zustand 进行状态管理
- 使用 AsyncStorage 进行本地数据持久化
- 所有组件支持 Dark Mode

# .cursorrules（FitTrack 项目）
 
## 项目信息
- 技术栈：React Native + Expo SDK 54 + TypeScript
- 状态管理：Zustand
- 导航：expo-router
- 样式：StyleSheet + 自定义主题系统
 
## 代码规范
- 所有组件使用 TypeScript 严格模式
- 组件文件结构：types.ts → hooks.ts → component.tsx → styles.ts
- 使用 React.memo 包裹纯展示组件
- 长列表使用 FlashList 而非 FlatList
- 图片使用 expo-image 并设置 placeholder
 
## 移动端约束
- 所有可点击区域最小 44x44pt（iOS HIG 要求）
- 支持 Dynamic Type（iOS）和 Font Scale（Android）
- 所有动画使用 react-native-reanimated（60fps）
- 网络请求使用 react-query + 离线缓存

Prompt：

为 FitTrack 应用生成 Maestro E2E 测试脚本，覆盖以下用户流程：

1. 首次启动 → 引导页 → 设置目标 → 进入首页
2. 记录一次跑步运动 → 开始 → 暂停 → 继续 → 结束 → 查看记录
3. 查看周统计 → 切换到月统计 → 验证图表显示
4. 修改个人信息 → 切换深色/浅色模式

每个测试脚本包含：
- 清晰的步骤描述
- 等待条件（避免 flaky test）
- 截图断言点

# tests/record-workout.yaml
appId: com.fittrack.app
---
- launchApp
- tapOn: "记录"
- tapOn: "跑步"
- assertVisible: "开始运动"
- tapOn: "开始运动"
- wait: 3000
- assertVisible: "暂停"
- tapOn: "暂停"
- assertVisible: "继续"
- tapOn: "继续"
- wait: 2000
- tapOn: "结束运动"
- assertVisible: "运动记录已保存"
- takeScreenshot: "workout-completed"

Prompt：

为 FitTrack 配置 Expo EAS 构建和发布流程：

1. eas.json 配置（development / preview / production 三个 profile）
2. app.json 配置（iOS Bundle ID、Android Package Name、版本号、图标、启动屏）
3. GitHub Actions CI/CD（PR 触发 preview 构建，main 分支触发 production 构建）
4. App Store Connect 和 Google Play Console 的元数据（标题、描述、关键词、截图尺寸要求）

注意：
- iOS 需要配置 Apple Developer 证书和 Provisioning Profile
- Android 需要配置签名密钥
- 两个平台都需要隐私政策 URL