HTML 頁面轉圖片 Agent Skill

一個 Agent Skill，用於將 HTML 檔案中的多個頁面元素轉換為獨立的圖片檔案。

📋 功能

• ✅ 自動識別 HTML 中的頁面元素（預設 .page 選擇器）
• ✅ 為每個頁面生成高畫質截圖（2x 解析度）
• ✅ 根據頁面編號自動命名輸出檔案
• ✅ 支援自定義引數配置
• ✅ 可作為 Agent Skill 被呼叫

📦 安裝

npm install

🚀 使用方法

想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。

作為 Agent Skill 使用

import { execute } from './index.js';

const result = await execute({
  htmlFile: 'xiaohongshu-articles.html',
  outputDir: 'output',
  pageWidth: 375,
  pageHeight: 667,
  selector: '.page'
});

console.log(result);

直接執行

npm run convert

或者：

node index.js

📁 專案結構

.
├── index.js              # Skill 主入口檔案
├── skill.json           # Skill 配置檔案
├── lib/
│   └── convert-pages.js # 核心轉換邏輯
├── convert-pages.js     # 舊版指令碼（保留相容）
├── package.json
└── README.md

⚙️ 引數配置

📤 輸出

所有圖片將儲存在 output 目錄下，檔案命名格式為： - page-01.png (封面頁) - page-02.png (第一個內頁) - page-03.png (第二個內頁) - ...

📊 返回值

{
  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() 函式呼叫，傳入所需引數

📝 示例

// 使用預設配置
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'
});

這個 Skill 質量中規中矩，功能實用但配套不夠完善。文件說明清晰完整，引數配置靈活，截圖效果不錯。但缺少示例檔案，新手上手可能困難；沒有測試用例，穩定性和相容性存疑。適合有一定經驗的開發者使用，普通使用者需要額外學習成本。