feat(req-prd): add HTML prototype delivery loop

This commit is contained in:
2026-08-21 23:48:43 +09:30
parent b859a84455
commit 8fc1cd05b7
6 changed files with 206 additions and 37 deletions
+4 -4
View File
@@ -482,8 +482,8 @@
{
"name": "req-prd-plugin",
"source": "./skills-req/req-prd-plugin",
"description": "产品需求设计技能。PRD 文档编写、需求分析、用户故事、对比式分析。纯产品视角,不含技术实现。",
"version": "2.0.0",
"description": "产品需求设计技能。覆盖问答访谈、PRD、缺陷收敛及 HTML 原型验证闭环。纯产品视角,不含技术实现。",
"version": "2.1.0",
"category": "productivity",
"keywords": [
"project-management",
@@ -495,8 +495,8 @@
{
"name": "req-prototype-plugin",
"source": "./skills-req/req-prototype-plugin",
"description": "原型生成与关联。支持 HTML 上传(/req prototype uploadiframe 嵌入详情页)和 Stitch AI 生成两种模式。",
"version": "2.0.0",
"description": "原型生成与关联。支持 HTML 正式交付、Requirement 关联、iframe 验证闭环及 Stitch AI 视觉探索。",
"version": "2.1.0",
"category": "productivity",
"keywords": [
"project-management",
@@ -1,7 +1,7 @@
{
"name": "req-prd-plugin",
"description": "产品需求设计技能。PRD 文档编写、需求分析、用户故事、对比式分析。纯产品视角,不含技术实现。",
"version": "2.0.0",
"description": "产品需求设计技能。覆盖问答访谈、PRD、缺陷收敛及 HTML 原型验证闭环。纯产品视角,不含技术实现。",
"version": "2.1.0",
"author": {
"name": "qiudl"
},
+78 -8
View File
@@ -16,7 +16,7 @@ description: 产品设计与需求管理。用于 PRD 文档编写、需求分
**插件扩展**
- `req-compare` — 对比式 PRD 编写(系统平移/竞品借鉴时激活)
- `req-prototype` — UI 原型生成
- `req-prototype` — UI 模块在 PRD/缺陷收敛后生成、上传并关联 HTML 原型
- `defect-analysis` — 设计访谈确认后,对最新版 PRD 反复审计和修订直至收敛
## 模块设计访谈模式
@@ -29,7 +29,23 @@ description: 产品设计与需求管理。用于 PRD 文档编写、需求分
- 将问题、AI 建议、用户原话、决策和未决项逐轮写入 ai-proj 需求的讨论文档;
- 讨论结论经用户确认后,才能创建或更新 PRD;
- 使用 `defect-analysis` 对最新版 PRD 执行“审计 → 修订 → 全量重审”循环;
- 讨论文档缺失、写入失败、用户未确认,或仍有未处置的致命/高严重度缺陷时,不得宣称设计完成或提交评审。
- UI 模块在 PRD 收敛后使用 `req-prototype` 生成独立 HTML 原型、上传关联 Requirement、回填 PRD 并完成可访问性与关键状态校验;
- 原型评审改变产品行为时,回到问答、PRD 修订和 `defect-analysis` 全量重审,再生成新原型版本;
- 讨论文档缺失、写入失败、用户未确认、原型未验证,或仍有未处置的致命/高严重度缺陷时,不得宣称设计完成或提交评审。
## HTML 原型完成闸门
模块包含用户界面、用户操作流程或可视状态时,HTML 原型是产品设计交付物,不是评审后的可选补充。默认执行 `/req prototype upload [REQ-ID]`,具体生成、上传、iframe 回填和验证规则由 `req-prototype` 定义。
必须满足:
1. 原型基于最新版、已完成缺陷收敛的 PRD,并记录 PRD 文档标识、版本或内容摘要;
2. 覆盖核心入口、主流程以及 PRD 明确要求的空态、失败态、无权限态和确认/撤销反馈;
3. 上传后重新读取 Requirement,确认原型 URL/版本已关联,并验证 URL 可访问、iframe 可展示、核心交互可操作;
4. 将 iframe、原型版本、版本说明和验证结果回填 PRD `4.2 界面原型`,并把生成、反馈、修订和确认写入同一讨论文档;
5. 用户明确确认最终 PRD 与原型表达的是同一方案。
纯后端、批处理、基础设施等确实没有用户界面的模块可以跳过,但必须在讨论文档和 PRD `4.2` 中记录“无 UI,原型不适用”的理由及用户确认,不得静默省略。
## 客户原话原则(REQ-20260416-0017 P1-8
@@ -121,10 +137,21 @@ description: 产品设计与需求管理。用于 PRD 文档编写、需求分
### 4.2 界面原型
> 使用 `/req prototype [REQ-ID]` 基于 PRD 自动生成 Stitch 原型。
> 生成后截图将自动回填到此章节
> UI 模块使用 `/req prototype upload [REQ-ID]` 基于最新版 PRD 生成并上传 HTML 原型。
> 原型必须用 iframe 展示;Stitch 可作为视觉探索的可选输入,不能代替最终 HTML 原型闭环
[执行 `/req prototype` 后自动填充]
**原型基线**
- PRD 文档/版本:...
- 原型版本与说明:...
- Requirement 关联状态:已验证 | 未验证
- 可访问性/关键交互验证:...
<iframe src="[prototype_url]"
width="100%" height="600" frameborder="0"
style="border-radius:8px;border:1px solid #e5e7eb;">
</iframe>
[无 UI 模块填写:原型不适用的理由、讨论记录位置和用户确认原话]
## 5. 技术要求
### 5.1 性能要求
@@ -434,10 +461,44 @@ mcp__ai-proj__export_task_document_to_file
输出:
- PRD 文档
- 原型设计
- 可生成原型的界面状态与交互规格
```
### 4. 评审验证
### 4. 缺陷收敛
```
输入:
- 已确认讨论结论
- 最新版完整 PRD
执行:
- defect-analysis 全维度审计
- 接受项修订 PRD
- 对修订后的完整 PRD 重新审计,直至一轮 0 个新缺陷
输出:
- 已收敛 PRD
- 缺陷处置记录
```
### 5. HTML 原型与反馈闭环
```
适用:
- 所有包含界面、用户操作或可视状态的模块
执行:
- 调用 req-prototype 的 upload 模式生成独立 HTML
- 上传并关联 Requirement
- iframe 回填 PRD,验证访问和关键交互
- 请用户评审;行为性反馈回到问答 → PRD → defect-analysis → 新原型版本
输出:
- 已验证、已关联的 HTML 原型
- PRD 与讨论文档中的版本/反馈/确认记录
```
### 6. 评审验证
```
评审维度:
@@ -453,6 +514,8 @@ mcp__ai-proj__export_task_document_to_file
模块设计访谈模式下,本阶段必须调用 `defect-analysis`,并按访谈协议将每轮发现、处置、PRD 修订和收敛结论回写到同一讨论文档。
UI 模块还必须核对最终 HTML 原型与最新版 PRD 一致,并取得用户对二者的联合确认;无 UI 模块则核对已记录的不适用理由和用户确认。
---
## 竞品分析
@@ -501,6 +564,10 @@ mcp__ai-proj__export_task_document_to_file
- [ ] 讨论结论已由用户明确确认
- [ ] `defect-analysis` 已基于最新版 PRD 收敛到一轮 0 个新缺陷
- [ ] 无未处置的致命/高严重度缺陷
- [ ] UI 模块 HTML 原型已生成、上传并关联 Requirement;无 UI 模块已记录不适用理由和用户确认
- [ ] 原型基线指向最新版 PRDPRD `4.2` 已回填 iframe、版本说明和验证结果
- [ ] 原型反馈导致的行为变更已回到问答、PRD 和 defect 全量重审,并生成新原型版本
- [ ] 用户已联合确认最终 PRD 与 HTML 原型
- [ ] 背景与目标明确
- [ ] 用户群体定义清晰
- [ ] 功能需求完整
@@ -513,6 +580,8 @@ mcp__ai-proj__export_task_document_to_file
### 交互设计检查
- [ ] 用户流程完整
- [ ] HTML 原型覆盖核心入口、主流程及 PRD 指定的关键状态
- [ ] 原型 URL 可访问,Requirement 关联可读取,iframe 可展示,核心交互可操作
- [ ] 边界情况处理
- [ ] 错误提示友好
- [ ] 反馈及时
@@ -533,7 +602,8 @@ mcp__ai-proj__export_task_document_to_file
## 常用工具
### 原型设计
- **Stitch** (Google AI) — 集成在 `/req prototype`,自动从 PRD 生成原型
- **HTML upload(默认交付)** — `/req prototype upload` 生成可交互独立 HTML,上传后以 iframe 关联 Requirement 和 PRD
- **Stitch** (Google AI) — `/req prototype` 视觉探索与多屏草图,可作为 HTML 原型输入但不替代最终闭环
- Figma — 手动精细设计
- Sketch
- Axure
@@ -1,6 +1,6 @@
# 模块设计访谈缺陷收敛协议
# 模块设计访谈缺陷收敛与 HTML 原型闭环协议
本协议用于模块、系统、跨域流程等需要先澄清关键产品决策的设计任务。目标是让设计依据可追溯,让 PRD 在提交评审前经过可验证的缺陷收敛。
本协议用于模块、系统、跨域流程等需要先澄清关键产品决策的设计任务。目标是让设计依据可追溯,让 PRD 在提交评审前经过可验证的缺陷收敛,并让 UI 模块通过可访问的 HTML 原型完成交互验证
## 1. 进入与退出条件
@@ -19,7 +19,8 @@
3. 用户明确确认讨论结论;
4. PRD 已按结论创建或更新;
5. `defect-analysis` 已对最新版 PRD 收敛;
6. 用户确认收敛后的最终方案。
6. UI 模块的 HTML 原型已生成、上传、关联、回填和验证;无 UI 模块已记录不适用理由并获得用户确认;
7. 用户联合确认收敛后的最终 PRD 与原型(或无 UI 的跳过结论)。
## 2. 讨论文档是跨轮次事实源
@@ -125,7 +126,7 @@
若某个修复会改变已确认的目标、范围、实体关系、权限、用户流程、冲突规则或验收口径,不能由 AI 静默应用。将它追加为新的问答或“决策变更”,说明缺陷证据、推荐方案和代价,获得用户确认并更新决策快照后,再修订 PRD;随后重新开始最新版 PRD 的全量审计。
完成全维度基线后,只有 `defect-analysis` 对最新版完整 PRD 出现一轮“0 个新缺陷”时才能标记收敛。达到 20 轮仍有新发现只是阶段复盘点:汇总剩余风险并请求用户决定是否继续;不得把“达到轮数”写成“已收敛”。用户已明确要求持续审计时,按该技能规则继续下一阶段。
完成全维度基线后,只有 `defect-analysis` 对最新版完整 PRD 出现一轮“0 个新缺陷”时才能标记 PRD 收敛。达到 20 轮仍有新发现只是阶段复盘点:汇总剩余风险并请求用户决定是否继续;不得把“达到轮数”写成“已收敛”。用户已明确要求持续审计时,按该技能规则继续下一阶段。
存在以下任一情况时,不得提交 PRD 评审或宣称完成:
@@ -133,16 +134,50 @@
- 讨论文档缺失或有未成功写入的轮次;
- PRD 与已确认决策不一致;
- 缺少 0 新增缺陷的收敛轮;
- 用户尚未确认收敛后的最终方案。
- UI 模块缺少已验证并关联的最终 HTML 原型,或原型与最新版 PRD 不一致;
- 无 UI 模块没有记录跳过理由及用户确认;
- 用户尚未联合确认收敛后的最终 PRD 与原型(或跳过结论)。
## 6. 讨论文档结构
## 6. HTML 原型闭环
### 6.1 适用性判断
PRD 包含页面、表单、列表、可视状态、用户操作或跨页面流程时,必须执行 `req-prototype` 的 HTML upload 模式。Stitch 截图或其他静态图片可以辅助探索,但不能替代可交互 HTML、Requirement 关联和 iframe 回填。
纯后端、批处理、基础设施等无用户界面的模块可以跳过。跳过前必须把理由、影响范围和待确认内容写入讨论文档,取得用户明确确认,并在 PRD `4.2 界面原型` 留下“不适用”记录。
### 6.2 生成基线与覆盖范围
1. 重新读取最新版 PRD,记录任务/文档标识、更新时间、版本和内容摘要或哈希;
2. 从功能需求、交互设计和验收标准提取页面清单、角色入口、主流程与关键状态;
3. 调用 `req-prototype` 生成独立 HTML。至少覆盖核心入口、主流程,以及 PRD 明确要求的空态、加载态、失败态、无权限态、确认和撤销反馈;
4. 原型不得引入 PRD 未确认的新权限、状态、自动化规则或默认值。为了连贯展示所作的推断必须显式标注为待确认,不能伪装成既定需求。
### 6.3 上传、关联、回填与验证
1. 通过 `upload_prototype` 上传 HTML,并记录 Requirement 数字 ID、原型 URL、版本说明和上传时间;
2. 重新读取 Requirement,确认返回的原型 URL/版本确实已关联。仅拿到上传成功响应不足以通过;
3. 将 iframe、PRD 基线、原型版本、版本说明和验证结果回填 PRD `4.2 界面原型`
4. 用浏览器或等价方式验证 URL 可访问、iframe 可展示、核心导航和交互可操作、关键状态可识别。使用临时浏览器时按环境规则关闭;
5. 将生成输入、上传结果、验证证据和待确认差异写入讨论文档。任何写入或验证失败都必须停止,不得声称原型已完成。
### 6.4 用户评审与回流
向用户展示最终关联的原型,并请其同时检查信息结构、流程、状态、权限提示和关键文案:
- 仅视觉样式、间距、颜色等不改变产品行为的反馈,可以直接生成新原型版本,并记录修改摘要;
- 反馈改变目标、范围、实体关系、权限、状态、流程、异常策略、默认值或验收口径时,追加新的问答/决策变更,更新决策快照和 PRD,重新执行完整 `defect-analysis`,收敛后再生成新 HTML 原型版本;
- 每个新版本都必须重新执行关联、PRD 回填和可访问性/交互验证,不得覆盖或伪造历史版本;
- 只有用户明确确认“最终 PRD 与当前原型一致”后,模块产品设计才可结束。
## 7. 讨论文档结构
```markdown
# {REQ-ID} 需求讨论记录
## 元数据
- Requirement...
- 状态:访谈中 | 待方案确认 | PRD 优化中 | 待最终确认 | 已收敛
- 状态:访谈中 | 待方案确认 | PRD 优化中 | 原型制作中 | 待最终确认 | 已收敛
- 最新 PRD:任务/文档标识
- 更新时间:...
@@ -175,14 +210,27 @@
- PRD 修订:...
- 剩余风险:...
## HTML 原型记录
### Prototype v1 · {版本说明}
- PRD 基线:任务/文档标识、版本、更新时间、摘要或哈希
- 是否适用:是 | 否(理由与用户确认)
- 原型 URL...
- Requirement 关联校验:...
- iframe / 可访问性 / 关键交互验证:...
- 用户反馈:...
- 行为性变更回流:无 | 对应 Q/D、PRD 版本和 defect 轮次
- 状态:待验证 | 待用户确认 | 已替代 | 已确认
## 收敛结论
- 收敛轮次:...
- 0 新增缺陷证据:...
- 最终原型版本/URL:... | 无 UI,不适用(确认记录:...)
- PRD 与原型一致性确认:...
- 未解决的中/低风险及接受理由:...
- 用户最终确认原话:...
```
## 7. 最终交付说明
## 8. 最终交付说明
最终回复必须同时给出:
@@ -190,7 +238,8 @@
- 讨论任务/文档标识;
- PRD 任务/文档标识;
- 问答轮数、缺陷审计轮数和收敛轮;
- HTML 原型版本、URL、Requirement 关联与验证状态;无 UI 时给出跳过理由和用户确认;
- 仍被接受的中/低风险;
- 用户两次确认:讨论方案确认、收敛后最终确认。
- 用户两次确认:讨论方案确认、最终 PRD 与原型(或无 UI 结论)的联合确认。
任何标识或写入状态无法验证时,用“未验证/未写入”如实标注。
@@ -1,7 +1,7 @@
{
"name": "req-prototype-plugin",
"description": "原型生成与关联。支持 HTML 上传(/req prototype uploadiframe 嵌入详情页)和 Stitch AI 生成两种模式。",
"version": "2.0.0",
"description": "原型生成与关联。支持 HTML 正式交付、Requirement 关联、iframe 验证闭环及 Stitch AI 视觉探索。",
"version": "2.1.0",
"author": {
"name": "qiudl"
},
+62 -12
View File
@@ -1,19 +1,20 @@
---
name: req-prototype
description: 原型生成与关联。支持两种模式:(1) Stitch AI 基于 PRD 自动生成 UI 原型截图;(2) AI 编写 HTML 原型并上传关联到需求详情页 iframe。当执行 /req prototype 或需要生成/上传界面原型时使用。
arguments: <REQ-ID> [subcommand] [options]
---
# 原型设计 Skill (req-prototype)
用法:`/req prototype <REQ-ID> [subcommand] [options]`
## 概述
支持两种原型工作流:
| 模式 | 命令 | 适用场景 | 输出 |
|------|------|----------|------|
| **HTML 上传** | `/req prototype upload` | 快速展示、评审用静态原型 | iframe 嵌入需求详情页 |
| **Stitch AI** | `/req prototype` | 精细 UI 设计、多屏交互 | 截图回填 PRD 文档 |
| **HTML 上传** | `/req prototype upload` | UI 模块正式产品设计交付、评审与交互验证 | 可交互 HTML + Requirement 关联 + PRD iframe |
| **Stitch AI** | `/req prototype` | 精细 UI 视觉探索、多屏草图 | 截图回填 PRD,后续仍需转为 HTML 正式原型 |
## 前置条件
@@ -22,24 +23,30 @@ arguments: <REQ-ID> [subcommand] [options]
| 检查项 | 方式 | 失败处理 |
|--------|------|----------|
| 需求存在 | `mcp__ai-proj__get_requirement` | 报错:需求不存在 |
| PRD 文档存在(Stitch 模式)| 找 linkRole=prd 任务 + 检查文档 | 报错:请先执行 req-prd |
| PRD 文档存在(两种模式)| 找 linkRole=prd 任务 + 检查文档 | 报错:请先执行 req-prd |
| PRD 已完成 defect 收敛(正式 HTML 模式) | 读取讨论文档的收敛轮和最新版 PRD 标识 | 报错:先完成 req-prd/defect-analysis 收敛 |
| UI 原型适用 | PRD 含页面、操作流程或可视状态 | 无 UI 时记录不适用理由与用户确认,不生成空壳原型 |
## 子命令
### 0. `/req prototype upload [REQ-ID] [--note "版本说明"]` — 上传 HTML 原型(**推荐**)
**适用场景**快速为需求关联一个带样式的 HTML 原型,直接在需求详情页以 iframe 展示,供评审人预览交互流程。
**适用场景**为 UI 模块生成正式 HTML 原型,直接在需求详情页以 iframe 展示,供评审人预览和验证交互流程。模块产品设计默认使用此模式完成原型闸门。
**执行流程**
```
1. 获取需求信息(mcp__ai-proj__get_requirement),取得数字 id
2. 读取 PRD 或需求描述,提炼 UI 关键信息
3. AI 编写带完整样式的 HTML 原型文件(见设计规范)
4. 保存到 /tmp/proto_<req_id>_<timestamp>.html
5. Base64 编码:base64 < /tmp/proto_<req_id>_<timestamp>.html
6. 调用 mcp__ai-proj__upload_prototype 上传(传入 requirementId + base64 content
7. 确认上传成功,输出 COS 预览 URL
1. 获取需求信息(mcp__ai-proj__get_requirement),取得数字 id,并定位唯一 PRD 与讨论文档
2. 完整读取最新版 PRD,记录任务/文档 ID、版本、更新时间和内容摘要或哈希;正式交付还要核对 defect 收敛轮
3. 从 PRD 提取页面清单、角色入口、主流程、关键状态和验收条件,形成覆盖矩阵
4. AI 编写带完整样式和必要原生交互的独立 HTML 原型文件(见设计规范)
5. 保存到 /tmp/proto_<req_id>_<timestamp>.html,并在本地做结构、大小和敏感信息检查
6. Base64 编码:base64 < /tmp/proto_<req_id>_<timestamp>.html
7. 调用 mcp__ai-proj__upload_prototype 上传(传入 requirementId + base64 content
8. 重新读取 Requirement,确认原型 URL/版本已关联;不得只相信上传响应
9. 将 iframe、PRD 基线、原型版本/说明和验证状态回填 PRD「4.2 界面原型」
10. 打开最终 URL 或需求详情页,验证 iframe 展示和核心交互;记录证据后关闭临时浏览器
11. 将生成、关联、验证、用户反馈和版本状态写入同一讨论文档
```
**Step 5-6 执行方式**
@@ -103,6 +110,9 @@ AI 生成的 HTML 原型必须满足以下要求:
- 覆盖需求描述中的核心功能点
- 展示关键数据状态(列表、表单、卡片等)
- 按钮/操作有视觉反馈样式(hover 色等)
- 对 PRD 明确要求的空态、加载态、失败态、无权限态、二次确认和撤销反馈提供可切换或可识别的展示
- 不得自行引入 PRD 未确认的权限、状态、自动化规则或默认值;不可避免的展示推断必须标为待确认
- 不包含访问令牌、真实手机号/邮箱、生产数据等敏感信息
**模板参考**(顶部 topbar + 侧边栏 + 主内容区):
@@ -147,6 +157,41 @@ AI 生成的 HTML 原型必须满足以下要求:
---
#### HTML 原型 PRD 回填
定位 PRD `### 4.2 界面原型`,写入或更新以下内容;保留历史版本记录,不把旧 URL 静默改写成新版本:
```markdown
### 4.2 界面原型
**原型基线**
- PRD 任务/文档:#... / #...
- PRD 版本/更新时间/摘要:...
- defect 收敛轮:Round ...0 个新缺陷)
- HTML 原型:v... · [版本说明]
- Requirement 关联:已复读验证
- 验证结果:URL 可访问;iframe 可展示;核心交互通过
<iframe src="[prototype_url]"
width="100%" height="600" frameborder="0"
style="border-radius:8px;border:1px solid #e5e7eb;">
</iframe>
```
原型反馈改变目标、范围、实体关系、权限、状态、流程、异常策略、默认值或验收口径时,不得只改 HTML。回到 `req-prd` 追加问答/决策变更,修订 PRD,重新执行完整 `defect-analysis`,收敛后再上传新原型版本。纯视觉反馈可以直接生成新版本,但仍需重新关联、回填和验证。
#### HTML 上传后验证清单
- [ ] 上传响应成功且 Requirement 复读能看到同一 URL/版本
- [ ] 原型 URL 返回可展示的 HTML,不是下载错误页、登录页或 404
- [ ] 需求详情页使用 iframe 展示,没有降级为截图或图片
- [ ] 核心入口、主流程和覆盖矩阵中的关键状态可识别/可操作
- [ ] 600px iframe 下内容可用,没有关键操作被固定栏遮挡
- [ ] 浏览器控制台无阻断交互的错误,原型不依赖外部 CDN
- [ ] PRD `4.2` 与讨论文档均记录基线、版本、URL、验证和反馈状态
---
### 1. `/req prototype [REQ-ID]` — Stitch AI 生成原型
**流程**
@@ -160,6 +205,7 @@ AI 生成的 HTML 原型必须满足以下要求:
6. 生成页面(mcp__stitch__generate_screen_from_text
7. 获取截图(mcp__stitch__get_screen
8. 回填 PRD「4.2 界面原型」章节
9. 若用于模块正式交付,将选定设计转换为 HTML upload 原型,并完成关联、iframe 和验证闭环
```
**参数**
@@ -285,6 +331,8 @@ generated_at: "<timestamp>"
| HTML 文件超过 5MB | 精简样式或拆分多版本上传 |
| iframe 不显示 | 检查 `prototype_urls` 字段是否非空:`mcp__ai-proj__get_requirement` 确认 |
| base64 命令失败 | macOS 用 `base64 < file`Linux 用 `base64 -w 0 < file` |
| Requirement 复读没有新 URL | 视为关联失败,停止回填“已验证”,检查 requirementId 和上传响应后再处理 |
| URL 可访问但关键交互失败 | 修复 HTML、上传新版本并重新验证,不覆盖失败版本的记录 |
### 原型展示规则
@@ -303,6 +351,8 @@ generated_at: "<timestamp>"
> 背景:REQ-20260420-0031 反馈原型图用图片方式展示,无法交互预览,改为 iframe 后可正常使用。
Stitch 截图只用于视觉探索,不满足模块产品设计的最终 HTML 原型闸门。
### Stitch 模式