Run any Skill in Manus with one click

Get Started

html-to-image

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

Run Skill in Manus

Overview

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

Install command

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

Copy and paste this command into Claude Code to install the skill

Source

inclusionAI/AWorld

Stars1,200

Forks123

UpdatedFebruary 26, 2026 at 06:51

File Explorer

2 files

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

More from this repository

same repository

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

ad-image-create

inclusionAI/AWorld

Create ad-ready product images (single or collage) by back-solving sub-image sizes from target output ratio, grounding scene design with media_comprehension, generating images via image_generator with strict request params and actor-count control, and pairing each deliverable with a short social tagline for 小红书/抖音.

2026-04-171.2k

tiktok-download

inclusionAI/AWorld

Single-file TikTok/Douyin video download and traffic metrics via TikHub API using only httpx; optional persisted raw API JSON plus a stdlib post-processor emitting CSV and simplified JSON. Supports one URL or concurrent batch (max 10 workers). No dependency on any project codebase.

2026-04-171.2k

tikhub-xiaohongshu-search

inclusionAI/AWorld

Lightweight TikHub Xiaohongshu image-search workflow. Prioritizes single-request usage with curl or minimal Python, saves raw API JSON by default, and includes a small stdlib post-processor for CSV and simplified JSON. Use when the user wants Xiaohongshu keyword image search, page-based pagination, or structured note/image metadata from TikHub without a heavy wrapper.

2026-04-171.2k

Source

inclusionAI

inclusionAI/AWorld

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

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