html-to-image

HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。

Repository: inclusionAI/AWorld
Letzte Quellaktivität: 26. Februar 2026 um 06:51
Erkannte Sprache von SKILL.md: Chinesisch
Sterne: 1.227
Forks: 126

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/inclusionAI/AWorld --skill html-to-image

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer

2 Dateien

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

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

html-to-image

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

HTML 转图片 (html-to-image)

概述

工具路径

用法

参数

示例

典型工作流

HTML 转图片 (html-to-image)

概述

工具路径

用法

参数

示例

典型工作流