智能网页截图
将以下提示词粘贴到你的 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 变更的维护者