pm-prototype-builder

# 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 能力时，界面必须体现生成中、结果、置信度/依据、人工确认、重新生成或兜底状态。 - 原型应可被研发和设计直接评审，不能只停留在静态展示图。