From super-pm
Guides product managers through prototype design planning: defines scope from PRD/MVP docs, builds information architecture, identifies core pages, designs interaction flows, outputs Markdown schemes. Use for product prototypes, UI flows, layouts.
npx claudepluginhub konglong87/superpm --plugin super-pmThis skill is limited to using the following tools:
```bash
Orchestrates interactive workflows to transform fuzzy product/feature ideas into structured development briefs. Adaptive phases handle complexity; generates HTML/CSS visual prototypes.
Use this skill when the user asks to "create a prototype spec", "write a prompt for v0", "write a vibe-coding prompt", "turn this PRD into a prototype prompt", "create a Bolt prompt", "help me prototype this", "write a spec for Lovable", or wants to convert a PRD or feature description into a self-contained prompt that can be dropped directly into v0, Bolt, Lovable, or another AI coding tool. Also auto-invoked at the end of /write-prd to generate the prototype appendix.
Orchestrates interactive product/feature design from fuzzy ideas to structured briefs via adaptive phases, collaborative refinement, and HTML/CSS visual prototypes. Use before coding.
Share bugs, ideas, or general feedback.
# 检查方案设计目录
mkdir -p docs/02-方案设计
# 检查前置文档
echo "📊 正在检查前置文档..."
if [ -f "docs/02-方案设计/PRD产品需求文档.md" ]; then
echo "✅ PRD文档 - 已找到"
else
echo "⏳ PRD文档 - 未找到"
fi
if [ -f "docs/01-需求调研/MVP方案.md" ]; then
echo "✅ MVP方案 - 已找到"
else
echo "⏳ MVP方案 - 未找到"
fi
使用 AskUserQuestion 询问:
您需要设计哪个层面的原型?
A) 整体产品原型(完整产品流程) B) 核心功能原型(MVP核心流程) C) 单个功能模块原型(特定功能) D) 交互优化原型(已有原型的优化) E) 其他(请手动输入)
💡 提示:
- 新产品从0到1 → 推荐整体产品原型
- 快速验证 → 推荐核心功能原型
- 迭代优化 → 推荐单个功能模块原型
记录到变量 PROTO_SCOPE
根据原型范围读取相应文档:
必需文档:
读取失败处理:
如果 PRD 文档不存在:
⚠️ 未找到 PRD 文档
原型设计通常需要 PRD 作为输入,确保设计符合需求。
您可以选择:
A) 执行 /pm-docs 生成 PRD
B) 使用 MVP 方案作为输入(如果没有 PRD)
C) 手动输入功能需求(快速模式)
是否继续?
基于前置文档提取:
从 PRD 提取:
从 MVP 方案提取:
从用户旅程地图提取:
使用 AskUserQuestion 询问:
基于功能需求,我整理了以下信息架构:
{展示信息架构树形图}
这个架构是否合理?
A) 架构合理,继续设计页面流程 B) 需要调整架构 C) 我有其他想法(请手动输入)
如果选择 B,引导用户调整架构。
AI 分析并列举核心页面:
📱 根据信息架构和用户旅程,识别出以下核心页面:
{页面列表,如:首页、商品列表、商品详情、购物车、订单页等}
是否需要调整?
A) 页面完整,开始设计流程 B) 需要增加页面 C) 需要删除页面 D) 其他调整
基于用户旅程和功能需求,设计页面跳转流程:
核心业务流程:
用户启动 → 首页 → 浏览商品 → 商品详情 → 加入购物车 → 结算 → 支付 → 订单完成
关键分支流程:
- 未登录用户:触发登录/注册流程
- 库存不足:提示缺货,推荐相似商品
- 支付失败:重试或更换支付方式
使用 AskUserQuestion 逐个设计关键交互:
现在设计"{页面名称}"页面的交互流程:
核心功能:
- {功能1}
- {功能2}
用户操作路径:
- 进入页面的触发方式
- 主要操作按钮
- 操作后的反馈
- 页面跳转逻辑
是否需要特殊交互?
A) 标准交互(常用组件和模式) B) 创新交互(需要设计新组件) C) 参考{竞品名称}的交互方式 D) 其他(请手动输入)
使用 Write 工具创建 docs/02-方案设计/原型设计方案.md:
# {产品名称} 原型设计方案
## 文档信息
- **产品名称**: {从PRD提取}
- **原型范围**: {整体产品/核心功能/单个模块}
- **创建时间**: {当前时间}
- **设计工具**: super-pm v1.0.0
---
## 一、设计概述
### 1.1 设计目标
{从PRD或MVP方案提取:产品目标}
### 1.2 目标用户
{从PRD提取:目标用户}
### 1.3 核心场景
{从用户旅程或PRD提取:核心使用场景}
---
## 二、信息架构
### 2.1 整体架构
{产品名称} ├── 首页 │ ├── 推荐内容 │ ├── 分类入口 │ └── 搜索入口 ├── 分类页 │ ├── 一级分类 │ └── 二级分类 ├── 列表页 │ ├── 筛选功能 │ ├── 排序功能 │ └── 商品展示 ├── 详情页 │ ├── 基本信息 │ ├── 操作按钮 │ └── 相关推荐 ├── 购物车 │ ├── 商品列表 │ ├── 数量调整 │ └── 结算入口 └── 个人中心 ├── 订单管理 ├── 收藏夹 └── 设置
### 2.2 导航设计
**主导航**:
- 首页
- 分类
- 购物车
- 我的
**辅助导航**:
- 搜索
- 客服
- 返回
---
## 三、页面设计详情
### 3.1 首页
**页面目标**:
- 快速触达用户感兴趣的内容
- 引导用户浏览和转化
**核心功能**:
- 搜索栏
- Banner轮播
- 推荐内容流
- 分类快捷入口
- 底部导航
**布局结构**:
┌─────────────────────┐ │ Logo 🔍 搜索 │ ← 顶部栏 ├─────────────────────┤ │ │ │ Banner 轮播区 │ │ │ ├─────────────────────┤ │ 快捷入口 (2x4图标) │ ├─────────────────────┤ │ │ │ 推荐内容流 │ │ (卡片式布局) │ │ │ └─────────────────────┘ │ 首页 分类 购物车 我的│ ← 底部导航 └─────────────────────┘
**交互说明**:
- 下拉刷新内容流
- 上滑加载更多
- Banner自动轮播,手动可滑动
- 点击快捷入口跳转分类页
**异常处理**:
- 网络失败:显示占位图和重试按钮
- 内容为空:显示引导文案和推荐分类
---
### 3.2 {下一页面}
{重复上述结构}
---
## 四、交互流程
### 4.1 核心业务流程
**流程名称**:商品购买流程
**流程图**:
首页 → 商品列表 → 商品详情 → 加入购物车 → 购物车页 → 结算 → 支付 → 订单完成
**详细步骤**:
1. **首页**
- 用户行为:浏览推荐内容或搜索商品
- 触发操作:点击商品卡片
- 页面跳转:进入商品详情
2. **商品详情**
- 用户行为:查看商品信息、选择规格
- 触发操作:点击"加入购物车"或"立即购买"
- 系统反馈:Toast提示"已加入购物车"
- 页面跳转:
- 加入购物车 → 留在当前页
- 立即购买 → 进入结算页
3. **购物车页**
- 用户行为:调整商品数量、选择商品
- 触发操作:点击"去结算"
- 前置检查:检查库存、价格变化
- 页面跳转:进入结算页
4. **结算页**
- 用户行为:选择收货地址、支付方式
- 触发操作:点击"提交订单"
- 页面跳转:进入支付页
5. **支付页**
- 用户行为:完成支付
- 触发操作:支付成功
- 页面跳转:进入订单详情
---
### 4.2 异常流程
**场景 1:商品库存不足**
商品详情页 → 加入购物车 → 系统检查库存 → Toast提示"库存不足"
**处理方式**:
- 显示库存不足提示
- 推荐"到货通知"功能
- 展示相似商品推荐
**场景 2:未登录用户下单**
购物车页 → 去结算 → 检测未登录 → 弹出登录引导 → 登录成功 → 继续结算
**处理方式**:
- 弹出登录引导框
- 支持:账号密码登录、短信登录、第三方登录
- 登录成功后自动继续流程
---
## 五、设计规范建议
### 5.1 视觉风格
**色彩方案**:
- 主色:{基于产品定位推荐}
- 辅助色:{推荐配色}
- 强调色:{用于重要按钮}
**字体规范**:
- 标题:16-20px 粗体
- 正文:14px 常规
- 辅助文字:12px 浅色
**间距规范**:
- 页面边距:16px
- 卡片间距:12px
- 元素间距:8px
---
### 5.2 组件规范
**按钮规范**:
- 主按钮:填充色,高度44px,圆角8px
- 次要按钮:描边,高度44px
- 文字按钮:无背景,高度自适应
**表单规范**:
- 输入框高度:48px
- 标签位置:左对齐或顶部对齐
- 错误提示:红色文字,输入框下方
**卡片规范**:
- 圆角:8px
- 阴影:0 2px 8px rgba(0,0,0,0.1)
- 内边距:16px
---
## 六、原型工具建议
### 6.1 工具选择
根据团队技能和项目需求,推荐以下工具:
**A) Figma(推荐)**
- 优势:协作便捷、组件库丰富、支持原型交互
- 适用:团队协作项目、需要实时评审
**B) Axure RP**
- 优势:交互功能强大、支持复杂逻辑
- 适用:需要高保真交互原型
**C) 墨刀 / 蓝湖**
- 优势:中文友好、上手快、支持协作
- 适用:快速原型、小型团队
**D) Sketch + Principle**
- 优势:设计精美、动画效果好
- 适用:偏重视觉设计的团队
---
### 6.2 设计资源
**组件库推荐**:
- Ant Design Mobile(通用)
- Material Design(国际化)
- WeUI(微信风格)
**图标库推荐**:
- iconfont(阿里巴巴图标库)
- Font Awesome
- Material Icons
---
## 七、下一步建议
### 7.1 原型设计完成后
建议执行:
1. **评审原型** - 与团队、stakeholder评审原型
2. **/pm-tech** - 技术对接,讨论可行性
3. **/pm-feature** - 功能细节拆解
4. **/pm-data** - 定义数据埋点需求
### 7.2 原型迭代优化
- 用户测试:招募目标用户测试原型
- 数据验证:关键页面加入数据埋点
- 快速迭代:基于反馈快速调整
---
## 八、附录
### 8.1 参考文档
- PRD产品需求文档
- MVP方案
- 用户旅程地图
### 8.2 设计检查清单
- [ ] 核心流程是否完整
- [ ] 异常流程是否覆盖
- [ ] 交互是否一致
- [ ] 加载状态是否考虑
- [ ] 空状态是否设计
- [ ] 错误提示是否友好
- [ ] 操作反馈是否及时
---
**文档状态**: 原型设计方案完成
**生成时间**: {时间戳}
**生成工具**: super-pm v1.0.0
使用 AskUserQuestion 提供下一步选项:
✅ 原型设计方案已生成!
📄 文档路径:
docs/02-方案设计/原型设计方案.md🎯 建议下一步:
A) 执行 /pm-tech - 技术对接(推荐) B) 执行 /pm-feature - 功能细节拆解 C) 执行 /pm-data - 数据指标设计 D) 查看原型设计方案
⚠️ 未找到 PRD 文档
原型设计通常基于 PRD 的功能需求。您可以选择:
A) 执行 /pm-docs 生成 PRD
B) 使用 MVP 方案作为输入
C) 手动输入功能需求
是否继续?
引导用户思考:
🤔 不确定如何设计?
我可以帮您: A) 分析竞品的设计模式 B) 基于用户旅程推导设计 C) 提供行业通用设计方案 D) 参考设计规范(如 Ant Design)
docs/02-方案设计/原型设计方案.md