html-to-image
HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。
Best use case
html-to-image is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。
Teams using html-to-image should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/html-to-image/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How html-to-image Compares
| Feature / Agent | html-to-image | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 截图为 PNG 3. 将截图传给 `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 ```
Related Skills
xhs-scraper
小红书搜索抓取 skill - 通过 agent-browser (CDP) 抓取小红书搜索结果，支持列表+详情、多格式输出。使用场景：按关键词抓取笔记列表与正文、生成 RSS/JSON/Markdown。
xhs-publisher
小红书发布 skill - 通过 agent-browser (CDP) 自动发布小红书图文笔记，支持多图上传、标题正文填写、一键发布。使用场景：自动化发布图文笔记到小红书创作中心。
read large webpage or knowledge
This skill is used for segmented reading and organization when facing large-scale knowledge bases or web pages. It captures original content segment by segment, summarizes key points in real-time, and continuously deposits them into the knowledge base, ensuring orderly information ingestion, clear structure, and traceability.
text2agent
Creates new agents from user requirements by generating Python implementation and mcp_config.
optimizer
Analyzes and automatically optimizes existing agents by improving system prompts and tool configuration.
media_comprehension
An intelligent assistant specialized in handling media files (images/audio/video). **Only for media file analysis**, does not handle document types.\n\n✅ Media files that can be processed:\n- Images: .jpg, .jpeg, .png, .gif, .bmp, .webp, .svg\n- Audio: .mp3, .wav, .m4a, .flac, .aac, .ogg\n- Video: .mp4, .avi, .mov, .mkv, .webm, .flv\n\n❌ Files that cannot be processed (please do not trigger this skill):\n- Documents: .pdf, .doc, .docx, .txt, .md, .rtf\n- Spreadsheets: .xlsx, .xls, .csv, .tsv\n- Presentations: .pptx, .ppt, .key\n- Code: .py, .js, .ts, .java, .cpp, .go, .rs\n- Archives: .zip, .tar, .gz, .rar, .7z\n- Executables: .exe, .bin, .app, .dmg\n- Databases: .db, .sqlite, .sql\n- Configuration files: .json, .xml, .yaml, .yml, .toml, .ini\n- Web pages: .html, .htm, .css\n\n**Trigger conditions**: When the user explicitly requests to analyze image/audio/video content, or when the file extension belongs to the aforementioned media types.".
app_evaluator
A professional skill for App Evaluation (evaluating app's performance with score) and App Improvement (giving professional suggestions for improving the app's performance).
agent-browser
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
OpenClaw
Complete guide for OpenClaw installation, Discord configuration, and sending messages, including common issues and solutions
x-scraper
X (Twitter) 抓取 skill - 通过 agent-browser (CDP) 抓取指定用户推文或首页推荐流，支持关键词过滤、Tab 切换、多格式输出。使用场景：按用户/关键词抓取时间线、查看首页推荐流、生成 RSS/JSON/Markdown。
fal-image-edit
AI-powered image editing with style transfer and object removal
alphashop-image
AlphaShop（遨虾）图像处理 API 工具集。支持11个接口：图片翻译、图片翻译PRO、 图片高清放大、图片主题抠图、图片元素识别、图片元素智能消除、图像裁剪、 虚拟试衣（创建+查询）、模特换肤（创建+查询）。 触发场景：图片翻译、翻译图片文字、放大图片、高清放大、抠图、去背景、 检测水印/Logo/文字、消除水印、去牛皮癣、裁剪图片、虚拟试衣、AI试衣、 模特换肤、换模特、AlphaShop图像、遨虾图片处理。