菜单
根据 UI 截图生成结构化 PRD（产品需求文档）。 支持单张截图分析、多张截图组合分析（多页面流程）。 触发关键词：截图转PRD、看图写PRD、UI截图分析、截图生成需求文档、产品需求文档、PRD生成、从截图写需求。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/gaoqiongxie/skills-ai --skill screenshot-to-prd命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
网络安全分析师技能库：754个结构化安全技能，覆盖威胁狩猎、数字取证、事件响应、渗透测试、代码安全审计、威胁情报、恶意软件分析等26个安全领域。映射MITRE ATT&CK v19.1、NIST CSF 2.0等五大框架。当用户说'安全分析'、'威胁狩猎'、'威胁情报'、'渗透测试'、'事件响应'、'MITRE'、'数字取证'、'恶意软件分析'、'红队'、'蓝队'、'SOC'、'网络攻防'时触发。与security-audit互补：security-audit聚焦代码层静态扫描，本Skill覆盖全栈安全分析工作流。
企业级全栈迭代工作流Agent：当用户说'开始开发这个需求'、'处理本次迭代'、'全栈开发闭环'、'跑一个迭代'、'enterprise iteration'、'迭代开发'、'需求交付'、'开发闭环'时触发。自动按需求→设计→开发→测试→Review→部署→记忆7阶段推进，维护迭代状态机，路径感知（自动读取需求目录与代码目录），协调多个子Skill协作完成企业级CRM全栈需求交付。支持状态回退、并行分支、上下文继承。
截图转可交互原型统一入口：根据UI设计稿、手绘草图或竞品截图自动生成HTML高保真原型，并自动联动screenshot-to-prd输出PRD、prd-to-demo完善交互。当用户说'根据截图生成原型'、'设计稿转Demo'、'草图转HTML'、'图片转可交互页面'、'复刻这个界面'、'仿照这个APP做原型'、'截图生成网页'时触发。核心特点：视觉分析自动还原布局、组件识别与映射、多截图串联页面流、与screenshot-to-prd/prd-to-demo形成设计驱动闭环。
基于 SOC 职业分类
正在显示 SKILL.md
| name | screenshot-to-prd |
| description | 根据 UI 截图生成结构化 PRD（产品需求文档）。 支持单张截图分析、多张截图组合分析（多页面流程）。 触发关键词：截图转PRD、看图写PRD、UI截图分析、截图生成需求文档、产品需求文档、PRD生成、从截图写需求。 |
输入 UI 截图（单张或批量），输出完整 Markdown 格式 PRD，包含：
| 场景 | 截图数量 | 说明 |
|---|---|---|
| 单页面快速分析 | 1 张 | 快速输出页面级 PRD |
| 多页面流程 | 3~8 张 | 覆盖主流程所有关键节点 |
| 复杂模块 | 10 张以上 | 需分组，每组单独分析后合并 |
每次输出严格遵循以下 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 |
仔细观察截图中的所有视觉元素，包括：
根据视觉线索推断：
按照上方 PRD 模板，将分析结果填入对应章节。
诚实标注：
用户：帮我分析这个截图，生成PRD
[上传截图]
AI：[分析截图，按模板输出完整PRD]
用户：这是一个订单管理模块的截图，共6张，帮我生成完整PRD
[上传截图1: 订单列表页]
[上传截图2: 筛选面板]
[上传截图3: 新增订单表单]
[上传截图4: 订单详情页]
[上传截图5: 订单编辑页]
[上传截图6: 导出确认弹窗]
AI：[整合分析，输出完整模块级PRD]
用户：这是一个CRM系统的客户详情页截图，目标用户是我们的客服人员，
背景是客服需要在这个页面快速查看和更新客户信息，生成PRD
[上传截图]
AI：[结合上下文，按模板输出PRD（目标用户和背景更准确）]
截图转 PRD 有以下天然局限，分析时需主动告知用户：
| 局限类型 | 说明 | 应对方式 |
|---|---|---|
| 接口逻辑不可见 | 无法从截图判断接口参数、返回值、分页规则 | 标注为"待确认" |
| 权限不可见 | 无法判断不同角色的可见性差异 | 标注为"待确认" |
| 交互状态有限 | 只能看到截图当前状态，展开/折叠/loading 等需补充 | 请用户补充多状态截图 |
| 动效/动画缺失 | 页面切换动画、过渡效果无法感知 | 标注为"动效待定" |
| 非可视化逻辑 | 计算规则、触发条件等纯逻辑无法从截图推断 | 标注为"逻辑待确认" |
| 移动端截图偏差 | 手机截图可能截断部分内容 | 请用户确认关键区域 |
D:\xgq\work\prd\ 目录