mcpField
S
stitched-full-page-capture

stitched-full-page-capture

github.com/akillness设计与 UI5357 次安装今天更新
代码仓库

关于 stitched-full-page-capture

针对单次整页截图显示不完整页面的捕获流程，尤其适用于延迟加载或滚动动画网站。它将稳定后的视口截图纵向拼接，并提供脚本来重新生成文章截图和裁剪图。

主要功能

  1. 01截图前滚动预热页面
  2. 02捕获稳定后的视口截图
  3. 03纵向拼接为整页图像
  4. 04从拼接图重新生成分区裁剪
  5. 05检查尺寸与图像内容
  6. 06通过脚本处理文章清单

适用场景

  1. 01修复 Framer 页面的空白截图
  2. 02捕获长页面中的延迟加载内容
  3. 03从可靠的页面图像制作分区裁剪
  4. 04将拼接图与滚动录屏对照检查

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/akillness/jeo-skills --skill stitched-full-page-capture

安装后在 Claude Code 中输入/stitched-full-page-capture确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

SKILL.toon
agents/
openai.yaml
scripts/
stitch_full_page_capture.mjs

详细介绍

拼接式整页截图

概述

使用稳定后的视口截图，而不是依赖浏览器一次性生成的 fullPage 截图。对于 Framer 页面及其他采用延迟加载或滚动动画的网站，这一点尤其重要：MP4 可能看起来正常，但长截图却大部分空白。

何时使用此技能

  • 延迟加载、滚动动画、Framer、WebGL／画布或大量揭示动画页面的整页截图为空白、灰色、白色、内容稀疏，或只显示一小条内容时。
  • 一次性整页截图与正常工作的滚动录制 MP4 不一致，而 MP4 显示页面渲染正常时。
  • 需要从可信的整页图像中截取文章证据或分区截图，而不是使用不可靠的原生 fullPage 截图时。
  • 通过随附的 stitch_full_page_capture.mjs 脚本处理 manifest.json，修复或重新生成每日 UI 灵感文章截图时。
  • 通过检查尺寸、空白／灰色条带，以及与代表性静帧、MP4 和动态帧的一致性来验证拼接截图时。
  • 不适用于原生 fullPage 截图已能正确呈现、没有延迟加载、滚动动画或揭示动画问题的页面——此类页面使用普通的一次性截图即可。

核心工作流

  1. 打开真实页面 URL，而不是市场缩略图、封面图、混剪页面或资源 URL。
  2. 从顶部滚动到底部一次，预热页面，使延迟加载的媒体和揭示区域完成挂载。
  3. 返回顶部。
  4. 按视口大小或略有重叠的步幅向下滚动。
  5. 每次滚动停止后等待约 2 秒。
  6. 截取稳定后的视口。
  7. 将视口截图纵向拼接成一张整页图像。
  8. 从拼接图像中截取分区截图，而不是从浏览器原生 fullPage 截图中截取。
  9. 将拼接图像与代表性静帧、MP4 和动态帧进行核对。

如果整页候选图像存在空白／灰色／白色条带、视觉内容极少、缺少延迟加载的区域、内容列极窄，或与滚动视频明显不一致，请予以舍弃。

脚本

对于每日 UI 灵感文章，如果此技能目录中提供了辅助脚本，请使用：

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"、视口、步幅、分段数量及修正后的截图坐标。

实用选项：

--item 4              # repair only item 4, 1-based
--viewport 1440x1100 # default
--step 950           # default; use less than viewport height for overlap
--wait 2000          # ms to wait after each scroll stop
--quality 3          # ffmpeg JPEG quality, lower is better

验证

截图或修复完成后：

  • 检查至少一个之前明显有问题的页面。
  • 确认 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 文章，请更新清单，并且只提交修复后的文章资源和元数据。

参考资料

评论

支持 Markdown