据 AlphaMoat 统计,截至 2026-09,HTML 页面转图片 累计下载 1,900 次、获 0 个星标,在全部 5,078 个 AI 技能中排名第 4,493 位,在「开发编程」分类(577 个)中排名第 537 位。
| 平台 | 累计安装 | 累计下载 | 星标 | 评论 |
|---|---|---|---|---|
| ClawHub ↗ | 29 | 1,059 | - | - |
| SkillHub ↗ | 214 | 1,900 | - | — |
各平台的计数口径不同,统计时间不一致。
该技能描述按页面选择器识别元素、生成截图并按页面编号命名文件的流程,也支持自定义参数。输出效果取决于 HTML 内容、渲染环境和配置;这里不表示已处理任何文件。
资料发布于 2026-10-27
以下是根据技能文档生成的示例,不代表实际运行结果。
2026-09 起统计方法调整:同名技能按作者分别统计,并覆盖全部技能。图中虚线为调整前的月份,与之后的数据不直接比较,也不计算跨越调整的增长。
| 月份 | 累计下载 | 环比 | 星标 |
|---|---|---|---|
| 2026-09 | 1,900 | — | - |
| 2026-08 | 1,489 | +24.2% | - |
| 2026-07 | 1,199 | — | - |
| 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),按月更新。口径说明见数据方法。