PM原型工坊 — 从想法到带标注原型的全流程

> 🚀 推荐使用 GLM-5.2 模型以获得最佳效果
>
> 本技能涉及大量结构化信息提取、长文档理解和高质量 HTML/CSS/JS 代码生成，GLM-5.2 在标注数据提取准确性、代码生成规范性和长文档上下文追踪方面表现更优。建议将底层模型切换为 GLM-5.2 使用。

一句话

把用户的粗略产品想法，推进到「有定型文档 + 有带标注可交互原型」的完整交付。

三阶段流程

Stage 1: 产品定型（Shaping）→ Stage 2: 原型生成（Prototype）→ Stage 3: 标注叠加（Annotation）

用户可以只走其中某个阶段，也可以全流程走完。

Stage 1：产品定型

目标

把用户的松散想法推进到「能写 PRD、能画原型、能向团队讲清楚」的状态。

初始化工作区

判断当前目录是否已有产品工作区：存在 shaping/ 或 prototype/ 即视为已有。若没有，运行：

python3 scripts/init_workspace.py --name "<产品名>" --type "<产品类型>"

脚本会创建 {产品名}-workspace/，内含 shaping/ 和 prototype/ 两个目录，shaping 下预生成 7 份模板文档。

文档结构

推进方式

1. 读取 00-intake.md 和 01-product-shaping.md，把用户已有输入填入；没有信息的地方保留 [待确认]
2. 按「一次只问 3-5 个关键问题」推进，不让用户填大表
3. 每轮对话后更新 shaping 文档
4. 提问方法按需读取 references/shaping-playbook.md

必问维度

• 产品一句话：为谁，在什么场景，解决什么高价值问题
• 目标用户：主用户、决策者、影响者
• JTBD：情境、动机、期望进展
• 当前替代方案：痛点、切换阻力
• MVP 边界：必须有、暂缓、不做
• 核心流程：入口、主路径、关键分支
• 页面与信息架构：页面清单、职责、跳转关系
• 业务规则：状态、权限、数据来源

定型通过标准

同时满足以下条件才建议进入原型阶段：
- 产品定位能用 1-2 句话准确表述
- 至少 1 个核心用户 + 1 个核心场景 + 1 条主流程明确
- MVP 范围有明确「做/不做/待确认」
- 关键业务规则没有被含糊带过
- 未确认内容集中在 05-open-questions.md

定型确认

确认前给用户输出：

## 产品定型摘要
- 产品定位：
- 目标用户：
- 核心场景：
- 核心价值：
- MVP 范围：
- 主流程：
- 关键规则：
- 待确认问题：

请确认：以上是否可作为原型制作的基础版本？

用户确认后，追加到 06-shaped-brief.md。

Stage 2：原型生成

目标

基于定型文档生成可交互的网页原型 HTML。这一步不关心标注，只关心原型本身的质量。

输入

读取 shaping/ 目录下的定型文档，重点关注：
- 01-product-shaping.md — 产品形态、页面布局方向
- 04-pages-and-flows.md — 页面清单、流程、状态

执行原则

1. 自包含：单个 HTML 文件，CSS/JS 内联，无外部依赖
2. 可交互：页面间可跳转，Tab 可切换，弹窗可触发
3. 有 Mock 数据：用真实感的中文数据填充
4. 设计规范：遵循定型文档中的设计约定；无约定时用 SaaS 后台风格
5. 元素可识别：每个交互元素必须有唯一的 id 和 data-ann 属性

元素属性命名规范

<button id="btn-new-expense" data-ann="btn-new">+ 新建报销</button>
<input id="input-reason" data-ann="reason-input" type="text">
<div id="stat-cards" data-ann="stat-cards">...</div>

命名规则：
- 按钮：btn-{功能}
- 输入框：{字段}-input
- 区块：{区域名}

id 和 data-ann 必须稳定且唯一，Stage 3 会引用它们。

交付

原型 HTML 存入 prototype/ 目录。向用户确认原型基本正确后，进入 Stage 3。

Stage 3：标注叠加

目标

在原型上挂载标注系统。不修改原有 HTML 的结构、样式、行为，只注入一个独立的 <script> 块。

核心资产

Agent 的工作

① 提取标注数据

从定型文档中为每个页面的交互元素生成标注记录：

{
  id:     "A-P01-01",        // 唯一标识
  target: "btn-new",         // 对应 data-ann 属性值
  title:  "新建报销（主CTA）",  // ≤20字
  desc:   "员工发起新报销流程的唯一入口", // 50~150字，说业务含义
  states: { "默认": "...", "Disabled": "..." },  // 可选
  deps: ["用户已登录"],        // 可选
  validation: ["V-1: ..."],  // 可选
  flow: "P01 → P02"          // 可选
}

内容从文档中提取，不编造。标注数据规范详见 references/annotation-schema.md。

② 组装交付文件

运行脚本自动注入：

python3 scripts/inject_annotations.py \
  --html prototype/{项目}-prototype.html \
  --annotations-json '<标注数据JSON>'

脚本会将 CSS 样式、标注数据、引擎 JS 全部内联注入到 HTML 中，输出 {原文件名}-annotated.html。

也可以使用 --annotations annotations.json 从文件读取，或加 --inplace 覆盖原文件。

交付清单

验证清单

用浏览器打开带标注的交付文件：

• [ ] 原型可用：页面可导航，交互正常
• [ ] 徽章可见：每页 ≥3 个蓝色编号徽章
• [ ] 浮层完整：点击徽章弹出说明+状态+依赖+校验+流转
• [ ] 浮层不溢出：内容可滚动，不超出视口
• [ ] 关闭正常：点击外部/ESC 关闭浮层
• [ ] Toggle 可用：按钮切换标注显示/隐藏

参考文件

文件结构

skills/pm-prototype/
├── SKILL.md                              ← 本文件
├── scripts/
│   ├── init_workspace.py                 ← Stage 1 工作区初始化
│   └── inject_annotations.py             ← Stage 3 标注注入脚本
├── templates/
│   ├── annotation-overlay.css            ← 标注样式资产
│   └── annotation-overlay.js             ← 标注引擎资产
└── references/
    ├── shaping-playbook.md               ← 产品定型提问手册
    └── annotation-schema.md              ← 标注数据规范