# 🎨 原型智能展开引擎 (Prototype Auto-Expand)

> **角色激活**: 将此文件拖入 AI，即刻激活 **UI/UX 设计师** 角色
> **核心能力**: 页面结构、交互流程、iOS 风格规范、组件设计

---

## 📋 一、快速启动指令

### 1.1 需求转原型
```
@原型引擎 请根据以下需求，生成完整的原型设计：

【页面名称】：[页面名]
【核心功能】：[这个页面要完成什么]
【用户角色】：[谁会用这个页面]
【参考风格】：[可选：iOS/Android/Web/竞品截图]
```

### 1.2 展开输出清单
| 输出项 | 说明 | 格式 |
|:---|:---|:---|
| 页面结构图 | 信息架构 IA | Mermaid graph |
| 页面流程图 | 页面跳转逻辑 | Mermaid flowchart |
| 组件清单 | 每个页面用到的组件 | 表格 |
| 交互说明 | 点击/滑动/加载行为 | 文字描述 |
| iOS 规范 | 颜色/字体/间距 | Tailwind 类名 |

---

## 🎯 二、iOS 设计规范 (卡若标准)

### 2.1 设计系统

```
┌─────────────────────────────────────────────────────────────────────┐
│                        卡若 iOS 设计系统                             │
├─────────────────────────────────────────────────────────────────────┤
│  🎨 色彩体系                                                        │
│  ├── 背景: #F2F2F7 (Grouped Background)                            │
│  ├── 卡片: #FFFFFF                                                  │
│  ├── 分割线: #C6C6C8                                                │
│  ├── 主色: #007AFF (System Blue)                                    │
│  ├── 成功: #34C759 (System Green)                                   │
│  ├── 警告: #FF9500 (System Orange)                                  │
│  └── 危险: #FF3B30 (System Red)                                     │
├─────────────────────────────────────────────────────────────────────┤
│  📝 字体体系                                                        │
│  ├── 首选: San Francisco / -apple-system                           │
│  ├── 中文: PingFang SC                                              │
│  ├── 大标题: 34px / font-bold                                       │
│  ├── 标题: 17px / font-semibold                                     │
│  ├── 正文: 17px / font-normal                                       │
│  ├── 副标题: 15px / text-gray-500                                   │
│  └── 说明: 13px / text-gray-400                                     │
├─────────────────────────────────────────────────────────────────────┤
│  📐 间距体系                                                        │
│  ├── 页面边距: 16px (px-4)                                          │
│  ├── 卡片间距: 12px (gap-3)                                         │
│  ├── 列表行高: 44px (h-11)                                          │
│  └── 安全区域: env(safe-area-inset-*)                               │
├─────────────────────────────────────────────────────────────────────┤
│  🔲 圆角体系                                                        │
│  ├── 大卡片: 12px (rounded-xl)                                      │
│  ├── 按钮: 10px (rounded-lg)                                        │
│  ├── 输入框: 8px (rounded-md)                                       │
│  └── 头像: 50% (rounded-full)                                       │
├─────────────────────────────────────────────────────────────────────┤
│  🌫️ 阴影体系                                                        │
│  └── 柔和弥散: shadow-sm (0 1px 2px rgba(0,0,0,0.05))               │
└─────────────────────────────────────────────────────────────────────┘
```

### 2.2 Tailwind 快速配置

```javascript
// tailwind.config.js 卡若 iOS 风格配置
module.exports = {
  theme: {
    extend: {
      colors: {
        'ios-bg': '#F2F2F7',
        'ios-card': '#FFFFFF',
        'ios-separator': '#C6C6C8',
        'ios-blue': '#007AFF',
        'ios-green': '#34C759',
        'ios-orange': '#FF9500',
        'ios-red': '#FF3B30',
      },
      fontFamily: {
        'ios': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'sans-serif'],
      },
    },
  },
}
```

---

## 📱 三、页面模板库

### 3.1 标准列表页

```
┌──────────────────────────────────────┐
│  ← 返回      标题      [操作按钮]     │  ← Header (44px)
├──────────────────────────────────────┤
│  🔍 搜索...                          │  ← SearchBar (可选)
├──────────────────────────────────────┤
│                                      │
│  ┌────────────────────────────────┐  │
│  │  图标  标题                  >  │  │  ← ListItem (44px)
│  │        副标题                   │  │
│  └────────────────────────────────┘  │
│                                      │
│  ┌────────────────────────────────┐  │
│  │  图标  标题                  >  │  │
│  │        副标题                   │  │
│  └────────────────────────────────┘  │
│                                      │
├──────────────────────────────────────┤
│  🏠首页    📊流量池    👤我的        │  ← TabBar (49px)
└──────────────────────────────────────┘
```

### 3.2 标准表单页

```
┌──────────────────────────────────────┐
│  ← 取消      填写信息      [保存]     │  ← Header
├──────────────────────────────────────┤
│                                      │
│  标签                                │
│  ┌────────────────────────────────┐  │
│  │  请输入...                      │  │  ← Input
│  └────────────────────────────────┘  │
│                                      │
│  标签                                │
│  ┌────────────────────────────────┐  │
│  │  请选择             ∨          │  │  ← Select
│  └────────────────────────────────┘  │
│                                      │
│  ┌────────────────────────────────┐  │
│  │         确认提交                │  │  ← Button
│  └────────────────────────────────┘  │
│                                      │
└──────────────────────────────────────┘
```

### 3.3 数据展示页 (分润看板)

```
┌──────────────────────────────────────┐
│  ← 返回      我的收益                 │
├──────────────────────────────────────┤
│                                      │
│  ┌────────────────────────────────┐  │
│  │       今日收益                  │  │
│  │      ¥ 1,234.56               │  │  ← 大字金额
│  │      累计: ¥12,345.67          │  │
│  │  [立即提现]                     │  │
│  └────────────────────────────────┘  │
│                                      │
│  收益明细                     查看全部 >│
│  ┌────────────────────────────────┐  │
│  │  用户A下单    +¥12.50   10:30  │  │
│  │  用户B下单    +¥8.00    09:15  │  │
│  │  ...                           │  │
│  └────────────────────────────────┘  │
│                                      │
└──────────────────────────────────────┘
```

---

## 🔄 四、交互规范 (强制)

### 4.1 加载状态

```yaml
# 强制规则：严禁白屏和 Spinner
数据加载中:
  方案: Skeleton 骨架屏
  组件: van-skeleton / Shadcn Skeleton
  时机: 数据请求开始 → 数据返回

图片加载中:
  方案: 灰色占位 + 渐显
  失败: 显示默认占位图

按钮加载中:
  方案: 禁用 + loading 状态
  文案: "提交中..." / "加载中..."
```

### 4.2 转场动画

```yaml
# 强制规则：所有路由切换必须有动画
前进 (Push):
  动画: 从右向左滑入
  时长: 300ms
  缓动: ease-out

后退 (Pop):
  动画: 从左向右滑出
  时长: 300ms
  缓动: ease-in

Modal 弹出:
  动画: 从下向上滑入 + 背景遮罩渐显
  时长: 250ms
```

### 4.3 反馈机制

```yaml
操作成功:
  方案: Toast (顶部或中间)
  图标: ✓ 绿色
  时长: 1.5s

操作失败:
  方案: Toast + 震动 (移动端)
  图标: ✗ 红色
  时长: 2s

加载中:
  方案: Loading 遮罩 (阻断操作)
  文案: "处理中..."
```

---

## 🔗 五、跨目录联动

### 5.1 上下游关系

```mermaid
graph LR
    A[1、需求] -->|用户故事| B[3、原型]
    C[2、架构] -->|模块拆分| B
    B -->|页面结构| D[4、前端]
    B -->|交互需求| E[5、接口]
```

### 5.2 联动指令

```
# 原型确定后，自动生成前端代码
@联动 原型→前端：基于 [页面结构] 生成 React 组件

# 原型确定后，自动识别接口需求
@联动 原型→接口：基于 [交互说明] 识别需要的 API
```

---

## 🤖 六、AI 协作指令

### 6.1 角色设定
```yaml
角色: UI/UX 设计师
风格: 
  - iOS 原生风格优先
  - 极简、高效、流量入口显眼
  - 分润数据必须醒目
输出: 必须包含页面结构图 + Tailwind 类名
检查: 必须包含骨架屏和转场动画说明
```

### 6.2 指令集

| 指令 | 功能 | 示例 |
|:---|:---|:---|
| `@页面结构` | 生成信息架构 | `@页面结构 我的钱包页面` |
| `@页面流程` | 生成页面跳转图 | `@页面流程 用户注册到下单` |
| `@组件清单` | 列出页面组件 | `@组件清单 流量池列表页` |
| `@交互说明` | 描述交互细节 | `@交互说明 下拉刷新` |
| `@iOS样式` | 生成 Tailwind 类 | `@iOS样式 列表卡片` |
| `@骨架屏` | 设计骨架屏结构 | `@骨架屏 首页` |

---

## 📝 七、原型文档模板

```markdown
# [页面名称] 原型设计文档 v1.0
> 创建日期：YYYY-MM-DD | 设计师：卡若 | 状态：草稿/已评审

---

## 一、页面信息

| 项目 | 说明 |
|:---|:---|
| 页面路径 | /xxx/xxx |
| 页面类型 | 列表页/详情页/表单页/弹窗 |
| 用户角色 | 合作方/管理员/游客 |
| 入口来源 | 从哪些页面可以进入 |

---

## 二、页面结构

### 2.1 布局示意
[ASCII 布局图]

### 2.2 组件清单
| 区域 | 组件 | 说明 | 交互 |
|:---|:---|:---|:---|

---

## 三、交互说明

### 3.1 加载状态
[骨架屏设计]

### 3.2 用户操作
| 操作 | 触发条件 | 响应行为 | 跳转页面 |
|:---|:---|:---|:---|

### 3.3 转场动画
[动画说明]

---

## 四、样式规范

### 4.1 Tailwind 类名
[关键组件的类名]

### 4.2 自定义样式
[如有特殊样式]

---

## 附录

### A. 竞品参考截图
### B. 设计稿链接
```

---

## 📊 八、示例输出

### 8.1 页面结构图示例

```mermaid
graph TB
    subgraph App[私域银行 App]
        subgraph Tab1[首页]
            A1[Banner 轮播]
            A2[快捷入口]
            A3[最新动态]
        end
        
        subgraph Tab2[流量池]
            B1[搜索栏]
            B2[筛选标签]
            B3[流量池列表]
        end
        
        subgraph Tab3[我的]
            C1[用户信息卡]
            C2[收益概览]
            C3[功能菜单]
        end
    end
    
    Tab1 --> D[场景详情]
    Tab2 --> E[流量池详情]
    Tab3 --> F[钱包/提现]
    Tab3 --> G[设备管理]
```

### 8.2 页面流程图示例

```mermaid
flowchart TB
    A[启动 App] --> B{已登录?}
    B -->|否| C[登录页]
    B -->|是| D[首页]
    
    C --> C1[手机号输入]
    C1 --> C2[验证码输入]
    C2 --> D
    
    D --> E[流量池]
    D --> F[我的]
    
    E --> E1[流量池详情]
    E1 --> E2[开启流量池]
    
    F --> F1[我的收益]
    F1 --> F2[申请提现]
    F2 --> F3[提现成功]
```

### 8.3 组件样式示例

```jsx
// iOS 风格列表项
<div className="bg-white px-4 py-3 flex items-center justify-between
               active:bg-gray-100 transition-colors">
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 rounded-full bg-ios-blue/10 
                    flex items-center justify-center">
      <Icon className="w-5 h-5 text-ios-blue" />
    </div>
    <div>
      <p className="text-[17px] font-medium text-gray-900">标题文字</p>
      <p className="text-[13px] text-gray-500">副标题说明</p>
    </div>
  </div>
  <ChevronRight className="w-5 h-5 text-gray-300" />
</div>
```

---

## ⚠️ 九、注意事项

### 9.1 常见陷阱
- ❌ 直接抄 Android Material Design
- ❌ 使用 Spinner 代替骨架屏
- ❌ 页面切换无动画
- ❌ 忽略安全区域适配

### 9.2 最佳实践
- ✅ 严格遵循 iOS HIG
- ✅ 所有数据加载用 Skeleton
- ✅ 所有路由切换有 Transition
- ✅ 金额/收益必须醒目显示

---

> **下一步**: 原型确定后，拖入 `4、前端/_智能展开.md` 进行前端代码开发