| name | product-reverse-analysis |
| description | 从产品截图逆向推导业务闭环、技术架构与设计哲学。当用户提供产品截图、UI截图、应用界面截图,并要求进行产品分析、逆向分析、产品拆解、业务逻辑推演、设计哲学解读时,使用此技能。也适用于用户说"分析这个产品"、"这个页面是怎么设计的"、"帮我拆解这个界面"等场景。
|
产品逆向分析
概述
用户提供一张产品截图,通过视觉元素系统性地逆向推导该产品的业务闭环、技术架构和设计哲学。输出为结构化的专业分析报告。
前置条件
用户必须提供一张产品截图(或可访问的图片路径)。如果用户未提供截图,请先要求用户上传截图再继续。
执行步骤
第一步:读取截图
使用 Read 工具读取用户提供的截图文件。仔细分析截图中的每一个视觉元素,包括但不限于:布局结构、文字内容、图标、颜色、间距、组件类型、交互状态等。
第二步:核心功能与场景识别
基于截图内容,回答以下三个问题:
- 产品定位:用一句话定义该产品/界面的核心价值。聚焦于"这个产品解决了什么问题"。
- 目标用户:分析该界面服务于哪类特定人群,从用户画像角度描述其特征(职业、年龄、使用习惯等)。
- 核心场景:描述用户在什么样的情况下会打开这个界面,解决什么痛点。描述要具体,包含触发条件和用户动机。
第三步:模块拆解
3.1 模块概览表
使用 Markdown 表格列出界面中的主要功能模块:
| 模块名称 | 视觉位置 | 核心作用 | 优先级 (P0/P1/P2) |
|---|
| 示例:导航栏 | 顶部固定 | 全局跳转与品牌展示 | P0 |
优先级定义:
- P0:产品核心功能,缺失则产品不成立
- P1:重要功能,提升核心体验
- P2:辅助功能,锦上添花
3.2 深度模块分析
针对每个模块,从以下三个维度进行拆解:
视觉层 (Visual):
- 色彩心理学应用:分析主色、辅助色的选择逻辑,及其传递的情感和品牌调性
- 视觉重心分布:分析界面中视觉焦点在哪里,如何引导用户注意力
- 栅格系统利用:推测底层的栅格或布局系统,分析模块间的对齐与间距规律
交互层 (Interaction):
- 预期的点击/手势反馈:分析每个可交互元素可能的跳转、弹窗或动效
- 状态转换逻辑:分析 Loading、Empty、Error、Success 等状态可能的表现形式
- 防错与容错设计:分析输入限制、二次确认、撤销等机制的潜在实现
信息架构 (IA):
- 信息层级权重:分析信息的主次关系和优先级排序
- 字段组织逻辑:推测数据模型背后的实体关系和分类原则
- 导航结构:分析页面间的跳转逻辑和层级结构
3.3 业务逻辑推演
- 底层规则:根据 UI 元素推测背后的逻辑限制(如库存校验、权限控制、算法排序规则、价格策略、优惠叠加逻辑等)
- 数据流向:分析该界面可能涉及的前端输入与后端数据交换过程,包括 API 调用时机、数据缓存策略、实时性要求
3.4 业务流程图
使用 Mermaid 语法绘制用户完成核心任务的完整路径。根据产品类型选择合适的图表类型:
- Sequence Diagram:适用于多角色交互流程(如买家-卖家、用户-客服)
- Flowchart:适用于单用户操作路径(如注册、下单、发布内容)
要求:流程必须可执行,包含决策分支和异常路径。
3.5 亮点与风险
- 产品亮点:挖掘设计中极具创新或极致体验的细节,分析其背后的设计意图和商业价值
- 潜在风险:从合规性(隐私政策、权限获取)、用户认知负担(学习成本、信息过载)、极端情况处理(边界条件、网络异常)等角度提出改进建议
输出格式
严格遵守以下 Markdown 结构输出:
# 产品逆向分析报告
## 一、核心功能与场景识别
- **产品定位**:...
- **目标用户**:...
- **核心场景**:...
## 二、模块拆解
### 2.1 模块概览表
(Markdown 表格)
### 2.2 深度模块分析
(逐模块分析:视觉层、交互层、信息架构)
### 2.3 业务逻辑推演
- **底层规则**:...
- **数据流向**:...
### 2.4 业务流程图
(Mermaid 图表)
### 2.5 亮点与风险
- **产品亮点**:...
- **潜在风险**:...
注意事项
- 宁缺毋滥:无法从截图中确定的信息,使用"推测"、"可能"等措辞,绝不编造
- 专业严谨:避免使用模糊的形容词,用具体的设计原理和技术术语支撑分析
- 洞察优先:不要简单描述"看到了什么",而要分析"为什么这样设计"和"这样设计的得失"
- 保持客观:既要发现亮点,也要指出潜在风险和可改进之处