思维导图转原型图

概述

把产品思维导图（.mm / .xmind）跳过手写 PRD 环节，直接产出原型图。核心产出是一个单文件、离线可运行、双模式的 HTML：

• 拼贴看板模式（默认）：所有页面按真实尺寸平铺在一张画板上，一屏通览全局，适合评审、对账、截图。
• 演示模式：切到逐页浏览，可翻页、可键盘操作，适合走流程演示。

同时调用 scripts/shot.js 导出整页拼接 PNG，方便直接贴进 PPT / 文档 / 群聊。

角色定位：资深产品经理 + 前端工程师。既要把脑图节点正确翻译成页面，也要把页面做成能拿得出手的高保真原型。

一、触发条件

• 用户给出 .mm 或 .xmind 文件路径，并要求生成原型 / 原型图 / 页面设计 / 线框 / 看板
• 用户粘贴缩进大纲文本，要求转原型（兼容路径，见「输入」一节的降级说明）
• 用户在正式开发前需要一份可演示、可评审的页面级方案

不适用：只需要 PRD 文档（用「思维导图转PRD」）、只需要需求标注（用「PRD需求标注到原型图」）。

二、输入

主路径（必须支持）

两个脚本都已随技能提供，必须调用脚本解析，不要凭肉眼读 XML/ZIP，否则容易漏节点。

兼容路径（降级）

若用户直接粘贴 Markdown 大纲 / 缩进列表 / 文本树，跳过脚本，直接按缩进识别层级，并在「推断说明」中标注"输入为文本大纲，非脑图文件"。

生成前需要确定的 4 个参数

拿到脑图后，先判断这 4 项，能推断就推断并标注，判断不了再问一次（不要逐个问）：

1. 端类型 —— 按「端识别规则」自动判断
2. 风格预设 —— 按「风格预设」自动选，或用户指定
3. 页面范围 —— 默认全量；脑图节点过多时按「页面拆分规则」取舍
4. 产品名 —— 取脑图根节点

三、工作流程

第一步：解析脑图

# Windows（本技能环境）
PY="C:/Users/<用户名>/.workbuddy/binaries/python/versions/3.13.12/python.exe"
"$PY" "C:/Users/<用户名>/.workbuddy/skills/思维导图转原型图/scripts/parse_mindmap.py" "<脑图文件绝对路径>"

脚本输出：缩进大纲 + 结构摘要（节点总数 / 最大层级 / 叶子节点数 / 各层节点数）。

拿到大纲后必须做完整性核对：结构摘要里的「节点总数」要和后续页面清单能对得上，不允许出现"大纲里有的模块，页面清单里消失了"。

第二步：推导页面清单

这是本技能的智力核心。不要把所有节点都变成页面，也不要漏掉该成页的节点。严格按 references/mapping-rules.md 的规则执行：

• 识别哪些节点是模块（分组）、哪些是页面、哪些是页面内元素
• 应用升格 / 降格 / 排除规则
• 判定每个页面的端与优先级
• 推导 3-5 条核心流程（页面之间的跳转链路）

第三步：输出「页面清单」并暂停 ⏸

必须暂停，等用户确认后再写代码。 按 references/mapping-rules.md 的模板输出：

1. 产品名 + 端类型 + 风格预设 + 画框总数
2. 页面清单表（序号 / 模块 / 页面名 / 端 / 优先级 / 布局要点）
3. 每个核心页的信息架构（模块分区 + 关键字段/操作）
4. 核心流程图（A → B → C 形式）
5. 视觉规范（主色 / 字体 / 圆角 / 背景，说明取自哪套预设）
6. 推断说明：所有基于常识补全的内容，标明"需确认"

> 若用户已明确说"不用确认，直接生成"，则跳过暂停，直接进入第四步，并把推断说明放到交付说明里。

第四步：生成双模式单文件 HTML

先复制骨架再改，不要从零写：

cp "C:/Users/<用户名>/.workbuddy/skills/思维导图转原型图/assets/skeleton.html" "<输出目录>/<产品名>-原型图.html"

然后严格按 references/html-skeleton.md 的步骤替换令牌、标题与画框；页面内容用 references/components.md 的片段拼装。骨架中的 CSS（除 :root 令牌）和 <script> 整段保持原样，不得重写——双模式切换、翻页、放大、归位逻辑均已实测通过。

硬约束见本文档第五节，逐条对齐，不得妥协。单文件画框数超过 16 个时按模块拆分（见第五节）。

第五步：导出 PNG

export NODE_PATH="C:/Users/<用户名>/.workbuddy/binaries/node/workspace/node_modules"
NODE="C:/Users/<用户名>/.workbuddy/binaries/node/versions/22.22.2-2/node.exe"
"$NODE" "C:/Users/<用户名>/.workbuddy/skills/思维导图转原型图/scripts/shot.js" \
  --html "<原型HTML绝对路径>" \
  --out  "<输出PNG绝对路径>" \
  --width 2400 --scale 2

• --width 取画板实际宽度（PC 端 1440 宽画框两列时约 3000，移动端 375 宽画框四列时约 1800），拿不准就给 2400，--width 只影响换行不影响画框尺寸
• 脚本会自动进入 export-mode（隐藏工具栏与演示按钮）、自动量高度、输出无多余留白的 2 倍图
• 脚本找不到 Chrome/Edge 时降级为只交付 HTML，并明确告知用户

第六步：自检

逐条对照第七节的检查清单，如实执行，发现问题就修，不要跳过。

第七步：交付

用文件呈现工具把 HTML 和 PNG 一起呈现给用户，并附一段简短说明：页面数、端类型、风格预设、核心流程演示顺序、推断事项。

四、页面拆分规则（速查）

完整规则在 references/mapping-rules.md，此处为速查：

例外：

• 二级节点是纯容器（名为「系统」「体系」「管理」且下挂 ≥3 个页面性三级节点）→ 三级节点升格为页面
• 二级/三级节点名含「详情」「列表」「设置」「编辑」「新增」「记录」「订单」「账单」「弹窗」等页面性词汇 → 升格为页面
• 节点是说明性质（「背景」「目标」「原则」「说明」「Non-goals」「商业模式」）→ 不生成页面，转为交付说明里的"背景备注"
• 节点是流程/状态（「流程」「步骤」「状态机」）→ 不生成页面，转为页面间跳转关系
• 节点是弹窗/抽屉 → 不单独成画框，作为所属页面的「弹层状态」在同页表达

五、HTML 硬约束

这是本技能的交付底线，不可妥协：

1. 单文件：所有 CSS / JS 内联。禁止任何外部请求（无 CDN、无外链字体、无外部图片）。必须能双击离线打开。
2. 双模式：body.view-board 拼贴看板 + body.view-demo 演示模式，顶部固定工具栏切换，工具栏带 data-export-hide 属性（截图时自动隐藏）。
3. 固定画框尺寸：移动端 375×812，PC 端 1440×900。画框内部 overflow: hidden，内容超了就删减元素，不允许撑高画框——看板整齐比塞满信息重要。
4. 画框标签：每个画框下方显示「序号 · 页面名」，这是页面导航的基础，必须有。（按用户要求，不做脑图节点溯源标注）
5. 高保真：统一设计令牌（主色 / 圆角 / 阴影 / 间距 / 字阶），组件样式一致。禁止无样式的裸标记。
6. Mock 数据：列表类页面填 5-8 条贴合业务的真实感中文数据。禁止 lorem ipsum、禁止 测试1/测试2。
7. 图片占位：一律用内联 SVG 渐变块 + 居中图标，不引用任何图片文件。
8. 状态覆盖：核心页（P0）覆盖默认态 / 空状态 / 加载态 / 错误态 / 禁用态；次要页至少覆盖默认态。
9. 交互可用：拼贴模式下点击画框可放大查看；演示模式下支持上一页 / 下一页 / 键盘 ← → / 页面下拉快速跳转。
10. 语义与可访问：用 <nav> <main> <header> <button>，可交互元素支持 Tab + Enter，关键区域带 ARIA 属性。
11. 中文：所有 UI 文案、代码注释、交付说明一律中文。
12. 画框数量：单文件 ≤ 16 个画框。超出时按模块拆多个 HTML，并在交付说明里列清文件对应关系。

六、端识别与风格预设

端识别（自动）

风格预设

选择逻辑：用户指定 > 端类型默认（PC→antd，移动→weapp）> clean。具体令牌值见 references/design-tokens.md。

七、自检清单

交付前逐条核对，逐条：

• [ ] 脑图大纲里的每个模块，在页面清单里都有对应页面或明确说明为何不成页
• [ ] 所有画框尺寸统一（同端同尺寸），无被内容撑高的画框
• [ ] 双模式切换正常：拼贴 ↔ 演示双向可切
• [ ] 演示模式：上一页 / 下一页 / 键盘方向键 / 下拉跳转全部可用，到首尾时不越界
• [ ] 拼贴模式：点击画框能放大，放大后能关闭
• [ ] 无外部网络请求（断网打开依然完整渲染，图片、图标全部内联）
• [ ] 浏览器控制台无 JS 报错
• [ ] 无死链：每个按钮/入口都有响应或明确的占位反馈
• [ ] 主色、圆角、字阶全文件统一，无"半路换风格"
• [ ] 列表页有 5-8 条模拟数据，无 lorem ipsum
• [ ] P0 页面覆盖空 / 加载 / 错误 / 禁用态
• [ ] PNG 已成功导出，且无底部大片空白、无画框被截断
• [ ] 推断内容已列入交付说明的「推断说明」

八、边界处理

九、交付物

十、配套文件

思维导图转原型图/
├── SKILL.md                      本文件：主流程与硬约束
├── scripts/
│   ├── parse_mindmap.py          脑图解析器（.mm / .xmind → 缩进大纲）
│   └── shot.js                   整页截图工具（复用本机 Chrome/Edge + puppeteer-core）
├── assets/
│   └── skeleton.html             双模式骨架（复制后改造，CSS/JS 已实测）
└── references/
    ├── mapping-rules.md          节点→页面 的映射规则 + 页面清单输出模板
    ├── html-skeleton.md          骨架使用说明 + 画框结构与硬约束速记
    ├── design-tokens.md          4 套风格预设的设计令牌
    └── components.md             组件片段速查（移动端 + PC 端）

生成 HTML 前，先读 html-skeleton.md 和 design-tokens.md；写组件前，读 components.md；推导页面清单前，读 mapping-rules.md。

十一、环境依赖

截图运行命令模板（Windows）：

export NODE_PATH="C:/Users/<用户名>/.workbuddy/binaries/node/workspace/node_modules"
"C:/Users/<用户名>/.workbuddy/binaries/node/versions/22.22.2-2/node.exe" \
  "C:/Users/<用户名>/.workbuddy/skills/思维导图转原型图/scripts/shot.js" \
  --html "<原型HTML绝对路径>" --out "<PNG绝对路径>" --width 2400 --scale 2