pm-prototype-builder

name	pm-prototype-builder
description	产品经理高保真原型生成技能。用于根据 PRD、功能描述、业务流程或页面需求生成企业级、极简、现代、浅色科技感的单文件 HTML 原型。

PM Prototype Builder

Purpose

把产品需求转化为可打开、可评审、接近真实交互的单文件 HTML 高保真原型。原型应服务于产品评审、研发理解、设计对齐和业务演示。

When to Use

• 用户要求生成原型、高保真页面、HTML Demo、交互稿、后台页面。
• 用户提供 PRD、页面清单、业务流程、字段列表或功能说明。
• 需求面向管理后台、业务工作台、数据看板、配置中心或复杂表单流程等场景。

Input

信息	说明
产品/模块名称	页面所属业务和模块
用户角色	管理员、招聘经理、面试官、运营、销售、客户成功等
页面目标	用户在页面上要完成什么任务
页面清单	需要哪些页面、弹窗、抽屉、空态、异常态
字段/数据	列表字段、表单字段、统计指标、状态
交互规则	搜索、筛选、创建、编辑、审批、评分、导出等

Output Structure

默认直接生成或创建一个单文件 HTML，包含：

1. 顶部导航或产品栏
2. 左侧导航或模块菜单
3. 核心业务页面
4. 列表、筛选、表单、详情、弹窗或抽屉
5. 空态、加载态、异常态或禁用态
6. 关键交互脚本
7. 真实业务文案和样例数据

如先输出设计说明，应包含：

模块	页面	目标	关键组件	主要状态

Rules

• 默认生成单文件 HTML，CSS 和 JS 内联，方便直接打开。
• UI 风格为企业级、极简、现代、浅色科技感。
• 页面第一屏必须是实际产品界面，不做营销落地页。
• 使用真实业务字段和样例数据，不使用 lorem ipsum。
• B 端页面优先保证信息密度、可扫描性、筛选效率和状态清晰。
• 必须包含基础响应式适配，避免移动端文字溢出或元素重叠。
• 常见操作使用按钮、图标、标签、表格、抽屉、弹窗、Tabs、Segmented Control、Switch、Select、Input 等成熟控件模式。
• 交互应覆盖核心流程，例如搜索、筛选、选择、创建、编辑、评分、审核、导出、切换状态。
• 涉及 AI 能力时，界面必须体现生成中、结果、置信度/依据、人工确认、重新生成或兜底状态。
• 原型应可被研发和设计直接评审，不能只停留在静态展示图。