據 AlphaMoat 統計,截至 2026-09,HTML 頁面轉圖片 累計下載 1,900 次、獲 0 個星標,在全部 5,078 個 AI 技能中排名第 4,493 位,在「開發程式設計」分類(577 個)中排名第 537 位。
| 平台 | 累計安裝 | 累計下載 | 星標 | 評論 |
|---|---|---|---|---|
| ClawHub ↗ | 29 | 1059 | - | - |
| SkillHub ↗ | 214 | 1900 | - | — |
各平台的計數口徑不同,統計時間不一致。
該技能描述按頁面選擇器識別元素、生成截圖並按頁面編號命名檔案的流程,也支援自定義引數。輸出效果取決於 HTML 內容、渲染環境和配置;這裡不表示已處理任何檔案。
資料釋出於 2026-10-27
以下是根據技能文件生成的示例,不代表實際執行結果。
2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。
| 月份 | 累計下載 | 環比 | 星標 |
|---|---|---|---|
| 2026-09 | 1900 | — | - |
| 2026-08 | 1489 | +24.2% | - |
| 2026-07 | 1199 | — | - |
| 2026-05 | 735 | — | - |
| 2026-03 | 429 | — | - |
以下是作者釋出的原始檔案,按純文字顯示,本站未做修改或稽核;其中的連結不可點選,命令請核實後再執行。抓取於 2026-10-23。
# HTML 页面转图片 Agent Skill 一个 Agent Skill,用于将 HTML 文件中的多个页面元素转换为独立的图片文件。 ## 📋 功能 - ✅ 自动识别 HTML 中的页面元素(默认 `.page` 选择器) - ✅ 为每个页面生成高清截图(2x 分辨率) - ✅ 根据页面编号自动命名输出文件 - ✅ 支持自定义参数配置
- ✅ 可作为 Agent Skill 被调用
## 📦 安装
```bash
npm install
```
## 🚀 使用方法
### 作为 Agent Skill 使用
```javascript
import { execute } from './index.js';
const result = await execute({
htmlFile: 'xiaohongshu-articles.html',
outputDir: 'output',
pageWidth: 375,
pageHeight: 667,
selector: '.page'
});
console.log(result);
```
### 直接运行
```bash
npm run convert
```
或者:
```bash
node index.js
```
## 📁 项目结构
```
.
├── index.js # Skill 主入口文件
├── skill.json # Skill 配置文件
├── lib/
│ └── convert-pages.js # 核心转换逻辑
├── convert-pages.js # 旧版脚本(保留兼容)
├── package.json
└── README.md
```
## ⚙️ 参数配置
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `htmlFile` | string | `xiaohongshu-articles.html` | HTML 文件路径(相对或绝对) |
| `outputDir` | string | `output` | 输出图片的目录 |
| `pageWidth` | number | `375` | 页面宽度(像素) |
| `pageHeight` | number | `667` | 页面高度(像素) |
| `selector` | string | `.page` | 要截图的页面元素选择器 |
## 📤 输出
所有图片将保存在 `output` 目录下,文件命名格式为:
- `page-01.png` (封面页)
- `page-02.png` (第一个内页)
- `page-03.png` (第二个内页)
- ...
## 📊 返回值
```javascript
{
success: true,
message: "成功转换 7 个页面为图片",
data: {
images: ["output/page-01.png", "output/page-02.png", ...],
count: 7,
outputDir: "/path/to/output"
}
}
```
## 🔧 作为 Agent Skill 集成
1. 将整个目录复制到 Agent 的 skills 目录
2. 在 Agent 配置中引用此 skill
3. 通过 `execute()` 函数调用,传入所需参数
## 📝 示例
```javascript
// 使用默认配置
const result1 = await execute();
// 自定义 HTML 文件
const result2 = await execute({
htmlFile: './my-article.html'
});
// 完全自定义
const result3 = await execute({
htmlFile: '/absolute/path/to/article.html',
outputDir: './screenshots',
pageWidth: 800,
pageHeight: 1200,
selector: '.article-page'
});
```
用 gh 命令列工具檢視 GitHub 上的 PR 檢查、工作流執行與 API 查詢的技能。
聚合 16 個搜尋引擎、無需 API Key 的檢索技能。
用命令列直接列出、配置、授權並呼叫 MCP 服務與工具。
生成有效的 Mermaid 圖表,如流程圖、時序圖、思維導圖、ER 圖、使用者旅程等。
用受管 OAuth 訪問 YouTube Data API,檢索影片並管理頻道內容。
透過受管的 OAuth 連線訪問 GitHub REST API。
覆蓋規劃、實現、驗證與測試的編碼工作流技能。
整理 Docker 常用命令與容器工作流的技能。
資料月份:2026-09 · 下載/星標/安裝數聚合自公開技能註冊庫(ClawHub、SkillHub),按月更新。口徑說明見資料方法。