How do I install the HTML To Image skill?

Run npx skillmds@latest add inclusionai/html-to-image in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the HTML To Image skill do?

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

Is HTML To Image safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with HTML To Image?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is HTML To Image free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published HTML To Image?

inclusionai (@inclusionai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

HTML To Image by inclusionai — Agent Skill

Name: HTML To Image
Author: inclusionai

File contents

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

---name: html-to-imagedescription: 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`## 用法```bash./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` | 全页截图（忽略视口高度限制） | 否 | 默认开启 |### 示例```bash# 从 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```### 典型工作流1. Claude 根据内容生成精美 HTML（信息图、卡片等）2. 使用本 skill 截图为 PNG3. 将截图传给 `xhs-publisher` 发布到小红书```bash# 生成图片./html_to_image.sh -f card.html -o card.png# 发布到小红书./.claude/skills/xhs-publisher/publish_xhs.sh -t "标题" -c "正文" -i card.png```

Frequently asked questions

HTML To Image