一键网页快照与截图工具

基于 Playwright 的网页截图方案，可将任意 URL 保存为高清 PNG，适用于留档、分享与可视化展示，文档透明无隐藏风险。

基本信息

• 技能名称?webpage-screenshot
• 中文名称?一键网页快照与截图工具
• 作者?Malenconiaprincep
• 分类?专业技能
• 版本?v1.0.0
• 标签?content-media, productivity, docs, automation, testing, development-engineering

使用方法

使用说明
核心用法
webpage-screenshot 提供两种互补的网页捕获方案。 方式一（推荐） 通过项目内 TypeScript 脚本执行截图，用户需在项目根目录运行 npm run screenshot -- [输出路径] ，默认生成包含滚动区域的整页 PNG 文件（视口 1280px），支持自定义输出路径。 方式二 适用于快速查看场景，通过 Cursor 的 browser MCP 调用 browser_navigate 和 browser_snapshot 获取页面结构快照，不生成实体文件但支持交互查看。两种方式均需预先执行 npm install 并安装 Playwright 浏览器（ npx playwright install chromium ）。
显著优点
该 Skill 的最大优势在于 整页截图能力 ，可自动捕获视口外内容，适用于长页面存档； 输出灵活性 允许用户指定文件路径，便于集成到自动化工作流； 双模式设计 兼顾了文件归档需求（脚本方式）与快速预览需求（MCP 方式）。此外，文档结构清晰，明确标注了前置条件与依赖要求，降低了使用门槛。作为纯文档型资产，其功能描述透明可查，无隐藏逻辑。
潜在局限
主要局限性在于 环境依赖较重 ，需完整的 Node.js 环境和 Playwright 浏览器安装，对临时使用场景不够轻量； T3 来源等级 意味着由个人开发者维护，长期更新与支持存在不确定性； 功能边界依赖外部脚本 ，SKILL.md 仅提供调用说明，实际截图逻辑由项目内脚本实现，用户需自行确保项目代码安全； 无实时渲染反馈 ，脚本方式执行后仅输出文件，无过程预览。
目标群体
特别适合 前端开发者 进行页面视觉回归测试、 产品经理 制作需求文档配图、 运营人员 保存活动页快照、 内容创作者 采集网页素材，以及 QA 工程师 记录 Bug 现场。对于需要定期监控网页变化或建立可视化文档库的技术团队尤为实用。
使用风险
依赖安全风险 ：实际功能依赖项目内的 Playwright 脚本，需确保 package.json 中的依赖来自可信源，避免供应链攻击。 隐私泄露风险 ：截图会访问目标 URL，若用于捕获含敏感信息的内部页面（如后台管理系统、含个人数据的页面），截图文件可能残留本地或意外分享。 性能风险 ：Playwright 启动浏览器进程消耗内存较高（通常 100-300MB），频繁截图或并发执行可能影响系统性能。 网络风险 ：访问恶意网站可能导致浏览器环境受到攻击，建议在隔离环境中使用。