用途:为懒加载、滚动动画、Framer、WebGL/canvas 或 reveal 较多的网页生成或修复可靠的整页截图。当一次性浏览器 fullPage 截图返回空白、灰色、白色、内容稀疏或只有一条窄内容,而滚动录制的 MP4 显示页面正常渲染时,应改用本技能。
主要能力:不信任一次性 fullPage 截图,改为逐屏截取“稳定后的视口”再纵向拼接;可从拼接图裁切文章证据或区块图;可用附带脚本按 manifest.json 批量修复或重新生成每日 UI 灵感文章的截图;可校验尺寸、空白/灰带,并与代表性静帧、MP4、运动帧比对。
使用方式:打开真实页面 URL,而非缩略图、封面、remix 页或资源 URL;先从上到下滚动一次预热懒加载内容,回到顶部;按视口高度或略重叠的步长向下滚动,每次停止后等待约 2 秒,截取稳定视口;将各视口截图纵向拼接为整页图;从拼接图裁切区块,而非从原生 fullPage 截图裁切;最后做校验。
脚本用法: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 打开页面,预热、截取视口切片、拼接、重新生成区块裁切,并更新 manifest.json 中的 fullPageCaptureMethod、viewport、step、segment 数量与修正后的裁切坐标。常用选项:--item 4、--viewport 1440x1100、--step 950、--wait 2000、--quality 3。
适用场景:懒加载、滚动动画、Framer、WebGL/canvas、reveal 密集页面;一次性 fullPage 截图与滚动视频不一致;需要从可信整页图裁切文章证据或区块;批量修复每日 UI 灵感文章截图。
限制:若页面在单次原生 fullPage 截图中已正确渲染,且无懒加载、滚动动画或 reveal 问题,则无需使用本技能。滚动视频只能证明页面在真实滚动时可渲染,不能替代整页静帧证据。原生 fullPage 截图可保留作对比候选,但除非与拼接图视觉一致,否则不应作为事实来源。校验时可用 sips -g pixelWidth -g pixelHeight full-page/*.jpg 检查尺寸,并运行项目常规检查,如 git diff --check、node scripts/check-ui-inspiration-duplicates.mjs 及 ffprobe 校验 MP4。