Webpage Screenshot

What this skill does

The local script can create a full-page PNG including scrollable content. Browser MCP is suited to quick inspection and interaction but does not directly create a screenshot file. Screenshots may capture login details, private account data, or internal content; review the page and authenticated session before saving or sharing, and use trusted browser dependencies.

Profile published 2026-10-29

Example prompts

Generated from the skill’s documentation as examples; not results of actual runs.

Monthly Trend

SKILL.md (original)

The author’s original file, shown as plain text without edits or review by AlphaMoat. Links are not clickable; check commands before running them. Fetched 2026-10-23.

---
name: webpage-screenshot
description: 打开指定网页并截图为图片文件。在用户要求对某 URL 截图、保存网页为图片、或需要网页快照时使用。
---

# 网页截图

## 何时使用

- 用户给出一个 URL，要求「打开并截图」或「保存网页为图片」

- 需要网页快照、页面留档或可视化结果时

## 方式一：运行项目脚本（推荐，得到文件）

使用项目内 TypeScript 脚本，可保存为本地图片文件：

```bash
# 在项目根目录执行
npm run screenshot -- <URL> [输出路径]
```

示例：

```bash
npm run screenshot -- https://example.com
# 默认保存为 ./screenshot.png

npm run screenshot -- https://example.com ./output/page.png
```

**前置条件**：已执行 `npm install` 且已安装浏览器：`npx playwright install chromium`。

## 方式二：使用 MCP 浏览器

若仅需在对话中「看到」页面内容而不必保存为文件，可使用 Cursor 的 browser MCP：

1. `browser_navigate` 打开目标 URL
2. `browser_snapshot` 获取页面结构（相当于当前状态的“快照”信息）

注意：MCP 浏览器不直接生成截图文件，适合快速查看与交互。

## 输出

- 脚本方式：在指定路径生成 PNG 截图（默认 `screenshot.png`）。
- 截图为整页（含滚动区域），视口宽度默认 1280px。

Popular in AI Agent