screenshot-to-prd

name	screenshot-to-prd
description	根据 UI 截图生成结构化 PRD（产品需求文档）。 支持单张截图分析、多张截图组合分析（多页面流程）。 触发关键词：截图转PRD、看图写PRD、UI截图分析、截图生成需求文档、产品需求文档、PRD生成、从截图写需求。

Screenshot to PRD — 截图生成产品需求文档

核心能力

输入 UI 截图（单张或批量），输出完整 Markdown 格式 PRD，包含：

• 页面概述与定位
• 核心功能拆解
• 页面结构与组件清单
• 字段/参数定义表
• 用户交互流程（文字版）
• 依赖与约束说明
• 疑问清单（供产品经理确认）

---

输入要求

截图数量建议

场景	截图数量	说明
单页面快速分析	1 张	快速输出页面级 PRD
多页面流程	3~8 张	覆盖主流程所有关键节点
复杂模块	10 张以上	需分组，每组单独分析后合并

截图质量要求

• 尽量包含完整页面内容（不全屏截图可标注区域）
• 若有交互状态（展开、hover、loading）建议额外补充
• 涉及数据列表时，标注页码/翻页位置
• 表单页面若有校验提示，请额外说明或补充提示截图

用户可提供的额外上下文（可选但推荐）

• 目标用户群体
• 所属产品/模块名称
• 业务背景或设计目的
• 相关业务流程文档链接
• 参考竞品或原型

---

PRD 输出模板

每次输出严格遵循以下 Markdown 模板格式：

# {页面/模块名称} PRD

> 生成时间：{YYYY-MM-DD}
> 来源截图：{N} 张
> 置信度：{高/中/低}（基于截图信息完整性）

---

## 一、页面概述

### 1.1 功能定位
{一句话描述该页面的核心作用}

### 1.2 目标用户
{主要使用角色，如：运营人员 / C端用户 / 管理员}

### 1.3 页面类型
- [ ] 列表页
- [ ] 表单页
- [ ] 详情页
- [ ] 看板/仪表盘
- [ ] 弹窗/抽屉
- [ ] 设置页
- [ ] 其他：___

---

## 二、页面结构

### 2.1 布局结构
{从上至下描述页面纵向布局}

| 区域 | 内容描述 | 高度/占比估算 |
|------|---------|-------------|
| 顶部导航 | {具体内容} | ~48px |
| 筛选区 | {具体内容} | ~可变 |
| 数据区 | {具体内容} | ~主内容 |
| 底部分页 | {具体内容} | ~40px |

### 2.2 页面组件清单

| # | 组件名称 | 位置 | 功能说明 | 状态说明 |
|---|---------|------|---------|---------|
| 1 | {组件名} | {顶部/左侧/内容区} | {做什么} | 默认/hover/禁用 |

---

## 三、功能详解

### 3.1 {功能点名称 A}

**功能描述：**
{详细描述}

**触发方式：**
- 自动触发（页面加载时）
- 用户主动触发：{点击/输入/选择}

**交互流程：**
1. {步骤1}
2. {步骤2}
3. {步骤3}

**数据来源/去向：**
- 数据源：{接口/本地/计算}
- 数据去向：{提交至某模块/本地存储}

**边界条件：**
- 空数据时显示：___
- 加载中显示：___
- 异常/错误显示：___

---

## 四、字段/参数定义

### 4.1 {数据表/模型名称}

| 字段名称 | 中文名 | 类型 | 必填 | 默认值 | 校验规则 | 备注 |
|---------|-------|------|-----|-------|---------|-----|
| {field_name} | {中文名} | string/number/boolean/array | 是/否 | {默认值} | {长度/范围/正则} | {备注} |

---

## 五、用户操作流程

### 5.1 {主流程名称}

用户 → [操作A] → [系统反馈] → [操作B] → [系统反馈] → 完成

**详细步骤：**

| 步骤 | 操作 | 系统响应 | 异常处理 |
|-----|------|---------|---------|
| 1 | {操作} | {响应} | {异常} |
| 2 | {操作} | {响应} | {异常} |

---

## 六、依赖与约束

| 类型 | 内容 | 说明 |
|-----|------|-----|
| 上下游模块 | {依赖的模块} | {说明} |
| 接口依赖 | {API/事件} | {说明} |
| 数据依赖 | {数据源} | {说明} |
| 权限约束 | {角色/权限点} | {说明} |
| 性能约束 | {如：列表不超过1000条} | {说明} |

---

## 七、疑问清单

> 以下信息在截图中无法确认，需要与产品经理/设计师确认

| # | 问题 | 优先级 | 状态 |
|---|-----|-------|-----|
| 1 | {问题描述} | P0/P1/P2 | 待确认 |
| 2 | {问题描述} | P0/P1/P2 | 待确认 |

---

## 八、版本记录

| 版本 | 日期 | 修改内容 | 修改人 |
|-----|------|---------|-------|
| v0.1 | {日期} | 初始版本（截图分析） | AI |

---

分析流程

Step 1：读取截图

仔细观察截图中的所有视觉元素，包括：

• 导航/标题栏：判断页面层级和归属模块
• 操作按钮：识别主要操作（新增、编辑、删除、筛选、导出等）
• 数据展示形式：列表 / 卡片 / 图表 / 树形
• 输入控件：文本框 / 下拉框 / 日期选择 / 开关 / 复选框
• 状态指示：Badge / 标签 / 颜色编码 / 图标
• 分页/加载：底部翻页 / 无限滚动 / 骨架屏
• 空状态：无数据时的展示
• 提示/校验：字段标签 / 占位符 / 错误信息

Step 2：推断业务逻辑

根据视觉线索推断：

• 字段之间的关联关系（哪些是联动字段）
• 表单提交后的预期行为（跳转 / 刷新 / 弹窗）
• 列表的排序、筛选逻辑
• 权限暗示（哪些角色能看到/操作什么）
• 数据流向（新增 → 存到哪 → 哪里消费）

Step 3：结构化输出

按照上方 PRD 模板，将分析结果填入对应章节。

Step 4：标注不确定性

诚实标注：

• 截图无法提供的信息（如接口逻辑、权限配置、动画行为）
• 基于视觉推断的假设（需产品确认）
• 遗漏的可能功能（建议补充截图或文档补充）

---

使用示例

示例一：单张截图快速分析

用户：帮我分析这个截图，生成PRD
[上传截图]

AI：[分析截图，按模板输出完整PRD]

示例二：多张截图完整流程

用户：这是一个订单管理模块的截图，共6张，帮我生成完整PRD
[上传截图1: 订单列表页]
[上传截图2: 筛选面板]
[上传截图3: 新增订单表单]
[上传截图4: 订单详情页]
[上传截图5: 订单编辑页]
[上传截图6: 导出确认弹窗]

AI：[整合分析，输出完整模块级PRD]

示例三：带上下文的分析

用户：这是一个CRM系统的客户详情页截图，目标用户是我们的客服人员，
背景是客服需要在这个页面快速查看和更新客户信息，生成PRD
[上传截图]

AI：[结合上下文，按模板输出PRD（目标用户和背景更准确）]

---

局限性说明

截图转 PRD 有以下天然局限，分析时需主动告知用户：

局限类型	说明	应对方式
接口逻辑不可见	无法从截图判断接口参数、返回值、分页规则	标注为"待确认"
权限不可见	无法判断不同角色的可见性差异	标注为"待确认"
交互状态有限	只能看到截图当前状态，展开/折叠/loading 等需补充	请用户补充多状态截图
动效/动画缺失	页面切换动画、过渡效果无法感知	标注为"动效待定"
非可视化逻辑	计算规则、触发条件等纯逻辑无法从截图推断	标注为"逻辑待确认"
移动端截图偏差	手机截图可能截断部分内容	请用户确认关键区域

---

风格指南

• 语气：专业、严谨、结构清晰，像真实产品经理输出的 PRD
• 假设标注：所有基于截图推断的内容，用"【推测】"标注
• 优先级标注：P0 = 核心功能，P1 = 重要功能，P2 = 优化项
• 输出位置：默认输出到当前对话，重要 PRD 建议保存至 D:\xgq\work\prd\ 目录