Agent Skills
返回列表
智能网页截图

智能网页截图

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_48fa727c/screenshot-skill-pro。

技能介绍

要解决什么问题

文档、Bug 复现或设计评审里,经常需要把线上页面或本地 HTML 固定成可分享的图片或 PDF。手动浏览器截图往往截不全滚动区域,导出 PDF 时样式也容易丢;用无头浏览器又需要自己装 Chromium、写启动参数。

技能如何工作

技能通过核心脚本 screenshot.py(Playwright + Chromium)加载目标地址或 file:/// 本地文件,再按参数写出文件:

  • 输出格式:png / jpg / pdf(PDF 为 A4,尽量保留背景色)
  • 视口与整页:默认 --full-page 截全页;可用 --no-full-page 只截当前视口
  • 尺寸与等待:--width / --height 控制视口;--wait 在页面 load 后再等多毫秒,适合懒加载或动画

典型流程是:和用户确认 URL 或路径、格式与保存路径 → 执行脚本 → 用附件把生成文件交给用户;需要时可先预览 HTML 再截。

依赖:首次运行会自动检测并安装 Playwright 与 Chromium,可能耗时数分钟;失败时需按文档手动安装。

适用边界与注意

  • 触发场景包括:给 URL 要截图/快照、HTML 转图或 PDF、「把页面存成 PDF」等表述。
  • 本地路径会自动转成 file:///;Windows 反斜杠路径会处理。
  • 页面加载慢时把 --wait 调到例如 3000 再试。

使用场景

  • 线上 Bug 复现时,把 staging 或生产 URL 整页截成 PNG 附在 Jira/飞书工单里。
  • 设计或前端评审前,把仓库里的本地 HTML 原型导出 JPG/PDF 给产品对照布局。
  • 技术写作者需要把指定文档站 URL 存成带背景的 A4 PDF 做版本归档或外发。
  • 慢加载页面(图表、懒加载列表)截图前调高 `--wait`,避免截到空白或未渲染区域。

适合人员

  • 负责缺陷跟踪、需要在工单里附上可复现页面整页截图的测试工程师
  • 手头是 `file:///` 或本地 HTML 文件、需转成图片/PDF 给非开发同事评审的前端或设计
  • 要把固定 URL 页面固化成 PDF 归档或发给客户的技术写作者或实施顾问
  • 写 release note 或 PR 说明、需要抓取指定网页快照展示 UI 变更的维护者