skills.rest
inclusionAI
inclusionAIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

html-to-image

Render HTML files or content into PNG screenshots via a CDP-connected browser.

1.2k|126|Updated Mar 14, 2025
Search Tags:#image generation#HTML#screenshot#PNG#Browser Automation#infographic#CDP
One-click install
npx skills add https://github.com/inclusionAI/AWorld --skill html-to-image
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-to-image
Source: https://github.com/inclusionAI/AWorld/tree/main/examples/skill_agent/skills/html-to-image
Command: npx skills add https://github.com/inclusionAI/AWorld --skill html-to-image

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser.

What problem does it solve?

Converting HTML content into shareable images normally requires manual browser screenshots or complex rendering pipelines. This Skill automates the process by rendering HTML files or raw HTML strings through an agent-browser session and capturing full-page or viewport screenshots as PNG files.

Core Features & Use Cases

  • HTML to PNG Conversion: Render an HTML file or inline HTML string and capture it as a PNG image via Chrome DevTools Protocol.
  • Flexible Viewport Control: Configure viewport width and height, with full-page screenshot mode enabled by default.
  • Use Case: Generate a polished infographic as HTML, screenshot it at mobile width (750px), then publish the resulting image to social platforms like Xiaohongshu using a companion publishing skill.

Quick Start

Ask the agent to render the file card.html into a PNG image named card.png using the html-to-image skill.

Frequently Asked Questions about html-to-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert HTML to a PNG image from the command line?▼

Run the html_to_image.sh script with an output path and either an HTML file (-f) or inline HTML content (-c). The script renders the page through a CDP-connected browser and saves a full-page PNG screenshot.

How to take a full-page screenshot of an HTML file?▼

Full-page capture is the default behavior of the script, so no extra flag is needed. If you previously set a fixed viewport, omit the height parameter or pass --full to capture the entire rendered page height.

What is required to run HTML to image conversion with this script?▼

The script requires the agent-browser CLI already connected to a running browser via Chrome DevTools Protocol, plus bash and standard Unix utilities. The default CDP port is 9222 and can be changed with the -p flag.

Can I set a custom viewport width for mobile-sized screenshots?▼

Yes, pass the -w flag with a pixel width such as 750 for mobile layouts, and optionally -e for a fixed height. Without a height, the script captures the full page at the specified width.

Why does my HTML screenshot come out blank or incomplete?▼

Blank output usually means the browser session is not connected on the specified CDP port or the page resources have not finished loading. Verify agent-browser connectivity and that fonts and images load, since the script waits for network idle and font readiness before capturing.

Related Skills

Explore More Design & Creative Skills→
timzaaktimzaak
64

t-html-show

Convert Markdown documents into self-contained HTML previews.

Community
Intermediate
comeonzhjcomeonzhj
2.2k

xhs-note-creator

Generate Xiaohongshu note content, render themed image cards, and publish via Creator API.

Community
Advanced
JustinWangJPJustinWangJP
6

chrome-devtools

Automate browser debugging and web page manipulation via Chrome DevTools MCP.

Community
Intermediate
huydepzai121huydepzai121
3

cloudflare-browser-rendering

Automate headless browser tasks for screenshots, PDFs, and data extraction via REST endpoints.

Community
Advanced