Claude 一句话，网页长图一键搞定！

为什么你需要这个 Skill

写文章、做汇报、做 UI 标注的时候，你是不是经常遇到这种痛苦：网页太长，F12 控制台截图只能截一屏，拼接起来又糊又丑？请 Claude 截个长图，它帮你搞定全页面——从上到下，包括滚动到底的内容，一键输出 PNG。

它是怎么做到的

这个 Skill 叫 Full-Page Screenshot，核心原理非常硬核：直接走 Chrome DevTools Protocol（CDP），不依赖 Puppeteer、不依赖 Playwright、不需要 npm install，说白了就是裸连 Chrome。

它的工作流程是这样的：

• 连接 Chrome 远程调试端口，建立 WebSocket
• 动态修改视口和滚动容器的 CSS，把整个页面展开
• 等待 DOM 稳定（SPA 页面的渲染需要时间）
• 触发懒加载图片（滚动触发 IntersectionObserver）
• 调用 Page.captureScreenshot 截取
• 如果是超长页面（>16000px），分块截取后用 Python PIL 拼接

支持哪些场景

• SPA 单页应用：自动识别 overflow-y: scroll/auto 容器并展开
• 超长页面：超过 16000px 分块拼接，画质不降
• 懒加载图片：自动滚动触发图片加载，截出来完整
• CDP Proxy 场景：如果有别的工具占着 WebSocket，自动回退到代理 API

怎么用

安装只要一行：

npx skills add LewisLiu007/full-page-screenshot

或者手动 clone 到本地：

git clone https://github.com/LewisLiu007/full-page-screenshot.git ~/.claude/skills/full-page-screenshot

装完之后，直接用自然语言让 Claude 操作：

• “截取 https://example.com 的长图”
• “Screenshot this page as a long image”
• “截个长图”

Claude 会自动识别截图意图并调用这个 Skill。

调参看这里

• --width：视口宽度，默认 1200px（文章场景）到 1440-1920px（宽表场景）
• --dpr：设备像素比，2 = Retina 高清（文件会大 4 倍）
• --wait：页面加载超时，只在 URL 模式下生效

前置要求

• Node.js 22+
• Chrome 开启远程调试：打开 chrome://inspect/#remote-debugging → 勾选 “Allow remote debugging”
• Python 3 + Pillow（可选，超长页面拼接才需要）

总结

这个 Skill 属于典型的「小而美」工具——代码零依赖、功能单一但做到极致。如果你经常需要网页截图，或者在做 AI 自动化工作流需要捕获完整页面，它值得放进你的 Skill 库里。

GitHub：https://github.com/LewisLiu007/full-page-screenshot

GitHub: https://github.com/LewisLiu007/full-page-screenshot