AlignerPRD · 需求对齐协作平台

1. 这个 skill 做什么

不是 PRD 生成工具，是需求对齐协作平台。

覆盖 需求澄清 → PRD 生成 → Demo 联动 → 协作标注 → 验收闭环 全链路。

• 双产物：

1. 铆钉双面板 HTML（左/中 Demo + 右 PRD，hover/click 双向联动）
2. PRD Markdown（结构化、可评审、可导出）
• 核心差异：PRD 和 Demo 在同一个画面里互相指认，消灭歧义
• 协作风格：AI 扮演挑剔研发追问，关键节点等用户拍板

2. 触发词清单（命中任一即启用）

反例（不要用本 skill）：

• 只需要快速出原型给老板看 → prd-demo-architect
• 仅修改已有 demo 文案/颜色 → single-html-demo-builder
• 需要真正的多文件工程化项目 → ui-to-web-mobile-builder
• 做设计稿像素级走查 → kayla-design-review
• 仅需要 PRD 不需要 Demo 联动 → 用 PRD 模板直接写

3. 完整工作流（10 步，含门禁）

① 产品口述/输入需求描述

用户用自然语言描述需求，可以是：

• 一句话："做一个XX功能"
• 一段背景："目前的问题是..."
• 一份粗略的功能清单

AI 接收后不急着澄清，先完整理解。

② 选择规范包

> 规范包是可插拔的约束集，控制澄清问题的方向和 Demo 生成的风格。

需求规范（澄清阶段用于挑战需求合理性）：

设计规范（Demo 生成阶段强约束组件样式）：

应用方式：

• 需求规范 → 澄清阶段用于挑战需求合理性（"这符合'用完即走'吗？"）
• 设计规范 → Demo 生成阶段强约束组件样式
• 默认规范包：张小龙设计理念 + 微信小程序设计规范
• 用户可跳过选择，使用默认

门禁：规范包选择后（或确认使用默认）才进入澄清。

③ AI 扮演挑剔研发，进行需求问答澄清

> 核心创新：AI 不是被动记录，而是主动站在研发视角找漏洞。

澄清身份：AI 此阶段以"挑剔研发"身份提问，语气温和但逻辑锋利。

8 类追问类型（按优先级排序）：

问答规则：

• 每轮最多提 3 个问题，不轰炸产品
• 优先问 P0 功能的漏洞
• 如果用户回答"不确定"，AI 给 2-3 个选项 + "待定"
• 每个回答自动写入 PRD 对应位置（阶段④）

④ 产品逐一回答 → 答案自动写入 PRD 对应位置

> 关键机制：回答不是自由文本，而是结构化回填。

每次用户回答后，AI 自动：

1. 将答案填入 PRD 模板的对应章节
2. 如果答案引发新的子问题，记入待追问列表
3. 标记已回答/未回答的问题

PRD 回填映射：

⑤ AI 判断是否还有漏洞 → 追问或确认完成

AI 每轮结束后评估信息完整度：

完整度评估维度（满分 100）：

• 核心流程闭环：25 分（每缺一个异常/空态 -5）
• 数据边界明确：20 分（每缺一个上限/限制 -5）
• 验收标准可测：20 分（每条含糊 -5）
• 收益可量化：15 分（无指标 -15）
• 埋点可追踪：10 分（无埋点 -10）
• 规范合规：10 分（违反规范 -5/条）

判定规则：

• ≥ 80 分 → 建议完成，输出 PRD 供确认
• 60-79 分 → 再追问 1-2 轮补关键漏洞
• < 60 分 → 明确告知缺失维度，继续澄清

⑥ 锁定 PRD（Markdown 格式）

PRD 模板 v4（Rina 9 章节结构） — 这是本 skill 的默认 PRD 结构，所有项目按此输出：

> 设计原则：完整 PRD = 9 章节标准结构。先把"为什么做、给谁、怎么衡量、做什么、要多少埋点、有什么约束、不做什么、还有什么没定"全交代清楚，研发拿到这份就能直接开发。

# PRD · {需求名} v1

## 📌 1. 需求背景
- **业务背景**：（讲清楚为什么做这次更新，与公司战略/业务目标的关联）
- **现状与痛点**：
  - 痛点 1：用户反馈 / 数据下滑 / 体验断层
  - 痛点 2：...
  - 痛点 3：...

## 🎯 2. 目标用户 & 场景
- **主要用户**：（具体到画像，含年龄/职业/性别比例/使用频率等）
- **次要用户**：（如有）
- **核心场景**（3-5 个）：
  1. **场景名 1** — 一句话描述（什么时候 / 在哪 / 做什么）
  2. **场景名 2** — ...
  3. ...

## 👥 3. 用户故事
- **#1** As a **{用户角色}**, I want **{想达成什么}**, so that **{获得什么价值}**
- **#2** As a **...**, I want **...**, so that **...**
- **#3** As a **...**, I want **...**, so that **...**
（建议 3-5 条，覆盖核心场景，不堆砌）

## 📈 4. 预期收益

### 4.1 指标收益（含北极星 + 辅助）
| 指标 | 当前 | 目标 | 变化 | 评估周期 |
|---|---|---|---|---|
| ⭐ {北极星指标} | ... | **...** | **+X%** | 上线后 X 周 |
| 次日留存 | ... | ... | +Xpp | 4 周 |
| 核心功能 DAU | ... | ... | +X% | 8 周 |
| ... | ... | ... | ... | ... |

### 4.2 用户价值收益
- 【解决痛点】... → ...
- 【解决痛点】... → ...
- 【体验提升】减少操作步骤 / 降低认知负担 / ...

---

## 🧩 5. 功能描述

> 每个功能 = 一张卡片。卡片标题含 ID（F1/F2…）+ 名称 + 优先级；点开卡片展开完整 PRD（用户故事/AC/4 态交互/流程/边界/埋点/收益 + 关键模块的运营参数表）。

### F1 · {功能名} [P0]

> {一句话功能描述}

#### 📝 用户故事
As a {角色}, I want {目标}, so that {价值}

#### ✅ 验收标准（AC）
- [ ] AC1: ...
- [ ] AC2: ...

#### 🔀 交互说明（4 态）
- **正常态**：...
- **空态**：...
- **异常态**：...
- **权限**：...

#### 🔄 关键流程
1. ...
2. ...
3. ...

#### 📐 数据边界
（字段长度、数量上限、精度等）

#### 🔧 运营参数（可选，仅核心模块有）
- 配置表 / 概率表 / 任务表 / 平台限制 / 期望产能 / 节奏说明

#### 📊 埋点
| 事件名 | 触发时机 | 参数 |
|---|---|---|
| `event_xxx` | ... | ... |

#### 📈 功能级预期收益
- 指标：...
- 变化幅度：**+X%**
- 评估周期：...
- 用户价值：...

### F2 · {功能名} [P0]
（同上结构）

...

---

## 📊 6. 数据需求

### 6.1 埋点（汇总各功能模块）
| 事件名 | 触发时机 | 携带参数 | 归属功能 |
|---|---|---|---|
| `event_xxx` | ... | ... | F1 ... |
| ... | ... | ... | ... |

### 6.2 看板
- **核心监控指标**：（北极星 + 关键辅助指标）
- **数据来源**：客户端埋点（XX SDK）+ 后端业务库（XX 表）
- **统计口径**：T+1 离线 / 实时；调度时间；实时大盘地址
- **看板路径**：（如：腾讯灯塔 → XX 项目 → 「专题」）

---

## ⚙️ 7. 非功能需求
| 维度 | 要求 |
|---|---|
| 性能 | 首屏 < 2s / 交互响应 < 100ms / AI 流式首字 < 800ms |
| 可访问性 | WCAG 2.1 AA / 触控 ≥ 44×44px / 对比度 ≥ 4.5:1 |
| 兼容性 | iOS 14+ / Android 9+ / 微信基础库 ≥ 2.30.0 |
| 隐私合规 | （涉及 PII / 未成年人数据 / 实名信息时填写） |
| 稳定性 | 接口失败率 < X% / 关键事务一致性 100% |

---

## 🚧 8. 边界 & 不做的事

### 不做的事
- ❌ ...（明确告知本期不做什么，理由是什么）
- ❌ ...

### 后续迭代考虑
- 🔮 v3.2 ...
- 🔮 v4.0 ...

---

## ❓ 9. 遗留问题
| # | 问题 | 状态 | 负责人 |
|---|---|---|---|
| 1 | ... | 待定 / 待对齐 / 待法务 / 待调研 | XX |
| 2 | ... | ... | ... |

门禁：PRD 给用户评审，明确得到 "OK / 锁定" 或修订意见后再进阶段 ⑦。

⑦ 按设计规范生成 HTML Demo

> 基于阶段②选定（或默认）的设计规范包，生成可交互 Demo。

端类型确认（⚠️ 铁律，必须在写代码前确认）：

Demo 生成约束：

• 每个功能模块的 UI 区块必须带 data-section-id 属性
• data-section-id 值与 PRD 章节的锚点 ID 一一对应
• 交互闭环：所有按钮/卡片/Tab 都有行为
• WCAG 2.1 AA 合规
• 动效遵循 references/ui-animation.md（复用 prd-demo-architect）
• 🏷️ xiaomi created 水印

⑧ 双面板联动视图（Demo 在左 · PRD 在右）

布局规约：⚠️ Demo 必须在左 + PRD 必须在右（与代码编辑器/IDE 习惯一致：内容在左、参考资料在右）

┌─────────────────────────────────────────────────────────────────────┐
│  🔍 AlignerPRD · {产品名} v3        [📋导出PRD] [✅验收] [⊕全展开]   │
├──────────────────────────────┬──────────────────────────────────────┤
│                              │  ┌─────────────────────────────────┐ │
│                              │  │ 📌 1. 本次更新背景         ▾    │ │
│   Demo 面板（左 · flex:3）   │  │   - 业务背景                     │ │
│                              │  │   - 核心痛点                     │ │
│   ┌───────────────────────┐ │  │   - 本次范围                     │ │
│   │   Phone / Desktop     │ │  └─────────────────────────────────┘ │
│   │                       │ │  ┌─────────────────────────────────┐ │
│   │  [data-section-id     │ │  │ 👥 2. 用户故事             ▾    │ │
│   │   ="F1"]  推荐流      │ │  │   #1 As a / I want / so that    │ │
│   │                       │ │  │   #2 ...                        │ │
│   │  [data-section-id     │ │  └─────────────────────────────────┘ │
│   │   ="F2"]  搜索框      │ │  ┌─────────────────────────────────┐ │
│   │                       │ │  │ ⭐ 3. 北极星 & 关键指标    ▾    │ │
│   └───────────────────────┘ │  │   🌟 北极星 + 📊 辅助 3-5 个    │ │
│                              │  └─────────────────────────────────┘ │
│                              │  ┌─ 🧩 4. 功能描述 ──────────────┐ │
│                              │  │ ▾ 📱 首页 (5 功能)             │ │
│                              │  │   ┌─ F1 · 推荐流 [P0] ────┐    │ │
│                              │  │   │ 一句话 + AC          │    │ │
│                              │  │   │ [展开完整 PRD ▾]      │    │ │
│                              │  │   └──────────────────────┘    │ │
│                              │  │ ▸ 📚 书架 / ▸ 🐧 小鹅 / ...  │ │
│                              │  └────────────────────────────────┘ │
├──────────────────────────────┴──────────────────────────────────────┤
│  xiaomi created · hover PRD→Demo闪动 · click Demo→PRD定位           │
└─────────────────────────────────────────────────────────────────────┘

PRD 面板信息架构（Rina 9 章节，自上而下）：

1. §1 需求背景（默认展开）— 业务背景 + 现状与痛点
2. §2 目标用户 & 场景（默认展开）— 主要/次要用户 + 3-5 个核心场景
3. §3 用户故事（默认展开）— 3-5 条 As a / I want / so that
4. §4 预期收益（默认折叠）— 4.1 指标收益（含⭐北极星）+ 4.2 用户价值收益
5. §5 功能描述（标题分隔栏 + 功能卡片列表）— 下方按页面分组的功能卡片
• 页面分组（首页/书架/...）— 默认仅首页展开
• 功能卡片（F1/F2/...）— 默认折叠到精简态，点「展开完整 PRD ▾」看全字段
6. §6 数据需求（默认折叠）— 6.1 埋点汇总（自动收集功能卡片中的 tracking）+ 6.2 看板
7. §7 非功能需求（默认折叠）— 性能/可访问性/兼容性/隐私/稳定性表格
8. §8 边界 & 不做的事（默认折叠）— 不做 list + 后续迭代考虑 list
9. §9 遗留问题（默认折叠）— 表格：# / 问题 / 状态 / 负责人

布局技术实现：

• DOM 顺序：源 demo 的 sidebar 位置改为 PRD panel（在前），main 含 phone（在后）
• CSS Grid 强制翻转：.app > .prd-panel { grid-column: 2 } + .app > .main { grid-column: 1 }
• 这样 DOM 顺序不变（不破坏源 demo 逻辑），视觉上 Demo 在左、PRD 在右

联动机制（详见 references/xray-interaction-spec.md）：

PRD 卡片结构：

• 页面级分组（P-home, P-detail...）→ 可折叠
• 功能级卡片（F1, F2...）→ 铆钉联动的最小单元
• 每张卡片：左边框色标（P0红/P1橙/P2灰）
• 默认展示：功能名 + 描述 + 验收标准
• 点击「展开详情」：完整用例 + 流程 + 埋点 + 协作标注

⑨ 协作标注回写

> 研发/供应商在 Demo 上发现问题，直接在对话中描述 → AI 自动回写 PRD。

流程：

1. 研发在对话中说："首页推荐流的空态没说清楚，加载失败时应该显示重试按钮"
2. AI 识别涉及的模块（F1 首页推荐流）
3. 自动在 PRD 的 F1 模块 → 交互说明 → 异常态 追加："加载失败显示重试按钮"
4. PRD 版本号递增：v1 → v1.1
5. 在 PRD 卡片上标记「📝 协作标注」标签

回写规则：

• 回写内容用 [协作标注] 前缀标记，与原始 PRD 内容区分
• 回写后自动通知用户确认
• 可选择接受/拒绝/修改回写内容

⑩ 高保真 UI 还原

触发条件：用户说"上传了UI图" / "还原高保真" / 发送了设计稿截图

流程：

1. AI 读取用户上传的 UI 截图
2. 对比当前 Demo，输出 diff 报告（不是直接重写！）：
• 布局差异（间距、排列、层级）
• 颜色差异（主色、辅色、文字色）
• 组件差异（按钮形状、卡片样式、图标风格）
• 文案差异（标题、占位文字、提示语）
3. 用户确认 diff → AI 重绘 Demo 还原高保真
4. 铆钉结构不变（data-section-id 保持对应）
5. 版本递增 v1 → v2
6. 自动跑 JS 语法体检 + 铆钉对齐检查

验收闭环（附加步骤，按需触发）

触发条件：用户说"验收" / "走验收流程" / "对一下交付"

流程：

1. 进入验收模式，Demo 面板每个 data-section-id 区域旁边出现打标控件：
• ✅ 符合 / ❌ 不符合 / ⚠️ 部分符合
2. 测试人员逐条打标
3. 自动生成验收报告：
• 通过率（✅ 占比）
• 不符合项列表 + 对应 PRD 位置
• 遗留问题汇总
4. 验收报告可导出为 HTML 或 Markdown

4. ⚠️ 铁律（每次必须遵守）

铁律一：端类型先确认

开工前必须先确认目标端（移动端 / PC 端 / 双端 / 响应式 Web）。端类型未确认前，禁止进入需求澄清，禁止动手写代码。

铁律二：xiaomi created 水印

每个 demo 输出必须在右下角加上 xiaomi created 水印（文案严格一致、不可遮挡交互、aria-hidden）。

铁律三：Demo 在左 + PRD 在右

双面板布局强制：Demo（phone shell / desktop shell）必须在视觉左侧，PRD panel 必须在视觉右侧。源 demo 的 sidebar 替换为 PRD 时，必须用 CSS Grid grid-column 强制翻转：

.app{display:grid !important;grid-template-columns:1fr 540px !important}
.app > .prd-panel{grid-column:2}
.app > .main{grid-column:1;grid-row:1}

理由：与代码编辑器/IDE/产品工具习惯一致（内容在左，参考资料在右），用户视线流自然。

铁律四：PRD 信息架构必须用 Rina 9 章节

PRD panel 自上而下必须按以下 9 章节组织（功能卡片夹在中间，前 4 章为前置上下文、后 4 章为后置约束/收尾）：

每个功能卡片精简态显示「ID + 名称 + 优先级 + 一句话 + AC」，点「展开完整 PRD ▾」展开 6+ 大块（用户故事/AC/4 态交互/流程/边界/埋点/收益 + 可选运营参数 extra 块）。

为什么是这个顺序：先讲「为什么做」+「给谁做」+「怎么衡量」让阅读者理解上下文 → 进入「具体做什么」（功能卡片）→ 然后再交代「数据/非功能/不做的事/遗留」这些约束和收尾。研发拿到这份就能直接开发，老板看完就能拍板，不会因为"少了关键章节"被打回。

禁止：

• 跳过章节（即使某章节为空也要保留标题，标"本期无"）
• 调整章节顺序
• 把功能描述放在数据需求之前的全局信息之前

铁律五：每次更新 skill 后必须同步桌面 zip

触发条件：对 ~/.workbuddy/skills/aligner-prd/ 下任何文件（SKILL.md / references/.html / references/.md）做了任何修改（增/删/改），无论改动多小。

强制动作（不需问用户、不延后、当轮完成）：

cd /Users/rinami/.workbuddy/skills && \
/usr/bin/zip -r /Users/rinami/Desktop/aligner-prd.zip aligner-prd/ -x "*.DS_Store"

理由：

• 用户始终能从桌面拿到最新版分享给同事/备份/上传团队空间
• 避免本地 skill 已升级、桌面 zip 还停在旧版的"双轨问题"
• 当用户问"桌面 skill 是不是最新的"时，答案永远是 ✅

不打包等于没改完：本 skill 任何升级，必须以"桌面 zip 已同步"为收尾动作，否则视为任务未完成。

铁律六：视图模式切换器（只看 Demo / Demo + PRD）

业务诉求：交付物面向两类不同场景——

• PM ⇄ 研发评审：左 Demo + 右 PRD，铆钉双向联动（默认形态）
• 老板/合作方走查 & 用户体验：只看 Demo，PRD 不显示，免文档干扰，看产品本身

强制实现：每个 Aligner 双面板 demo 必须自带视图切换器，无需用户额外要求。

实现见：references/xray-template-mobile.html / xray-template-pc.html 已预置完整代码，新建 demo 直接复用即可。详细规范见 references/xray-interaction-spec.md §10。

5. 协作守则（与十三香配合）

1. 能推断就推断，少问开放问题，多给 2-4 个选项 + "自定义"逃生口
2. AI 澄清阶段要"挑刺"，不是做笔记，是找漏洞
3. 关键节点要确认，不要从需求一路冲到 demo
4. 三件套自检不能省：JS 体检 + 铆钉对齐 + 桌面副本
5. 改完立刻预览，让用户看到效果再继续
6. 认错就回滚，用户说"你写的一般" → 简化 / 还原 / 注释包裹
7. 写记忆：每次实质工作完成后追加 .workbuddy/memory/YYYY-MM-DD.md
8. 公益项目语境（如企鹅读伴）：⚠️ 严禁出现成本 / ROI / 利润等商业词汇

6. 工具与命令速查

7. 输出目录约定

{workspace}/
├── output/
│   ├── PRD-{需求名}-v{版本}.md
│   ├── aligner-{需求名}-v{版本}.html     # 铆钉双面板
│   └── acceptance-report-v{版本}.html     # 验收报告（按需）
└── .workbuddy/memory/YYYY-MM-DD.md

桌面副本：/Users/rinami/Desktop/{产品名}-aligner-v{版本}.html

8. Checklist · 收尾自查（每次必做）

• [ ] ⚠️ 端类型已确认（移动端 / PC 端 / 双端 / 响应式 · 必须先问再做）
• [ ] 规范包已选择（或确认使用默认）
• [ ] AI 澄清完成，完整度 ≥ 80 分
• [ ] PRD 已产出，用户已评审锁定
• [ ] Demo 生成完成，所有功能模块带 data-section-id
• [ ] 铆钉对齐检查通过（PRD 侧 ID = Demo 侧 ID）
• [ ] 双向联动正常（hover PRD→Demo闪动 / click Demo→PRD定位）
• [ ] WCAG / 动效 / 跳转闭环三项都满足
• [ ] 🏷️ xiaomi created 水印已加
• [ ] JS 语法体检通过
• [ ] 路由对齐检查通过
• [ ] 桌面副本已同步
• [ ] preview_url 已展示
• [ ] PRD + HTML 已 deliver_attachments
• [ ] 当日 memory 已追加
• [ ] 公益项目语境检查（如适用）：无成本 / ROI / 利润词汇

9. 参考资料（references/ 目录）

按需读取：

• references/product/weixin-philosophy.md — 张小龙设计理念（需求澄清方法论）
• references/product/custom-principles.md — 团队自定义原则（用户上传后填充）
• references/design/weixin-design-spec.md — 微信小程序设计规范
• references/design/material-design.md — Material Design 核心规范
• references/xray-interaction-spec.md — 铆钉交互规范（联动逻辑、闪动效果、标注回写）
• references/xray-template-mobile.html — 📱 移动端铆钉双面板模板
• references/xray-template-pc.html — 💻 PC 端铆钉双面板模板

> 复用 prd-demo-architect 的参考文件：

> - ../prd-demo-architect/references/wcag-checklist.md — WCAG 2.1 AA 清单

> - ../prd-demo-architect/references/web-design-guidelines.md — Web 设计通用规范

> - ../prd-demo-architect/references/ui-animation.md — UI 动效规范

10. 与 prd-demo-architect 的关系