Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

Loslegen

html-to-image

Sterne1.211

Forks123

Aktualisiert26. Februar 2026 um 06:51

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

Installation

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.

In Manus ausführen

Quelle

inclusionAI

inclusionAI/AWorld

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·SOC 15-1252

Datei-Explorer

2 Dateien

SKILL.md

readonly

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

Mehr aus diesem Repository

gleiches Repository

self-evolve

inclusionAI/AWorld

Use for framework-gated self-evolve workflows in AWorld: evolve skills, create trajectory-backed proposals, inspect self-evolve run artifacts, run aworld-cli optimize, or prepare verified apply decisions through aworld.self_evolve gates.

2026-07-211.2k

web-content-grounding

inclusionAI/AWorld

Draft skill generated by self-evolve for trajectory-backed task handling.

2026-07-211.2k

media-comprehension

inclusionAI/AWorld

An intelligent assistant specialized in handling media files (images/audio/video). **Only for media file analysis**, does not handle document types. Media files that can be processed: - Images: .jpg, .jpeg, .png, .gif, .bmp, .webp, .svg - Audio: .mp3, .wav, .m4a, .flac, .aac, .ogg - Video: .mp4, .avi, .mov, .mkv, .webm, .flv Files that cannot be processed (please do not trigger this skill): - Documents: .pdf, .doc, .docx, .txt, .md, .rtf - Spreadsheets: .xlsx, .xls, .csv, .tsv - Presentations: .pptx, .ppt, .key - Code: .py, .js, .ts, .java, .cpp, .go, .rs - Archives: .zip, .tar, .gz, .rar, .7z - Executables: .exe, .bin, .app, .dmg - Databases: .db, .sqlite, .sql - Configuration files: .json, .xml, .yaml, .yml, .toml, .ini - Web pages: .html, .htm, .css Trigger conditions: When the user explicitly requests to analyze image/audio/video content, or when the file extension belongs to the aforementioned media types.

2026-07-061.2k

x-scraper

inclusionAI/AWorld

X (Twitter) 抓取 skill - 通过 agent-browser (CDP) 抓取指定用户推文或首页推荐流，支持关键词过滤、Tab 切换、多格式输出。使用场景：按用户/关键词抓取时间线、查看首页推荐流、生成 RSS/JSON/Markdown。

2026-05-181.2k

demo-skill

inclusionAI/AWorld

Legacy demo skill for plugin discovery tests.

2026-04-201.2k

ad-video-create

inclusionAI/AWorld

Create ad-ready product video from product images, with or without character/subject images. The workflow leverages AI-powered image composition, scene understanding, and video generation. Video prompts should follow commercial shot language—visual hooks, product presence, hero shots, detail showcase, function expression, and dynamic visuals.

2026-04-171.2k

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