https://github.com/arcsin1/pm-agile-workflow
Guides users through a stricter 7-step agile PM workflow. Invoke when users have a rough product idea and need interactive HTML prototype, PRD, mermaid flowcharts, and versioned delivery.
https://github.com/arcsin1/pm-agile-workflow
Last synced: 2 days ago
JSON representation
Guides users through a stricter 7-step agile PM workflow. Invoke when users have a rough product idea and need interactive HTML prototype, PRD, mermaid flowcharts, and versioned delivery.
- Host: GitHub
- URL: https://github.com/arcsin1/pm-agile-workflow
- Owner: arcsin1
- Created: 2026-03-25T14:48:39.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-25T14:54:09.000Z (3 months ago)
- Last Synced: 2026-03-26T17:29:13.016Z (3 months ago)
- Size: 11.7 KB
- Stars: 19
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PM Agile Workflow Skill
> 敏捷产品经理需求产出工作流 - 从模糊想法到可交付的 PRD + 原型 + 流程图
**快速导航：** [简介](#简介) | [核心价值](#核心价值) | [适用场景](#适用场景) | [七步工作流](#七步工作流) | [产出物清单](#产出物清单) | [目录结构](#目录结构) | [快速开始](#快速开始) | [常见问题](#常见问题) | [安装](#安装)
---
## 简介
这是一个结构化的产品经理工作流技能，帮助将模糊的产品需求逐步转化为清晰、可评审、可演示的完整交付物。通过七步法引导式流程，确保需求被充分理解、原型被充分验证、文档被充分完善。
## 核心价值
- **需求收敛**：把模糊想法逐步厘清成清晰业务逻辑
- **原型验证**：通过交互式 HTML 原型发现交互漏洞和边界条件
- **完整交付**：产出可展示、可评审、可迭代的 PRD + 原型 + 流程图
## 适用场景
- 只有一个产品想法，还说不清流程和边界
- 需要输出专业级 PRD，但不希望只得到空框架
- 需要交互式 HTML 原型来验证页面逻辑和异常流
- 希望 PRD 中直接嵌入原型切片，方便评审对齐
## 触发方式
当用户提供以下任一形式的输入时自动启用：
- 产品想法 / 功能需求
- 业务流程描述
- 草图 / 截图
- 口头描述
- 会议纪要
说出类似以下内容即可触发：
> "我想做一个 XX 功能"
> "帮我把这个需求整理成 PRD"
> "我有个产品想法，需要出原型和文档"
## 七步工作流
```
┌─────────────────────────────────────────────────────────┐
│ Step 1: 对话式需求采集与确认 │
│ → 复述理解 → 7维度评估 → 3轮追问 → 等待确认 │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Step 2: 项目初始化与目录架构搭建 │
│ → 创建 requirements/ prototypes/ flows/ 目录 │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Step 3: 输出第一版详细 PRD │
│ → 背景/目标/场景/功能清单/业务逻辑 → 等待确认 │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Step 4: 产出高保真 HTML 原型 ⭐ 核心验证阶段 │
│ → 单文件 HTML + Tailwind CSS + Focus Mode → 迭代优化 │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Step 5: 输出 Mermaid 流程图 │
│ → 主流程 + 异常分支 + 边界处理 │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Step 6: 产出最终版 PRD（内嵌原型切片） │
│ → 整合所有产物 → iframe 嵌入原型 → 完整交付 │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Step 7: 版本迭代与管理 │
│ → 版本隔离 → 变更日志 → PRD/原型同步 │
└─────────────────────────────────────────────────────────┘
```
## 产出物清单
| 产物 | 位置 | 说明 |
|------|------|------|
| PRD 文档 | `requirements/prd_vX.X.html` | HTML 格式，支持独立打开 |
| 交互原型 | `prototypes/prototype_vX.X.html` | 单文件 HTML，Tailwind CSS |
| 流程图 | `flows/flowchart_vX.X.md` | Mermaid 格式 |
| 附件资料 | `attachments/` | 原始资料、数据字典等 |
## 目录结构
```
/
├── requirements/ # PRD 文档
├── prototypes/ # HTML 原型
├── flows/ # Mermaid 流程图
├── attachments/ # 附件资料
└── templates/ # 模板文件
```
## 自动预览
AI 产出 HTML 文件后会**自动在浏览器中打开**，无需手动操作：
| 步骤 | 产出文件 | 自动打开 |
|------|----------|----------|
| Step 3 | `requirements/prd_v1.0.html` | ✅ |
| Step 4 | `prototypes/prototype_v1.0.html` | ✅ |
| Step 6 | `requirements/prd_v1.0_final.html` | ✅ |
## 原型特性
- **单文件 HTML**：便于分享和版本管理
- **Tailwind CSS**：现代、清晰的视觉风格
- **Focus Mode**：支持 `?focus=` 参数，用于 PRD 切片展示
- **完整状态**：默认态、弹窗态、空状态、成功态、失败态、加载态
- **Hash 路由**：支持 `#login` 等页面切换
## PRD 特性
- **HTML 格式**：独立打开即可使用，无需依赖
- **模块化结构**：每个功能包含流程图 + 规则描述 + 原型切片
- **iframe 嵌入**：原型以沙箱方式嵌入，聚焦展示特定功能
- **版本切换器**：右上角下拉菜单切换历史版本
## 执行原则
1. 严格按步骤推进，禁止一次性输出所有结果
2. 每步确认后再继续，不跳步、不压缩
3. 原型修改同步更新 PRD
4. 历史版本物理隔离，不覆盖
## 快速口诀
> 先问清，再建目录
> 先出初版 PRD，再做 HTML 原型
> 原型每改一处，PRD 同步一处
> 原型跑通后，再补 Mermaid 流程图
> 最终交付必须可读、可演示、可迭代
## 快速开始
**输入：** "我想做一个积分兑换功能"
**执行过程：**
```
Step 1 → 追问澄清：积分来源？兑换限制？库存处理？
Step 2 → 创建目录结构
Step 3 → 输出 prd_v1.0.html
Step 4 → 输出 prototype_v1.0.html（含 Focus Mode）
Step 5 → 输出 flowchart_v1.0.md
Step 6 → 输出 prd_v1.0_final.html（内嵌原型切片）
Step 7 → 版本记录、变更日志
```
**最终产出：**
```
points-exchange/
├── requirements/
│ ├── prd_v1.0.html
│ └── prd_v1.0_final.html
├── prototypes/
│ └── prototype_v1.0.html
├── flows/
│ └── flowchart_v1.0.md
└── attachments/
```
## 前置依赖
| 依赖项 | 说明 | 必需 |
|--------|------|------|
| Tailwind CSS | 原型样式，CDN 自动引入 | 否 |
| Mermaid.js | 流程图渲染，CDN 自动引入 | 否 |
| 现代浏览器 | Chrome / Firefox / Safari / Edge | 是 |
## 常见问题
**Q: 原型无法预览？**
检查 CDN 资源是否可访问，尝试直接用浏览器打开 HTML 文件。
**Q: Mermaid 渲染失败？**
避免节点文本中使用特殊字符 `" ' < > & { }`，检查语法闭合。
**Q: 只想执行部分步骤？**
直接说明即可，如 "我已有 PRD，只需要出原型"。
**Q: Focus Mode 不生效？**
检查 URL 参数格式：`?focus=login#login`
## 安装
### Claude Code
将 `SKILL.md` 放入 skills 目录：
```bash
~/.claude/skills/pm-agile-workflow/SKILL.md
```
**唤起方式：** 直接在对话中描述需求即可自动触发，或输入 `/pm-agile-workflow` 手动调用。
### Cursor 编辑器
1. 打开 Cursor settings
2. 找到 **Skills** 设置入口
3. 点击「Add Skill」添加 `SKILL.md` 文件
或放入配置目录：
```bash
~/.cursor/skills/pm-agile-workflow/SKILL.md
```
**唤起方式：** 在 Chat 面板中输入 `@pm-agile-workflow` 或直接描述产品需求。
### Trae 编辑器
1. 打开 Trae 设置面板
2. 找到 **AI 助手** → **Skills / 技能** 设置入口
3. 点击「添加 Skill」，选择或粘贴 `SKILL.md` 文件
或者放入配置目录：
```bash
~/.trae/skills/pm-agile-workflow/SKILL.md
```
**唤起方式：** 在对话中输入 `/pm-agile-workflow` 或直接描述产品需求触发。