用途:为懒加载、滚动动画、Framer、WebGL/canvas 或大量 reveal 效果的网页生成可靠整页截图,也用于修复已有截图中出现空白、灰白条带、缺失懒加载区块等问题。适合日常 UI 灵感文章等需要整页与分区图片素材的场景。
主要能力:打开真实页面 URL,而非缩略图、封面、remix 页或资源地址;先从上到下滚动一次预热页面,让懒加载媒体与 reveal 区块挂载;回到顶部后按视口大小或略重叠的步长向下滚动,每次停止等待约 2 秒,捕获稳定后的视口截图;将各视口截图纵向拼接为整页图;分区裁剪从拼接图生成,而非原生 fullPage 截图;校验拼接图与代表静帧、MP4、运动帧是否一致;出现空白/灰/白色带、视觉内容极少、缺失懒加载区块、内容列极窄或与滚动视频明显不符时拒绝该整页候选。
使用方式:在技能目录提供脚本时,可运行: node <skills-root>/stitched-full-page-capture/scripts/stitch_full_page_capture.mjs --manifest articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json 脚本读取 items[].pageUrl、fullPageImage、sectionImages,用 Playwright Chromium 打开每个实时页面,预热懒加载内容,捕获稳定视口切片,拼接为 fullPageImage,基于拼接图重新生成已有分区裁剪,并更新 manifest.json 中的 fullPageCaptureMethod: "stitchedViewportScreenshots"、viewport、step、segment count 及修正后的裁剪坐标。可用选项包括 --item 4(仅修复第 4 项,从 1 开始)、--viewport 1440x1100(默认)、--step 950(默认,小于视口高度以形成重叠)、--wait 2000(每次滚动停止后等待毫秒)、--quality 3(ffmpeg JPEG 质量,数值越低越好)。
校验:捕获或修复后,至少检查此前明显错误的页面;用 sips -g pixelWidth -g pixelHeight full-page/.jpg 确认尺寸符合预期;确认整页图非大部分空白且包含下方内容;确认分区裁剪坐标连续并结束于整页图高度;运行项目常规检查,例如: git diff --check -- articles/YYYY-MM-DD-ui-inspiration-capture/content.md articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json node scripts/check-ui-inspiration-duplicates.mjs articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json for f in articles/YYYY-MM-DD-ui-inspiration-capture/videos/.mp4; do ffprobe -v error "$f" >/dev/null; done
限制与说明:滚动视频能证明页面在真实滚动时可渲染,但不能替代整页静帧证据;原生 fullPage 截图可作为对比候选保存,除非与拼接截图视觉一致,否则不作为事实来源;日常 UI 文章应更新 manifest,并只提交被修复的文章素材与元数据。其他平台支持、收费与价格信息暂未提供。