Pm Review

产品经理页面评审工具，用于评估网页或设计截图的产品质量。触发条件：用户要求评审页面、分析截图、评估设计、PM评审、产品评审、界面分析。支持两种输入方式：(1) 网址评审 - 通过 URL 评审在线页面 (2) 截图评审 - 通过图片文件评审设计稿。输出七维度专业评审报告（战略目标/用户体验/功能内容/数据度量/技...

Security Scan

该技能的声明目的（对网页或截图进行 PM 风格的七维度评审）与其运行时指令和参考文档一致，没有要求与其用途不符的凭据或安装步骤。

Purpose & Capability

技能名/描述为 PM 页面评审，SKILL.md 只列出与此目的直接相关的操作（网址抓取、图像分析、七维度/专项审查），所需工具（Web Reader、图像分析 MCP、WebSearch、Read）与用途匹配。没有要求不相关的系统权限或云凭据。

Instruction Scope

大部分指令局限于获取页面内容或分析截图并生成报告，是合适的。但注意：指令建议调用外部 MCP 图像/网页读取服务（如 ZAI MCP、Web Reader MCP）；并示例使用绝对文件路径（Read 工具的 file_path），这意味着如果代理被授权去读本地路径，它可能访问用户提供的任意文件——应确保只向技能/代理提供期望的截图或可公开访问的 URL。技能还建议用户“安装 MCP 服务器”并指出配置文件位置 (~/.claude/mcp_settings.json)，这是使用提示而非自动改动，但用户应确认任何第三方 MCP 服务及配置来源可信。

Install Mechanism

无安装规范、无二进制、无下载或代码执行；技能为纯说明文档（instruction-only），因此不会在安装时写入或执行外部代码，风险较低。

Credentials

技能不请求环境变量、凭据或配置路径，也不列出与功能无关的外部密钥，所需权限与功能成比例。唯一需留意的是与外部 MCP 服务交互时可能涉及将页面内容或图片发送到这些服务，用户应确认这些服务的隐私与信任级别。

Persistence & Privilege

技能未设置 always:true，也不包含自我启用或修改其他技能的指令。它为用户触发时调用工具的说明，未请求永久驻留或提升平台权限。

Assessment

这个技能看起来是为产品经理做页面与截图评审而设计，文档和引用资料详尽且与描述一致。安装前/使用前请注意： - 只提供你愿意让第三方服务看到的 URL 或截图：截图可能包含敏感信息（如 API keys、隐私数据、内部链接），审稿时请先遮蔽或裁剪敏感区域。 - 如果允许该技能调用外部 MCP 服务（例如 ZAI MCP、Web Reader MCP），确认你信任这些服务的运营方与隐私策略，因为页面内容或图片会被发送出去进行分析。 - SKILL.md 示例使用绝对本地路径（Read 的 file_path），避免让代理未经审核访问本机任意路径；仅上传或指明确切的、经过过滤的文件路径。 - 技能建议用户在 ~/.claude/mcp_settings.json 中配置 MCP，不要盲目接受或复制来自未知来源的配置；若需要部署第三方 MCP，请先核实来源并尽量在隔离环境中测试。 总体而言，这个技能内部一致且可解释为其声明的用途；如果你接受将页面/图片内容传到外部分析服务并注意上述隐私/信任事项，才适合启用。

PM 页面评审技能

评审心态

三个核心原则：

1. 追问本质 - 用户说"按钮太小" → 可能是交互逻辑问题
2. 敢于说不 - 当所有人觉得"差不多"时，坚持找问题
3. 多元方案 - 不给单一结论，提供渐进/重塑/理想三套方案

---

工作流程

步骤 1：确定输入类型

网址评审 - 用户提供了 URL

优先使用以下工具获取页面内容（按可用性排序）：

1. mcp__web_reader__webReader - Web Reader MCP 服务器
2. mcp__web-reader__webReader - 备用命名
3. WebSearch 搜索页面信息
4. 直接请求用户提供页面截图

提取内容后：

• 分析页面结构、文本、链接信息
• 进行完整的功能性评审

---

截图评审 - 用户提供了图片文件

优先使用以下工具分析视觉内容（按可用性排序）：

1. mcp__zai-mcp-server__analyze_image - ZAI MCP 服务器
2. mcp__MiniMax__understand_image - MiniMax 图像理解
3. mcp__4_5v_mcp__analyze_image - 4.5v 图像分析
4. Read 工具直接读取图片（Claude 原生视觉能力）

分析重点：

• 视觉层级（焦点唯一性、层级≤3级）
• 信息密度（过密/适中/过疏）
• 交互状态（空/加载/错误/成功/边界态）
• 进行视觉和交互评审

---

兜底方案：无工具可用

如果没有可用的图像分析工具：

1. 请求用户描述截图内容
2. 引导用户提供关键信息（页面类型、核心功能、主要问题）
3. 基于描述进行评审分析
4. 建议用户安装相关 MCP 服务器以获得更好的体验

---

步骤 2：选择评审深度

快速评审（5分钟） - 适用于初步筛选

• 读取 references/quick-review.md
• 输出：核心问题、优化建议、亮点

深度评审（30分钟） - 适用于重要页面

• 读取 references/deep-review.md
• 输出：完整诊断报告 + 三套方案 + 执行计划

---

步骤 3：执行评审

根据评审需求选择合适的审查标准：

基础评审（七维度框架）

读取核心评分标准和检查清单：

• references/dimensions.md - 七维度评分标准（战略目标/用户体验/功能内容/数据度量/技术性能/市场竞品/迭代运营）

专业深度评审（可选专项审查）

如需进行专项深度审查，可参考以下专业框架：

视觉与设计审查：

• references/color-review.md - 专业颜色审查框架（六层审查模型）
• references/typography-review.md - 排版与字体审查指南
• references/interaction-review.md - 交互与动画审查标准

可访问性与合规审查：

• references/accessibility-review.md - 无障碍访问审查清单（六层无障碍金字塔）
• references/security-review.md - 安全性与合规审查指南（七层安全模型）

性能与优化审查：

• references/performance-review.md - 性能与优化审查标准（七层性能模型）

专项审查策略：

1. 截图评审重点：优先使用颜色、排版、交互审查
2. 网址评审重点：优先使用性能、安全、无障碍审查
3. 业务关键页面：建议进行全维度深度审查
4. 时间有限时：使用基础七维度快速审查

---

步骤 4：输出报告

使用报告模板：

• references/templates.md - 评审报告模板

---

评审输出要点

基础输出（必须包含）

1. 问题分类 - 致命(P0) / 体验(P1) / 优化(P2)
2. 三套方案 - 渐进优化 / 结构重塑 / 理想方案
3. 优先级 - 影响度×努力度矩阵排序
4. 度量指标 - 可验证的成功标准

专业审查输出（深度评审时包含）

视觉设计审查输出：

• 颜色审查六层评估结果（技术合规/美学设计/功能体验/品牌战略/技术实现/业务适配）
• 排版审查评分（可读性、层次性、一致性）
• 交互审查结果（响应性、流畅度、状态完整性）

可访问性审查输出：

• 无障碍六层金字塔评估（基础保障/技术合规/感知认知/用户体验/技术实现/社会影响）
• 关键WCAG标准符合情况
• 辅助技术兼容性评估

安全合规审查输出：

• 安全七层模型评估（威胁建模/基础架构/通信安全/应用安全/访问控制/数据隐私/合规治理）
• 关键安全风险识别
• 合规性差距分析

性能优化审查输出：

• 性能七层模型评估（基础设施/服务端/应用代码/渲染处理/网络传输/用户体验/业务影响）
• Core Web Vitals达标情况
• 关键性能瓶颈识别

---

截图评审特有

• 视觉层级扫描（焦点唯一性、层级≤3级）
• 信息密度分析（过密/适中/过疏）
• 交互状态检查（空/加载/错误/成功/边界态）

---

网址评审特有

• 功能完整性检查
• 交互路径验证
• 加载性能评估
• 数据埋点分析

---

通用工具调用策略

图像分析工具（截图评审）

优先级 1 - ZAI MCP

工具: mcp__zai-mcp-server__analyze_image
参数:
  image_source: 图片文件路径或 URL
  prompt: "分析这个页面的产品设计，包括视觉层级、信息架构、交互设计、功能完整性等方面"

优先级 2 - MiniMax

工具: mcp__MiniMax__understand_image
参数:
  image_source: 图片文件路径或 URL
  prompt: "请详细分析这个页面的设计，包括视觉层级、信息密度、交互设计等方面"

优先级 3 - 4.5v MCP

工具: mcp__4_5v_mcp__analyze_image
参数:
  imageSource: 图片 URL
  prompt: "分析页面的视觉设计、信息架构和交互体验"

优先级 4 - Claude 原生 Read

工具: Read
参数:
  file_path: 图片文件绝对路径
# Claude 原生支持图像理解

---

Web 内容获取工具（网址评审）

优先级 1 - Web Reader MCP

工具: mcp__web_reader__webReader
参数:
  url: 用户提供的网址
  return_format: "markdown"      # 输出 Markdown 格式（支持中文）
  retain_images: true             # 保留图片
  with_images_summary: true       # 包含图片摘要
  with_links_summary: true        # 包含链接摘要
  no_gfm: false                   # 保持 GitHub Flavored Markdown（支持中文格式）
  no_cache: false                 # 使用缓存提升性能

多语言配置说明：

• 英文页面：保持原始英文内容输出
• 中文页面：自动识别并输出中文内容
• 其他语言：保持原始语言，支持多语言 markdown

优先级 2 - Web 搜索

工具: WebSearch
参数:
  query: 网址或网站名称 + "页面功能"

---

工具可用性检测

在执行评审前，先检测工具可用性：

1. 检查是否有图像分析 MCP 工具可用
2. 检查是否有 Web Reader MCP 工具可用
3. 根据可用工具选择执行策略
4. 如果都不可用，使用兜底方案（请求用户描述）

工具检测方法：

• 尝试调用工具，如果失败则切换到下一个优先级
• 或根据用户环境配置判断可用工具

---

提示用户安装 MCP（可选）

如果用户频繁使用截图评审功能，可以建议：

建议安装以下 MCP 服务器以获得更好的图像分析体验：

1. ZAI MCP Server - 强大的图像分析能力
   配置位置: ~/.claude/mcp_settings.json

2. Web Reader MCP - 用于网页内容提取
   配置位置: ~/.claude/mcp_settings.json

安装指南可参考 Claude Code 官方文档。