15 KiB
15 KiB
🎨 原型智能展开引擎 (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 快速配置
// 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 加载状态
# 强制规则：严禁白屏和 Spinner
数据加载中:
方案: Skeleton 骨架屏
组件: van-skeleton / Shadcn Skeleton
时机: 数据请求开始 → 数据返回
图片加载中:
方案: 灰色占位 + 渐显
失败: 显示默认占位图
按钮加载中:
方案: 禁用 + loading 状态
文案: "提交中..." / "加载中..."
4.2 转场动画
# 强制规则：所有路由切换必须有动画
前进 (Push):
动画: 从右向左滑入
时长: 300ms
缓动: ease-out
后退 (Pop):
动画: 从左向右滑出
时长: 300ms
缓动: ease-in
Modal 弹出:
动画: 从下向上滑入 + 背景遮罩渐显
时长: 250ms
4.3 反馈机制
操作成功:
方案: Toast (顶部或中间)
图标: ✓ 绿色
时长: 1.5s
操作失败:
方案: Toast + 震动 (移动端)
图标: ✗ 红色
时长: 2s
加载中:
方案: Loading 遮罩 (阻断操作)
文案: "处理中..."
🔗 五、跨目录联动
5.1 上下游关系
graph LR
A[1、需求] -->|用户故事| B[3、原型]
C[2、架构] -->|模块拆分| B
B -->|页面结构| D[4、前端]
B -->|交互需求| E[5、接口]
5.2 联动指令
# 原型确定后，自动生成前端代码
@联动 原型→前端：基于 [页面结构] 生成 React 组件
# 原型确定后，自动识别接口需求
@联动 原型→接口：基于 [交互说明] 识别需要的 API
🤖 六、AI 协作指令
6.1 角色设定
角色: UI/UX 设计师
风格:
- iOS 原生风格优先
- 极简、高效、流量入口显眼
- 分润数据必须醒目
输出: 必须包含页面结构图 + Tailwind 类名
检查: 必须包含骨架屏和转场动画说明
6.2 指令集
| 指令 | 功能 | 示例 |
|---|---|---|
@页面结构 |
生成信息架构 | @页面结构 我的钱包页面 |
@页面流程 |
生成页面跳转图 | @页面流程 用户注册到下单 |
@组件清单 |
列出页面组件 | @组件清单 流量池列表页 |
@交互说明 |
描述交互细节 | @交互说明 下拉刷新 |
@iOS样式 |
生成 Tailwind 类 | @iOS样式 列表卡片 |
@骨架屏 |
设计骨架屏结构 | @骨架屏 首页 |
📝 七、原型文档模板
# [页面名称] 原型设计文档 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 页面结构图示例
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 页面流程图示例
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 组件样式示例
// 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进行前端代码开发