dalinlind PM Prototype Builder
Purpose
把产品需求转化为可打开、可评审、接近真实交互的单文件 HTML 高保真原型。原型应服务于产品评审、研发理解、设计对齐和业务演示。
When to Use
- 用户要求生成原型、高保真页面、HTML Demo、交互稿、后台页面。
- 用户提供 PRD、页面清单、业务流程、字段列表或功能说明。
- 需求面向管理后台、业务工作台、数据看板、配置中心或复杂表单流程等场景。
Input
| 信息 | 说明 |
|---|---|
| 产品/模块名称 | 页面所属业务和模块 |
| 用户角色 | 管理员、招聘经理、面试官、运营、销售、客户成功等 |
| 页面目标 | 用户在页面上要完成什么任务 |
| 页面清单 | 需要哪些页面、弹窗、抽屉、空态、异常态 |
| 字段/数据 | 列表字段、表单字段、统计指标、状态 |
| 交互规则 | 搜索、筛选、创建、编辑、审批、评分、导出等 |
Output Structure
默认直接生成或创建一个单文件 HTML，包含：
- 顶部导航或产品栏
- 左侧导航或模块菜单
- 核心业务页面
- 列表、筛选、表单、详情、弹窗或抽屉
- 空态、加载态、异常态或禁用态
- 关键交互脚本
- 真实业务文案和样例数据
如先输出设计说明，应包含：
| 模块 | 页面 | 目标 | 关键组件 | 主要状态 |
|---|
Rules
- 默认生成单文件 HTML，CSS 和 JS 内联，方便直接打开。
- UI 风格为企业级、极简、现代、浅色科技感。
- 页面第一屏必须是实际产品界面，不做营销落地页。
- 使用真实业务字段和样例数据，不使用 lorem ipsum。
- B 端页面优先保证信息密度、可扫描性、筛选效率和状态清晰。
- 必须包含基础响应式适配，避免移动端文字溢出或元素重叠。
- 常见操作使用按钮、图标、标签、表格、抽屉、弹窗、Tabs、Segmented Control、Switch、Select、Input 等成熟控件模式。
- 交互应覆盖核心流程，例如搜索、筛选、选择、创建、编辑、评分、审核、导出、切换状态。
- 涉及 AI 能力时，界面必须体现生成中、结果、置信度/依据、人工确认、重新生成或兜底状态。
- 原型应可被研发和设计直接评审，不能只停留在静态展示图。