多终端产品功能规划与高保真原型
Overview
将用户提供的功能清单转化为「产品功能规划方案」，并可在用户确认后进一步绘制「高保真可交互 HTML 原型」。包含两条主线：
- 功能规划：产品架构设计（一级/二级功能模块及模块作用与关系）与页面规划（功能到页面的映射、页面布局/元素/交互），默认以 Markdown 形式交付。
- 高保真原型：规划确认后，调用
ui-ux-pro-max生成设计系统，再绘制成单一自包含 HTML 原型文件（不依赖运行环境、可点击跳转、高保真还原）。
与 pc-admin-product-plan 的区别：本技能支持多终端（PC 后台 / 移动端小程序 / APP），要求一次只规划一个终端；并在规划后衔接原型绘制。
When to use
- 用户给出功能清单、功能点列表或需求描述，并希望得到「产品规划」「架构设计」「页面规划」「需求说明」「模块与页面设计」，或进一步得到「高保真原型 / 可交互 demo / HTML 原型」。
- 触发词示例：「根据这份清单做产品规划（含小程序和后台）」「帮我规划这个系统的模块和页面，并出个高保真原型」「输出需求说明文档并画成可点击的原型」。
- 适用对象：PC 后台管理系统、SaaS 控制台、政务 / 企业系统、运营后台、小程序、APP 等多终端产品。
终端类型定义
规划前先明确终端，影响菜单形态、页面范式与原型尺寸：
- PC 后台：管理后台、运营后台、控制台、CMS、ERP/OA、Web 管理端。原型画布 1920×1080。
- 移动端小程序：微信 / 支付宝小程序、移动端 H5、公众号内页。原型画布 438×944（移动视口）。
- APP：iOS / Android 原生或跨端 App、移动客户端。原型画布 438×944。
Workflow
严格按以下步骤执行，顺序不可省略。
Step 1 — 解析、终端识别与选择
- 接收功能清单（自由文本 / 分级列表 / 表格 / 要点均可）。
- 将清单归一化为「功能条目」列表，每条含：原始描述、预期归属（业务域）。
- 终端识别（必做）：根据条目关键词标注其所属终端——
- PC 后台类：管理后台、运营后台、控制台、CMS、ERP、OA、Web 管理端、后台。
- 移动端小程序类：小程序、微信小程序、H5、公众号、移动端页面。
- APP 类：APP、iOS、Android、移动客户端、移动端 App。 - 终端选择（必做）：
- 若识别到 多个终端：明确告知用户「识别到多个终端需求：<终端 A>、<终端 B>…」，并用 AskUserQuestion 让用户选择本次只规划其中一个终端（选项列出各终端；可加「全部都要，但分开逐端规划」让用户指定先从哪个开始）。选定后，仅对该终端的功能条目做规划，其余终端功能暂存并在回复中提示「可后续再规划其他终端」。
- 若仅识别到 一个终端：直接进入该终端规划，并在文档头部标注目标终端。
- 若无法判断终端：默认按 PC 后台规划，并在「假设与说明」中标注该假设。 - 若存在明显歧义或关键缺失，先用 AskUserQuestion 一次性澄清（最多 4 个）；不影响结构的小问题用合理默认假设并在文档标注。
Step 2 — 产品架构设计
- 将当前终端的功能条目聚类为一级功能模块（顶层业务域，对应主导航 / 工作台分区），数量建议 5–12 个。
- 每个一级下拆分为二级功能模块（子业务能力，对应子菜单 / 页组）。
- 明确每个模块的作用（一句话：解决什么问题、服务谁、承载什么业务）。
- 说明模块之间的关系：包含、依赖、数据流、并列 / 共用。
- 导航与菜单形态设计（按终端选型，不得写死）：
- PC 后台：侧边竖形（一级 ≥ 7 或层级深）/ 顶部水平（一级 ≤ 7）/ 顶部+侧边混合（超大多业务线）。
- 移动端小程序 / APP：底部标签栏（Tab Bar，≤ 5 个一级）/ 侧边抽屉（汉堡菜单，一级较多）/ 底部+顶部组合。选型依据写明：一级数量、层级深度、业务耦合。 - 产出模块架构总览（层级列表或 mermaid），附导航 / 菜单结构示意。
Step 3 — 页面规划
对每个二级模块规划页面：
- 页面映射：明确页面名称与归属，汇总得页面总数。
- 页面分类（按需）：列表 / 详情 / 表单 / 配置 / 仪表盘 / 导入导出 / 移动端首页·Tab·个人中心 等。
- 每页规划（布局范式参考 references/page-patterns.md（PC）或 references/mobile-page-patterns.md（移动））：
- 页面布局：区块排布（文字 / ASCII）。
- 页面元素：组件清单及数据来源。
- 功能操作：可执行动作及反馈 / 跳转。
排版与可读性规范
生成文档时按内容性质选形式，混合使用树状结构、表格、有序 / 无序列表，避免通篇表格：
- 树状层级列表：架构总览、导航 / 菜单结构、模块包含关系、需求背景 / 范围条目。
- 表格（克制）：仅汇总指标表、各模块页面数量一览、用户角色定义表等统计场景。
- 有序 / 无序列表：页面详细设计（结构 / 元素 / 操作）、选型依据、假设说明。
- 标题层级：规划概述 / 用户角色分析 / 汇总 / 细分为一级标题；细分按模块→二级模块→页面递进。
- 可读性：术语一致、长段拆列表、避免大段纯文本。
Step 4 — 生成文档（规划概述 → 用户角色 → 汇总 → 细分）
按 references/document-template.md 骨架与排版规范生成 Markdown，严格遵守：
一、规划概述
- 1.1 需求背景：提出方（谁）、诉求、解决的问题。
- 1.2 规划范围：边界（覆盖模块 + 明确不覆盖范围）。
- 文档头部须标注目标终端（PC 后台 / 移动端小程序 / APP）与原型画布尺寸（PC 1920×1080；移动 438×944）。
二、用户角色分析
- 角色定义表：角色名称、说明、权限范围（须与三、汇总模块 / 页面对应）。
三、汇总
- 模块总数（一级+二级）、一级数、二级数、各模块页面数、页面总数。
- 导航与菜单形态设计（含选型理由 + 菜单结构示意）。
- 可选：假设与说明。
- 系统完整性检测结果（见 Step 5）。
四、细分（按模块→页面）
- 每模块：作用、关系；每页面：名称、结构规划、元素、操作。
Step 5 — 校验、系统完整性检测与交付规划文档
- 交付前自检：三、汇总与四、细分模块 / 页面数一致；每二级模块有页面；每页面有「布局+元素+操作」；角色权限落在规划内。
- 写入文档（建议
产品功能规划方案_<终端>.md）并 present_files 呈现。 - 系统完整性检测（必做）：对照基础功能模块基线逐项检测覆盖情况——
- 用户登录 / 认证、用户管理、角色管理、权限管理、组织架构管理、日志管理、个人中心 / 账户设置。
- 检测方法：一级 / 二级模块名与页面名关键词匹配（登录 / 用户 / 角色 / 权限 / 组织·部门 / 日志 / 个人中心）。无匹配记为缺失。
- 若缺失：列出清单并用 AskUserQuestion 询问是否增添（全部增添→并入「系统管理」一级模块并重算；部分增添；暂不增添）。
- 未缺失则跳过。 - 规划确认（必做）：呈现文档后，用 AskUserQuestion 请用户确认规划方案（确认无误 / 需修改某处）。若需修改，先修订文档与数字，再继续。
- 原型绘制询问（必做）：确认后，询问用户是否继续绘制成 HTML 高保真原型（是 / 否）。不得默认绘制；选否则结束（仍可提供转 Word 引导，见下）。
Step 6 — 高保真原型绘制（用户确认后执行）
仅在 Step 5 用户确认绘制时执行。
- 生成设计系统（调用 ui-ux-pro-max）：
- 运行其搜索脚本获取风格 / 配色 / 字体 / 间距设计系统：
python3 "$HOME/.workbuddy/skills/ui-ux-pro-max/scripts/search.py" "<产品类型> <行业> <关键词:简约 科技 大气>" --design-system -p "<项目名称>"
- 关键词须体现产品属性与行业属性（如海事 / 政务 → 蓝色科技政务风；电商 → 活力；金融 → 稳健），整体保持简约、大气、科技风。
- 必要时补充检索：--domain style/--domain color/--domain typography/--domain product。
- 若搜索返回 0 结果，回退到内置默认（简约科技风：中性灰底 + 主色蓝 / 青 + 系统字体），并显式告知用户。 - 设定画布尺寸：PC 后台 1920×1080；移动端小程序 / APP 438×944。
- 先绘主页面（必做，分批确认）：先绘制 3–5 张主页面（如登录页、全局导航 / 首页 / 一级核心页、关键列表或工作台），生成单一自包含 HTML 文件（规范见下「原型技术规范」），present_files 呈现并请用户确认是否符合需求、是否继续。
- 若用户要求调整，修订后再继续；若确认，继续绘制剩余页面。 - 绘制全量页面：按规划文档逐页落地，保持设计系统一致；全部完成后 present_files 呈现最终原型文件（建议
产品高保真原型_<终端>.html）。 - 交付引导语：原型交付后，仍可询问是否需要导出 / 归档等其他处理。
原型技术规范（硬性）
- 单一 HTML 文件：所有 CSS / JS 内联，不依赖外部网络资源（禁止 CDN、外链脚本 / 样式）；如引用网络字体须有系统字体兜底，确保离线可打开。
- 设计令牌：用 CSS 变量定义颜色 / 间距 / 圆角 / 字体，源自 Step 6.1 设计系统。
- 可交互跳转：多页面用原生 JS 视图切换（display / transform）实现点击菜单、按钮、卡片后的跳转与返回，具备路由感；交互反馈（hover / 点击态 / loading）遵循 ui-ux-pro-max 的 UX 准则。
- 高保真：贴近真实组件（输入框、表格、卡片、导航、图表用 CSS/SVG 绘制），不出现占位灰块代替关键界面。
- 画布容器：外层固定尺寸容器（PC 1920×1080 / 移动 438×944），内部相对布局，整体可缩放预览，保证高保真还原。
- 终端差异：PC 用侧边 / 顶部导航 + 宽表格；移动用底部 Tab + 单列流式布局 + 触摸友好（最小命中区 44×44px）。
Resources
references/document-template.md— 规划文档骨架与占位符（含目标终端 / 画布尺寸字段），含最小示例。references/page-patterns.md— PC 后台页面布局范式速查（列表 / 详情 / 表单 / 仪表盘 / 树形 / 配置 / 导入导出）。references/mobile-page-patterns.md— 移动端（小程序 / APP）页面范式速查（底部 Tab 首页 / 列表 / 详情 / 表单 / 个人中心 / 抽屉导航）。- 外部依赖：
ui-ux-pro-maxskill（原型绘制阶段用于生成设计系统；其脚本路径$HOME/.workbuddy/skills/ui-ux-pro-max/scripts/search.py）。
Notes
- 一次只规划一个终端；多终端需用户选择其一，其余暂存。
- 规划文档默认 Markdown；其他格式（含原型）需用户明确确认后才产出。
- 术语：一级模块 = 顶层业务域；二级模块 = 子业务能力；页面 = 单一路由 / 视图。
- 数量口径前后一致：三、汇总数字须能在四、细分逐一追回。
- 原型绘制必须「先主页面、确认、再全量」，避免一次性输出大量不符预期的页面。
- 文档四章顺序固定：规划概述 → 用户角色分析 → 汇总 → 细分。
