🧩让你的Trae能够高效的读取网页截图并且分析，从此告别手动截图[Skill分享]

互动交流
1

最近我开源了一个 web-screenshot-skill，专门为 TRAE（以及其他支持 Skills 的 AI 代理/工具）设计，用于高效捕获网页在多种设备上的真实视觉效果，支持交互动作（如点击、滚动、填写表单）后再截图，非常适合前端开发、响应式测试、多模态 LLM 视觉分析等场景。

为什么需要这个 Skill？

在网页开发中，我们经常需要：

  • 验证不同设备（手机、平板、桌面）的响应式布局
  • 为多模态 LLM 提供高质量视觉输入（带设备像素比 DPR 的清晰截图）
  • 模拟用户交互后截图（如登录后、点击菜单后、滚动查看长页面）
  • 批量生成截图用于文档、测试报告或 AI 分析
  • 处理本地 HTML 文件或批量 URL

手动用浏览器 DevTools 一个个截太麻烦，这个 Skill 用 Playwright 自动化实现，一键多设备 + 交互 + 元数据输出。

GitHub 仓库：GitHub - QinIndexCode/web-screenshot-skill: A high-quality web page screenshot capture tool designed for multimodal LLM visual analysis. Supports multiple device resolutions, batch processing, and metadata generation. · GitHub

核心功能亮点

  • 12 个设备预设：8 个移动端（iPhone SE/14 Pro 等，带真实 User-Agent 和 DPR）和 4 个桌面（HD 到 4K），支持分组（all_mobile、all_desktop、all）。
  • 交互动作支持（--actions）：点击、填写、滚动、悬停、等待、键盘按键、JS 执行等，可在截图前执行序列动作，还支持中间多次截图。
  • 多源支持：URL、本地 HTML 文件、批量 TXT 文件。
  • 高质量输出：PNG（默认，无损，适合 LLM）或 JPEG，可全页面截图、暗黑模式、自定义等待/超时。
  • 智能命名 + 元数据：每个截图自动带 JSON sidecar，包含设备信息、动作记录、页面标题等，便于后续分析。
  • Python 库模式：不仅 CLI，还可作为模块集成到你的脚本或 TRAE Agent 中。
  • 鲁棒性：错误不致命、自动重试、并行处理。

快速上手（CLI）

  1. 安装依赖：

    pip install playwright
playwright install chromium

  2. 基础使用示例：

    # 默认 iPhone 14 Pro 截图
python web_screenshot.py --url "https://example.com"

# 多设备 + 本地 HTML
python web_screenshot.py --file "./index.html" --devices "iphone_se,full_hd"

# 所有移动设备 + 输出目录
python web_screenshot.py --url "https://example.com" --devices "all_mobile" --output "./my-screenshots"

  3. 交互动作示例（超级实用！）：

    # 滚动 + 多位置截图
python web_screenshot.py --url "https://example.com" --actions "scroll:0,300;wait:500;screenshot;top;scroll:0,800;wait:500;screenshot:bottom"

# 点击菜单后截图
python web_screenshot.py --url "https://example.com" --actions "click:#menu-btn;wait:500;screenshot:menu_open"

# 填写表单 + 登录后截图
python web_screenshot.py --url "https://example.com" --actions "fill:#username:admin;fill:#password:secret;click:#login-btn;wait:1000;screenshot:dashboard"

输出目录默认 ./screenshots/，文件名示例：example_com_iphone_14_pro_390x844_20260421_143025_top.png + 对应 JSON 元数据。

设备预设一览（部分）

  • 移动：iphone_14_pro (390×844, DPR 3)、iphone_se、pixel_7、ipad_pro 等
  • 桌面：full_hd (1920×1080)、4k 等
  • 自定义：--width 1440 --height 900

完整列表和参数详见仓库 SKILL.md / README.md。

程序化使用（集成到 TRAE Agent 或脚本）

from web_screenshot import WebScreenshot, DevicePresets, Action, ActionType

capturer = WebScreenshot(output_dir="./screenshots")

actions = [
    Action(type=ActionType.SCROLL, value={"x": 0, "y": 300}),
    Action(type=ActionType.WAIT, value=500),
    Action(type=ActionType.SCREENSHOT, name="after_scroll"),
]

result = capturer.capture(
    url="https://example.com",
    device=DevicePresets.IPHONE_14_PRO,
    actions=actions,
    full_page=True
)
print(result.file_path)

如何在 TRAE 中使用这个 Skill？

  1. Fork 或直接引用这个仓库的 SKILL.md。
  2. 在 TRAE 项目/Agent 设置中导入 Skills（社区支持从 GitHub 导入）。
  3. 或者你也可以直接让Trae帮你导入，哈哈
  4. 当你提到“截图网页”、“多设备兼容性”、“登录后看效果”等关键词时，TRAE Agent 会自动调用这个 Skill 执行。

这样，整个团队或社区都能复用同一套高效、可视化工作流，减少“prompt tax”，提升一致性。

欢迎贡献 & 使用反馈

  • Star / Fork / Issue 欢迎！
  • 有新设备预设、动作类型需求，或想集成更多浏览器引擎，随时 PR。
  • 在 TRAE 社区分享你的使用案例，一起让 AI 开发更“所见即所得”！

仓库链接再次贴上：
https://github.com/QinIndexCode/web-screenshot-skill

希望这个 Skill 能帮到大家高效开发网页、测试 UI、喂给多模态模型视觉数据！有问题随时评论或 @ 我。

补充：当然，使用该Skill前提是选择的模型需要支持图片推理
（本文基于仓库最新内容整理，日期 2026-04-21）

3 个赞
2

可以100分

1 个赞