Playwright MCP 截图标注方案调研：推荐方案 1
1. 调研结论（先看这个）
本次在复杂布局页面（Apple 官网 PC + H5）对三种方案做了实测对比，结论如下：
- 推荐方案：方案1（页面内标注后截图）
- 推荐原因：实现最直接、定位精度高、视觉自然、适合自动化批量生产
2. 调研背景
目标是实现一条由 AI 自动执行的截图标注流水线：
先通过 Playwright MCP 抓取页面，再自动在图中标出重点功能（红框、说明文字），用于文档/教程/演示。
本次对比方案：
- 方案1：页面内注入标注，再截图
- 方案2：先截图，再离线后处理标注
- 方案3：页面内聚光灯（遮罩挖空）高亮，再截图
3. 实验样本与基线图
- 实验页面：
https://www.apple.com/ - 设备维度：
- PC 视口：
1255 x 971 - H5 视口：
390 x 844
- PC 视口：
- 标注目标：
- PC：首屏
Learn more按钮 - H5：顶部
Menu菜单按钮
- PC：首屏
基线图（无标注）：
PC 基线图
H5 基线图
4. 三种方案的实现原理与效果
4.1 方案1：页面内注入标注后截图（推荐）
实现原理
- 用 Playwright MCP 定位目标元素（DOM +
getBoundingClientRect）。 - 通过
browser_evaluate注入一个 overlay 层（红框 + 文案）。 browser_take_screenshot输出最终标注图。- 可选：截图后移除 overlay，避免影响后续步骤。
效果图
PC - 方案1
H5 - 方案1
观察
- 标注和页面元素贴合度高。
- 视觉风格自然，不突兀。
- 自动化链路短，稳定性最好。
4.2 方案2：截图后离线后处理标注
实现原理
- 先获取原始截图。
- 在离线图像处理阶段（如
System.Drawing/Pillow/Sharp）绘制红框、标签、连线。 - 导出最终标注图。
效果图
PC - 方案2
H5 - 方案2
观察
- 离线渲染可复现，审计友好。
- 标注风格易统一。
- H5 场景下文本避让需要额外逻辑，否则容易顶边/遮挡。
4.3 方案3：页面内聚光灯高亮（遮罩挖空）
实现原理
- 定位目标元素矩形区域。
- 注入全屏半透明遮罩，并对目标区域做挖空（
clip-path）。 - 叠加红框和标签，截图输出。
效果图
PC - 方案3
H5 - 方案3
观察
- 视觉引导最强，适合教程式"看这里"。
- 侵入性较强，不适合所有文档风格。
- 对遮罩层和标签避让的调试成本高于方案1。
5. 对比总结
| 维度 | 方案1 页面内标注 | 方案2 后处理 | 方案3 聚光灯 |
|---|---|---|---|
| 实现复杂度 | 低 | 中 | 中偏高 |
| 标注精度 | 高 | 高（依赖坐标传递） | 高 |
| 视觉自然度 | 高 | 中 | 中（强调感强） |
| 教程引导强度 | 中 | 中 | 高 |
| 批量自动化 | 高 | 高 | 中 |
| 推荐等级 | 高（首选） | 中 | 中 |
6. 推荐落地策略
默认采用 方案1 作为主流程：
- AI 负责识别目标元素并生成标注文案。
- MCP 在页面内注入红框 + 标签后截图。
- 输出最终图并清理页面标注层。
补充策略：
- 需要强引导教程时，切换到方案3。
- 需要严格审计、离线重渲染时，使用方案2。