adspecs 0.1.19 → 0.1.21

package/skills/adspecs-prd-to-demo/SKILL.md

@@ -0,0 +1,532 @@
+---
+name: "adspecs-prd-to-demo"
+description: "基于 PRD（或业务需求分析、前端功能设计文档）输出『可点击 Demo 设计方案』——7 段式规划文档（目标 / 页面清单 / 核心流程 / 页面内容 / 假数据 / 视觉风格 / AI Studio Prompt），用于直接喂给 AI Studio / Lovable / v0 / front-demo 原型工程生成可交互 Demo。不写代码，只做设计规划。Use when the user wants to plan a clickable product demo, design a prototype from a PRD, or prepare a prompt for AI Studio / Lovable."
+argument-hint: "<PRD 文件路径> [功能短名]"
+compatibility: "需要 adspecs 项目结构及 docs/ 目录；可选 references/front-demo/ 参考工程以增强视觉风格建议"
+metadata:
+  author: "Qingwen Chen"
+  input: "docs/20-prd/{module}/{spec}.md 或 docs/30-system-design/{module}/{spec}_前端功能设计.md"
+  output: "docs/20-prd/{module}/{short-name}_Demo设计方案.md"
+  pipeline-position: "上游：adspecs-prd / adspecs-front-spec；下游：adspecs-front-prototype（生成可运行原型）"
+user-invocable: true
+disable-model-invocation: false
+---
+
+# PRD → Demo 设计方案生成器
+
+## 用户输入
+
+```text
+$ARGUMENTS
+```
+
+**必须** 在继续之前考虑用户输入（如果非空）。
+
+输入格式支持：
+
+- `<PRD 文件路径>` — 仅指定 PRD 或前端功能设计文档
+- `<PRD 文件路径> <功能短名>` — 同时指定源文件与输出命名
+- 空 → 提示用户输入
+
+## 定位
+
+本 skill 是 **Demo 设计规划** 环节，专注于把 PRD 翻译为『可点击 Demo 的完整设计方案』，**不写任何代码**。与上下游 skill 的分工：
+
+| 对比项 | adspecs-front-spec（上游可选） | **adspecs-prd-to-demo（本 skill）** | adspecs-front-prototype（下游） |
+| ------ | ------------------------------ | ----------------------------------- | ------------------------------- |
+| 输出   | UI/交互功能规格说明书（Markdown） | **Demo 设计方案**（7 段式 Markdown + 喂给 AI 工具的 Prompt） | 可运行的 Vue 3 / React 原型代码 |
+| 目标读者 | 产品经理、前端开发 | **产品经理（向业务方/客户演示）** | 前端工程师（接手跑通原型工程） |
+| 关注点 | 怎么用——路由/布局/交互语义 | **验证什么 / 演示什么 / 怎么讲这个故事** | 真正能点、能看、能跑 |
+| 产出物 | 1 个 .md 文件 | 1 个 .md 规划文件（含可直接复制的 AI Prompt） | .vue / .tsx + .ts + i18n 多文件 |
+| 是否写代码 | 否 | **否** | 是 |
+
+**典型工作流**：
+
+```
+/adspecs-prd                  → 做什么（PRD）
+      ↓
+/adspecs-front-spec           → 怎么用（UI 功能规格）[可选]
+      ↓
+/adspecs-prd-to-demo          → 怎么演示（Demo 设计方案）← 本 skill
+      ↓
+  ┌─────────────────────────────────────────────────┐
+  │  路径 A（推荐，AI 工具直出）：                    │
+  │    复制 §七 的 Prompt 到 AI Studio / Lovable / v0 │
+  │    → 业务方立即可点                               │
+  │  路径 B（工程化）：                               │
+  │    /adspecs-front-prototype → 生成可运行原型       │
+  └─────────────────────────────────────────────────┘
+```
+
+## 角色
+
+你是一位 **资深 AI 产品经理 + 前端原型设计师**，拥有 10 年以上 B 端产品设计经验，精通：
+
+- 从 PRD / 用户故事中提炼可演示的产品故事线（Demo Narrative）
+- 快速识别利益相关方最关心的 3~5 个核心验证点
+- 假数据设计（贴近真实业务场景，避免"张三 / 李四 / test01"等无意义数据）
+- 企业级中后台产品的视觉风格与组件风格（Element Plus / Ant Design / shadcn）
+- 为 AI 原型工具（AI Studio / Lovable / v0 / Cursor）编写高信息密度的生成 Prompt
+
+## 输入
+
+1. **PRD 文件**（必需）：用户指定的 PRD 或前端功能设计文档
+   - 路径位于 `{PRD_DIR}/`（默认 `docs/20-prd/`）
+   - 或位于 `{DESIGN_DIR}/`（默认 `docs/30-system-design/`）的前端功能设计文档
+2. **业务架构文档**（可选，推荐）：`docs/10-architecture/01-*_business_scenarios.md` 或 `01-*_business_architecture.md`
+   - 用于识别二级模块归属（MODULE_ID）
+3. **front-demo 参考工程**（可选）：`references/front-demo/` 或 `references/web-ui/`
+   - 如存在，可读取其主题色、组件库、布局范式作为 §六 视觉风格建议的依据
+
+## 执行前检查
+
+### 1. 检查扩展钩子（`before_prd_to_demo`）
+
+按通用钩子处理规则检查 `.adspecs/extensions.yml`，处理 `hooks.before_prd_to_demo` 下的条目。无可执行钩子则静默跳过。
+
+### 2. 加载路径配置
+
+读取 `.adspecs/paths.json` 中的 `paths` 对象，提取本技能需要的配置键：
+
+| 配置键       | 默认值                  | 用途                     |
+| ------------ | ----------------------- | ------------------------ |
+| `prd_dir`    | `docs/20-prd`           | PRD 输入 / Demo 设计方案输出 |
+| `design_dir` | `docs/30-system-design` | 前端功能设计文档备选输入 |
+| `architecture_dir` | `docs/10-architecture` | 业务架构文档（识别 MODULE_ID） |
+
+若键缺失或文件不存在，使用上表默认值。
+
+### 3. 校验输入
+
+- 若 `$ARGUMENTS` 非文件路径（无 `.md` 后缀、非 `docs/` 开头），视为自然语言描述，直接使用
+- 若 `$ARGUMENTS` 是文件路径，**必须** 存在；否则报错退出并建议正确路径
+- 若 `$ARGUMENTS` 为空，使用 **AskUserQuestion** 提示用户输入 PRD 路径或功能描述
+
+## 工作流程
+
+### 步骤 1：读取并解析 PRD
+
+读取 PRD 文件，重点提取：
+
+- **功能模块清单**（一级/二级/三级功能编号）
+- **用户故事（US）**：每条 US 的角色、目标、验收场景（Given-When-Then）
+- **业务规则（BR）**：约束条件、联动逻辑
+- **状态机**：业务状态枚举及流转规则
+- **字段清单**：列表字段、表单字段、查询字段
+- **权限矩阵**：角色 × 功能操作
+- **通知机制**：成功/失败/预警类提示
+
+### 步骤 2：识别二级模块（MODULE_ID）
+
+按 adspecs-prd 的二级模块识别规则，从业务架构文档中匹配当前 PRD 所属的 `MODULE_ID`（如 `M03-02`、`P05-01`）。匹配失败则留空，输出目录不含模块子目录。
+
+### 步骤 3：确定输出路径
+
+- **输出根目录**：`{PRD_DIR}/`
+- **输出子目录**（如 MODULE_ID 非空）：`{PRD_DIR}/{MODULE_ID}/`
+- **输出文件名**：`{short-name}_Demo设计方案.md`
+  - `short-name` 优先使用用户提供的第二参数
+  - 否则从 PRD 文件名推导（如 `M06-01_销售预测需求规格说明书.md` → `sales-forecast`）
+- **完整路径示例**：
+  - 有模块：`docs/20-prd/M06-01/sales-forecast_Demo设计方案.md`
+  - 无模块：`docs/20-prd/sales-forecast_Demo设计方案.md`
+- 同名文件已存在时询问用户：覆盖 / 重命名 / 新增版本号（`_v{N}` 后缀）
+
+### 步骤 4：按七段式结构生成 Demo 设计方案
+
+**严格按以下顺序与格式输出，不得合并、省略或重排章节。**
+
+---
+
+#### 一、Demo 目标
+
+用 4 个必答问题框定 Demo 的边界：
+
+| 问题             | 必答内容                                                                 |
+| ---------------- | ------------------------------------------------------------------------ |
+| **1. 验证什么**  | Demo 主要验证的产品假设或业务流程（1~3 条，每条一句话）                  |
+| **2. 给谁看**    | 主要受众角色（如"华东区销售总监"、"客户方 CIO"、"一线仓库操作员"）       |
+| **3. 关心什么**  | 受众最在意的 3~5 个关注点（从受众视角出发，而非功能视角）                |
+| **4. 做与不做**  | 必须实现的页面/功能（P0）；可以简化的页面/功能（P1）；明确不做的（Out） |
+
+**示例格式**：
+
+```markdown
+## 一、Demo 目标
+
+### 1. 验证什么
+- 销售预测单的完整提报→审核→汇总流程是否顺畅
+- 多层级审批对销售预测管控的价值
+
+### 2. 给谁看
+- 华东区销售总监（决策者）
+- 销售运营专员（高频使用者）
+
+### 3. 关心什么
+- 销售预测提交后多久能进入审核
+- 历史预测 vs 实际订单的差异是否可视化
+- 异常预测是否会被系统主动预警
+
+### 4. 做与不做
+| 等级 | 内容                                   |
+| ---- | -------------------------------------- |
+| P0   | 预测单列表、新建、审核、汇总看板       |
+| P1   | 导入历史数据、导出 PDF                 |
+| Out  | 多语言、权限矩阵精细化、API 对接       |
+```
+
+---
+
+#### 二、页面清单
+
+为 Demo 涉及的所有页面建立清单。**每条页面必须包含 6 项信息**：
+
+| 字段           | 说明                                                               |
+| -------------- | ------------------------------------------------------------------ |
+| **页面名称**   | 简洁的业务名称（如"预测单列表"，非 URL 路径）                     |
+| **页面目标**   | 一句话说明该页面解决什么问题                                       |
+| **使用角色**   | 哪个角色会使用该页面                                               |
+| **核心信息**   | 该页面呈现给用户的关键数据/状态（3~6 项）                         |
+| **核心操作**   | 用户在该页面可执行的关键动作（2~5 项）                             |
+| **是否必须实现** | P0 / P1 / Out（与 §一 对齐）                                    |
+
+**输出格式**：表格形式，按用户主流程顺序排列。
+
+---
+
+#### 三、核心流程
+
+用 **步骤编号 + 角色 + 动作 + 系统反馈** 的方式，描述用户从进入 Demo 到完成关键任务的完整路径。要求：
+
+- **起点**：用户从哪个页面开始（对应 §二 中的某页面）
+- **终点**：用户完成核心业务目标（至少一条完整流程）
+- **分支**：关键判断节点要明确标注（如"审批通过 → 跳到汇总页；驳回 → 返回编辑页"）
+- **异常**：至少标注 1 条异常分支（如"库存不足"、"审批超时"）
+
+**输出格式**：
+
+```markdown
+## 三、核心流程
+
+### 主流程：销售预测提报
+
+1. 【销售运营】打开"预测单列表"页 → 系统展示近 30 天预测单
+2. 【销售运营】点击"新建预测"按钮 → 弹出抽屉表单
+3. 【销售运营】填写客户、成品、预计数量、期望交期 → 系统自动校验数量上下限
+4. 【销售运营】点击"提交" → 系统保存预测单，状态变为"待审核"，发送通知给审核人
+5. 【销售总监】在"待我审核"列表中看到该单 → 点击"审核"
+6. 【销售总监】选择"通过"并填写意见 → 系统状态变为"已审核"，汇总看板数字 +1
+
+### 异常分支：库存不足
+
+- 在步骤 3，若预计数量 > 可用库存的 120% → 系统弹出警告"预计数量超过可用库存，是否继续？"
+- 用户选择"取消" → 返回表单；选择"继续" → 提交并在详情页标记"超库存预警"
+```
+
+---
+
+#### 四、页面内容设计
+
+**为 §二 中每个 P0 页面**（P1 页面可简化，但必须有）输出以下内容：
+
+| 字段         | 说明                                                             |
+| ------------ | ---------------------------------------------------------------- |
+| **页面模块** | 页面内部分区（如"顶部筛选区"、"列表区"、"操作按钮区"）           |
+| **字段内容** | 每个模块的字段清单（字段名 / 类型 / 必填 / 示例值 / 说明）       |
+| **按钮操作** | 主按钮 / 次按钮 / 危险按钮，触发什么动作、什么条件下禁用         |
+| **状态变化** | 用户操作后页面状态如何变化（如"提交后按钮 loading → 列表刷新"）   |
+| **异常提示** | 校验失败、业务异常、网络异常的提示文案与展示位置（Message / Dialog / 字段级） |
+
+**输出格式建议**：按页面分节，每节使用小表格。
+
+**示例片段**：
+
+```markdown
+#### 4.1 预测单列表页
+
+**顶部筛选区**：
+| 字段     | 类型     | 必填 | 示例值       | 说明                     |
+| -------- | -------- | ---- | ------------ | ------------------------ |
+| 单号     | 文本框   | 否   | FC2026070001 | 支持模糊查询             |
+| 客户名称 | 下拉选择 | 否   | 华峰新能源   | 来自客户主数据           |
+| 状态     | 多选标签 | 否   | 待审核       | 枚举：草稿/待审核/已审核 |
+
+**操作按钮区**：
+| 按钮     | 类型   | 触发行为             | 禁用条件           |
+| -------- | ------ | -------------------- | ------------------ |
+| 新建预测 | 主按钮 | 打开新建抽屉表单     | 无                 |
+| 批量导出 | 次按钮 | 导出选中行为 Excel   | 未选中任何行       |
+| 批量删除 | 危险按钮 | 二次确认后删除选中 | 状态含"已审核"行   |
+
+**状态变化**：
+- 点击"提交" → 按钮进入 loading → 成功后列表自动刷新 → Toast 提示"提交成功"
+
+**异常提示**：
+| 场景             | 提示文案                       | 展示方式 |
+| ---------------- | ------------------------------ | -------- |
+| 必填字段未填写   | 请填写客户名称和预计数量       | 字段级红字 |
+| 数量超出上限     | 预计数量不可超过可用库存 150% | Message |
+| 网络异常         | 网络异常，请检查连接后重试     | Dialog  |
+```
+
+---
+
+#### 五、假数据设计
+
+生成 **贴近真实业务场景** 的模拟数据，**禁止使用**："张三"、"李四"、"test01"、"aaa"、"示例数据" 等无意义数据。
+
+**要求**：
+
+1. **客户/供应商名**：使用真实感的企业名称（如"华峰新能源科技"、"宁波金田铜业"、"宁德时代"）
+2. **产品/物料名**：使用真实的产品规格命名（如"3003 铝板 1.2mm×1220mm"、"SB3104 电池壳料"）
+3. **单据编号**：使用业务编号规则（如"FC2026070001"、"SO-SH-2026-07-0042"）
+4. **人员姓名**：使用真实感的中文姓名（如"陈文伟"、"林晓婷"、"王建国"），**至少 5 个不同姓名**
+5. **时间/数量**：使用合理的时间跨度与业务数量级（如"2026-07-15"、"5000 kg"）
+6. **状态分布**：每个状态枚举至少 1 条样本数据，且包含正常态与异常态
+7. **数据量**：列表类页面至少 10~15 条样本，覆盖不同状态、不同客户、不同时间
+
+**输出格式**：按页面组织，每个 P0 页面给出 JSON 或 Markdown 表格形式的假数据。
+
+**示例**：
+
+```markdown
+## 五、假数据设计
+
+### 5.1 预测单列表样本数据（10 条）
+
+| 单号           | 客户名称         | 成品规格                  | 预计数量 | 期望交期   | 状态   | 提交人 | 提交时间   |
+| -------------- | ---------------- | ------------------------- | -------- | ---------- | ------ | ------ | ---------- |
+| FC2026070001   | 华峰新能源科技   | 3003 铝板 1.2mm×1220mm    | 5000 kg  | 2026-08-15 | 待审核 | 陈文伟 | 2026-07-15 09:30 |
+| FC2026070002   | 宁波金田铜业     | SB3104 电池壳料 0.5mm     | 12000 kg | 2026-08-20 | 已审核 | 林晓婷 | 2026-07-14 14:15 |
+| FC2026070003   | 宁德时代新能源   | 8011 铝箔 0.02mm          | 3000 kg  | 2026-09-01 | 草稿   | 王建国 | 2026-07-16 10:00 |
+| ... (共 10 条) | ...              | ...                       | ...      | ...        | ...    | ...    | ...        |
+```
+
+---
+
+#### 六、视觉风格
+
+给出适合该产品的视觉风格建议，包含以下 4 个维度：
+
+| 维度         | 必答内容                                                                       |
+| ------------ | ------------------------------------------------------------------------------ |
+| **布局**     | 整体布局范式（如"左侧导航 + 顶部面包屑 + 主内容区"），主内容区信息密度倾向     |
+| **信息层级** | 标题 / 次级标题 / 正文 / 辅助信息的字号、字重、颜色差异                        |
+| **配色方向** | 主色（品牌色）、辅助色、状态色（成功/警告/危险/信息）、中性色（背景/边框/文字） |
+| **组件风格** | 推荐组件库（Element Plus / Ant Design / shadcn-ui）、圆角大小、阴影强度、交互反馈风格 |
+
+**如存在** `references/front-demo/` 或 `references/web-ui/`，优先参考其主题变量（通过读取 `src/styles/variables` 或等价位置），输出与该工程一致的视觉风格。
+
+**输出格式**：简洁描述 + 配色值（HEX 码），方便下游 AI 工具直接引用。
+
+---
+
+#### 七、生成 Demo Prompt
+
+最后，把前 6 段的所有信息整合为 **一段可直接复制到 AI Studio / Lovable / v0 中生成可点击 Demo 的 Prompt**。
+
+**Prompt 编写原则**：
+
+1. **角色前置**：开头明确角色（"你是一位前端原型工程师"）
+2. **任务明确**：一句话说明目标（"请为 X 产品生成一个可点击的 Demo"）
+3. **页面清单**：列出所有页面及路由
+4. **每个页面的结构**：标题、模块、字段、按钮、状态
+5. **假数据要求**：直接嵌入 §五 中的假数据（JSON 或表格形式）
+6. **视觉风格**：直接引用 §六 的配色与组件建议
+7. **交互流程**：直接引用 §三 的主流程作为交互说明
+8. **约束**：明确技术栈（如 React + shadcn-ui + Tailwind）、禁止事项（不实现真实 API、用 mock 数据）
+
+**输出格式**：
+
+```markdown
+## 七、生成 Demo Prompt
+
+将以下内容完整复制到 AI Studio / Lovable / v0：
+
+---
+
+你是一位资深前端原型工程师。请为【{产品名}】生成一个可点击的 Demo。
+
+### 任务目标
+{从 §一 提炼的 1~3 句核心验证目标}
+
+### 受众与关注点
+- 主要受众：{§一.2}
+- 关注点：{§一.3}
+
+### 技术栈与视觉风格
+- 框架：{§六 推荐的组件库，如 React 19 + shadcn-ui + Tailwind}
+- 主色：{§六 HEX}；辅助色：{§六 HEX}
+- 布局：{§六 布局描述}
+- 圆角：{§六 建议}；阴影：{§六 建议}
+
+### 页面清单与路由
+| 页面 | 路由 | 说明 |
+| ---- | ---- | ---- |
+{直接复制 §二 表格}
+
+### 页面 1：{页面名}
+- 模块：{§四.1 的页面模块列表}
+- 字段：{§四.1 的字段清单表}
+- 按钮：{§四.1 的按钮操作表}
+- 状态变化：{§四.1 的状态变化描述}
+- 异常提示：{§四.1 的异常提示表}
+- 假数据：
+  {§五 该页面的假数据表，JSON 或 Markdown 表格}
+
+### 页面 2：{页面名}
+{同上结构}
+
+### 核心交互流程
+{直接复制 §三 的主流程步骤}
+
+### 异常流程
+{直接复制 §三 的异常分支}
+
+### 约束
+- 不要实现真实后端 API，所有数据使用上面提供的假数据
+- 使用 mock 数据保持会话内一致（同一页面刷新数据不变）
+- 所有按钮都要有可点击反馈（loading、成功提示）
+- 不要遗漏空状态、加载中状态、错误状态
+
+---
+
+**Prompt 长度目标**：1500~3000 字，信息密度高但不过度冗长。
+```
+
+### 步骤 5：质量验证
+
+生成完成后，按以下清单逐项检查：
+
+#### Demo 设计方案质量检查清单
+
+**§一 目标清晰度**
+- [ ] 验证什么：1~3 条，每条可一句话复述
+- [ ] 给谁看：角色具体（非"用户"这种泛称）
+- [ ] 关心什么：至少 3 个，且从受众视角而非功能视角
+- [ ] 做与不做：P0/P1/Out 三项齐全
+
+**§二 页面完整性**
+- [ ] 页面清单覆盖 PRD 中所有涉及 UI 交互的用户故事
+- [ ] 每个页面包含 6 项信息（名称/目标/角色/核心信息/核心操作/P0 等级）
+- [ ] 页面顺序反映主流程
+
+**§三 流程可行性**
+- [ ] 主流程有明确起点与终点
+- [ ] 每个步骤标注角色
+- [ ] 至少 1 条异常分支
+- [ ] 关键判断节点有分支说明
+
+**§四 内容可实现性**
+- [ ] 每个 P0 页面有字段清单、按钮操作、状态变化、异常提示
+- [ ] 字段类型使用前端组件语言（文本框/下拉/日期选择器），非 Java 类型
+- [ ] 按钮禁用条件具体可判断
+
+**§五 假数据真实性**
+- [ ] 无"张三/李四/test01/示例数据"等占位符
+- [ ] 客户/产品/人员姓名使用真实感命名
+- [ ] 单据编号符合业务规则
+- [ ] 每个状态枚举至少 1 条样本
+- [ ] 列表数据 ≥ 10 条
+
+**§六 视觉风格一致性**
+- [ ] 布局、配色、组件风格与项目已有原型风格一致（如有参考）
+- [ ] 配色值使用 HEX 码
+- [ ] 状态色遵循色彩语义（绿=成功/红=危险/橙=警告/蓝=信息/灰=禁用）
+
+**§七 Prompt 可用性**
+- [ ] Prompt 长度 1500~3000 字
+- [ ] 包含角色、任务、页面、字段、假数据、视觉风格、流程、约束 8 要素
+- [ ] 可直接复制粘贴，无需要二次编辑的占位符
+- [ ] 技术栈明确，与 §六 视觉风格一致
+
+### 步骤 6：持久化到 feature.json
+
+将本次 Demo 设计规划注册到 `.adspecs/feature.json`：
+
+```json
+{
+  "active": "<resolved feature dir>",
+  "demos": [
+    {
+      "id": "<功能ID>",
+      "directory": "<resolved feature dir>",
+      "filename": "<resolved filename>",
+      "name": "<功能名称>",
+      "status": "drafted",
+      "created": "<DATE>"
+    }
+  ]
+}
+```
+
+操作方式：
+1. 读取现有 `.adspecs/feature.json`
+2. 将新功能追加到 `demos` 数组（若 directory 已存在则跳过）
+3. 更新 `active` 字段
+4. 写入文件（2-space 缩进）
+
+## 必选执行后钩子
+
+检查项目根目录是否存在 `.adspecs/extensions.yml`。
+
+- 如果不存在或 `hooks.after_prd_to_demo` 下无钩子，跳到完成报告。
+- 按通用钩子规则处理（过滤 `enabled: false`、跳过有 `condition` 的钩子、构造斜杠命令时 `.` → `-`）。
+- 对 `optional: false` 的必选钩子，必须发出 `EXECUTE_COMMAND: {command}`。
+
+## 完成报告
+
+向用户输出：
+
+1. **Demo 设计方案文件路径**
+2. **七段式结构完整性摘要**：
+   - §一 Demo 目标：X 条验证假设
+   - §二 页面清单：X 个 P0 页面 / Y 个 P1 页面
+   - §三 核心流程：X 条主流程 / Y 条异常分支
+   - §四 页面内容：X 个 P0 页面已详述
+   - §五 假数据：X 条样本数据
+   - §六 视觉风格：HEX 主色 + 组件库
+   - §七 Prompt：已生成，长度 N 字
+3. **质量检查通过项数 / 总项数**
+4. **下一步建议**：
+   - **路径 A（推荐）**：复制 §七 Prompt 到 AI Studio / Lovable / v0，立即可点
+   - **路径 B**：运行 `/adspecs-front-prototype <PRD文件路径>` 生成可运行前端原型
+   - 如需调整后继方案，修改本文件后重新生成 §七 Prompt
+
+## 完成标志
+
+- [ ] PRD 已解析，用户故事、状态机、字段清单已提取
+- [ ] 二级模块（MODULE_ID）已识别或标记为空
+- [ ] Demo 设计方案 7 段式全部完成
+- [ ] 假数据通过真实性检查（无占位符命名）
+- [ ] §七 Prompt 长度 1500~3000 字，8 要素齐全
+- [ ] 质量检查清单通过 ≥ 80%
+- [ ] 文件已保存到 `{PRD_DIR}/{MODULE_ID}/`
+- [ ] `.adspecs/feature.json` 已更新 `demos` 数组
+- [ ] 扩展钩子已按规则分发或跳过
+- [ ] 完成报告已呈现
+
+## 触发关键词
+
+`adspecs-prd-to-demo`
+
+### 使用示例
+
+```
+/adspecs-prd-to-demo docs/20-prd/M06-01/M06-01_销售预测需求规格说明书.md
+/adspecs-prd-to-demo docs/20-prd/M06-01/M06-01_销售预测需求规格说明书.md sales-forecast
+/adspecs-prd-to-demo docs/30-system-design/M06-01/sales-forecast_前端功能设计.md
+```
+
+## 与 adspecs-front-prototype 的差异（FAQ）
+
+**Q：为什么不直接调用 `/adspecs-front-prototype` 生成可运行代码？**
+
+A：两者目标不同：
+- **`/adspecs-prd-to-demo`**：业务演示优先。面向产品经理向客户/业务方讲故事。输出是一份设计方案 + 一段喂给 AI 工具的 Prompt，5 分钟内能拿到可点击 Demo。
+- **`/adspecs-front-prototype`**：工程落地优先。面向前端工程师接手跑通原型工程。输出是 Vue 3 / React 完整代码（含 i18n、API 封装、mock 菜单），需要 30+ 分钟生成并调试。
+
+**推荐用法**：
+- 向客户/业务方演示方案 → 先用本 skill
+- 交给前端工程师落地实现 → 用 `/adspecs-front-prototype`
+- 两者可串联使用：先本 skill 规划，再 `/adspecs-front-prototype` 工程化