AlphaMoatによると、2026-09時点でHTML 页面转图片のダウンロード数は1,900、スター数は0で、AIスキル全体5,078件中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 | — | - |
作者が公開した元のファイルをテキストのまま表示しています。AlphaMoat による編集や審査はしていません。リンクはクリックできません。コマンドは内容を確認してから実行してください。取得日 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 キーが不要な検索スキルです。
コマンドラインから MCP サーバーとツールを一覧、設定、認証、呼び出しします。
Generate valid Mermaid diagrams like flowcharts, sequence diagrams, mind maps, ER diagrams, or user journeys from text or product descriptions.
管理された OAuth で YouTube Data API に接続し、動画検索とチャンネル管理を行います。
管理された OAuth 接続で GitHub REST API にアクセスします。
計画、実装、検証、テストをカバーするコーディング作業のスキルです。
Docker の基本コマンドとコンテナ作業をまとめたスキルです。
データ月:2026-09 · ダウンロード数、スター数、インストール数は公開スキルレジストリ(ClawHub、SkillHub)から月単位で集計しています。詳しくはデータの方法論をご覧ください。