{"skill":{"slug":"html-pages-to-images","displayName":"HTML 页面转图片","summary":"Convert multiple HTML page elements into separate high-resolution images with customizable settings and automatic file naming.","description":"# HTML 页面转图片 Agent Skill\r\n\r\n一个 Agent Skill，用于将 HTML 文件中的多个页面元素转换为独立的图片文件。\r\n\r\n## 📋 功能\r\n\r\n- ✅ 自动识别 HTML 中的页面元素（默认 `.page` 选择器）\r\n- ✅ 为每个页面生成高清截图（2x 分辨率）\r\n- ✅ 根据页面编号自动命名输出文件\r\n- ✅ 支持自定义参数配置\r\n- ✅ 可作为 Agent Skill 被调用\r\n\r\n## 📦 安装\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\n## 🚀 使用方法\r\n\r\n### 作为 Agent Skill 使用\r\n\r\n```javascript\r\nimport { execute } from './index.js';\r\n\r\nconst result = await execute({\r\n  htmlFile: 'xiaohongshu-articles.html',\r\n  outputDir: 'output',\r\n  pageWidth: 375,\r\n  pageHeight: 667,\r\n  selector: '.page'\r\n});\r\n\r\nconsole.log(result);\r\n```\r\n\r\n### 直接运行\r\n\r\n```bash\r\nnpm run convert\r\n```\r\n\r\n或者：\r\n\r\n```bash\r\nnode index.js\r\n```\r\n\r\n## 📁 项目结构\r\n\r\n```\r\n.\r\n├── index.js              # Skill 主入口文件\r\n├── skill.json           # Skill 配置文件\r\n├── lib/\r\n│   └── convert-pages.js # 核心转换逻辑\r\n├── convert-pages.js     # 旧版脚本（保留兼容）\r\n├── package.json\r\n└── README.md\r\n```\r\n\r\n## ⚙️ 参数配置\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n|------|------|--------|------|\r\n| `htmlFile` | string | `xiaohongshu-articles.html` | HTML 文件路径（相对或绝对） |\r\n| `outputDir` | string | `output` | 输出图片的目录 |\r\n| `pageWidth` | number | `375` | 页面宽度（像素） |\r\n| `pageHeight` | number | `667` | 页面高度（像素） |\r\n| `selector` | string | `.page` | 要截图的页面元素选择器 |\r\n\r\n## 📤 输出\r\n\r\n所有图片将保存在 `output` 目录下，文件命名格式为：\r\n- `page-01.png` (封面页)\r\n- `page-02.png` (第一个内页)\r\n- `page-03.png` (第二个内页)\r\n- ...\r\n\r\n## 📊 返回值\r\n\r\n```javascript\r\n{\r\n  success: true,\r\n  message: \"成功转换 7 个页面为图片\",\r\n  data: {\r\n    images: [\"output/page-01.png\", \"output/page-02.png\", ...],\r\n    count: 7,\r\n    outputDir: \"/path/to/output\"\r\n  }\r\n}\r\n```\r\n\r\n## 🔧 作为 Agent Skill 集成\r\n\r\n1. 将整个目录复制到 Agent 的 skills 目录\r\n2. 在 Agent 配置中引用此 skill\r\n3. 通过 `execute()` 函数调用，传入所需参数\r\n\r\n## 📝 示例\r\n\r\n```javascript\r\n// 使用默认配置\r\nconst result1 = await execute();\r\n\r\n// 自定义 HTML 文件\r\nconst result2 = await execute({\r\n  htmlFile: './my-article.html'\r\n});\r\n\r\n// 完全自定义\r\nconst result3 = await execute({\r\n  htmlFile: '/absolute/path/to/article.html',\r\n  outputDir: './screenshots',\r\n  pageWidth: 800,\r\n  pageHeight: 1200,\r\n  selector: '.article-page'\r\n});\r\n```\r\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":752,"installsAllTime":28,"installsCurrent":1,"stars":0,"versions":1},"createdAt":1773139647673,"updatedAt":1778997338096},"latestVersion":{"version":"1.0.0","createdAt":1773139647673,"changelog":"Initial release of html-pages-to-images Agent Skill.\n\n- Converts multiple HTML page elements to individual high-resolution images.\n- Automatically detects elements using the `.page` selector (customizable).\n- Generates images with automatic sequential filenames (e.g., page-01.png).\n- Supports custom configuration: HTML file, output directory, page dimensions, and selector.\n- Can be used as an Agent Skill with a simple JavaScript API.\n- Includes command-line and script usage options.","license":"MIT-0"},"metadata":null,"owner":{"handle":"shiker1996","userId":"s1700zm05hkrgcg25gs0nyppjh83ke2q","displayName":"shiker","image":"https://avatars.githubusercontent.com/u/32234876?v=4"},"moderation":{"isSuspicious":false,"isMalwareBlocked":false,"verdict":"clean","reasonCodes":["review.llm_review"],"summary":"Review: review.llm_review","engineVersion":"v2.4.24","updatedAt":1780089822282}}