html-to-image
HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。
DeepseekModel
キュレーション済みスキル
品質 優秀 · 90
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=inclusionai-aworld-examples-skill-agent-skills-html-to-image-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
name html-to-image description HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。 HTML 转图片 (html-to-image) 概述 将 HTML 文件或内容通过 agent-browser 渲染为图片。典型用法：Claude 生成精美 HTML → 本 skill 截图 → 得到可直接发布的图片。 工具路径 脚本： .claude/skills/html-to-image/html_to_image.sh 依赖： agent-browser （CDP 已连接）、 python3 用法 ./html_to_image.sh -o <output> [-f <html_file> | -c <html_content>] [-w <width>] [-p <cdp_port>] [--full] 参数 参数 说明 必填 默认 -o 输出图片路径（.png） 是 - -f HTML 文件路径（与 -c 二选一） 二选一 - -c HTML 内容字符串（与 -f 二选一） 二选一 - -w 视口宽度 否 1080 -e 视口高度（不指定则全页截图） 否 - -p CDP 端口 否 9222 --full 全页截图（忽略视口高度限制） 否 默认开启 示例 # 从 HTML 文件截图 ./html_to_image.sh \ -f card.html -o card.png # 直接传入 HTML 内容 ./html_to_image.sh \ -c '<html><body><h1>Hello</h1></body></html>' \ -o hello.png # 指定宽度（适配手机尺寸） ./html_to_image.sh \ -f infographic.html -o output.png -w 750 # 固定视口截图（非全页） ./html_to_image.sh \ -f page.html -o output.png -w 1080 -e 1920 --no-full 典型工作流 Claude 根据内容生成精美 HTML（信息图、卡片等） 使用本 skill 截图为 PNG 将截图传给 xhs-publisher 发布到小红书 # 生成图片 ./html_to_image.sh -f card.html -o card.png # 发布到小红书 ./.claude/skills/xhs-publisher/publish_xhs.sh -t "标题" -c "正文" -i card.png
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
