LH HTML to Image

Convert HTML+CSS into PNG images via Chrome headless for accurate text layouts like covers, posters, and info cards at zero API cost.

MIT-0 · Free to use, modify, and redistribute. No attribution required.

⭐ 0 · 220 · 0 current installs · 0 all-time installs

by@liuhedev

MIT-0

Security Scan

VirusTotal

Benign

View report →

OpenClaw

Benign

high confidence

ℹ

Purpose & Capability

The skill's name/description (HTML→PNG via Chrome headless) matches the runtime instructions. Minor mismatch: the skill metadata declares no required binaries, but the instructions clearly require a local Chrome/Chromium binary to be installed.

✓

Instruction Scope

SKILL.md stays on-topic: it tells the agent how to build HTML/CSS and run Chrome headless against a local file URL. It does not request unrelated files, credentials, or network exfiltration; it only references a local file path and an optional CHROME_PATH override.

✓

Install Mechanism

There is no install spec (instruction-only), so nothing is downloaded or written by the skill itself — this is the lowest-risk install model and matches the content.

ℹ

Credentials

The skill requests no credentials and no config paths. SKILL.md mentions an optional CHROME_PATH environment variable (not declared in the metadata) and suggests installing fonts on Linux; both are reasonable but the CHROME_PATH mention is a slight metadata omission.

✓

Persistence & Privilege

always is false and the skill does not request permanent presence or modify other skills/config. The default ability for the agent to invoke the skill autonomously is unchanged and is not concerning here given the skill's narrow scope.

Assessment

This skill is instruction-only and simply documents how to use your local Chrome/Chromium to capture screenshots of HTML. Before installing/use: (1) ensure Chrome/Chromium is installed on the machine where the agent will run (SKILL.md assumes it but the metadata didn't list it); (2) confirm the CHROME_PATH you want to use (the doc mentions it but doesn't declare it as required); (3) be careful what HTML files you pass—the command reads local file:/// paths, so avoid handing it sensitive files; (4) on headless servers you may need extra OS dependencies or sandbox flags and to install any required fonts (the doc mentions Noto CJK for CJK text); (5) because the skill is instruction-only, it won't install software itself — you (or the operator) must provide Chrome and any fonts. If you need the agent to run this autonomously, ensure the runtime environment has Chrome, correct file permissions, and that you trust the agent to access only intended files.

Like a lobster shell, security has layers — review code before you run it.

Current versionv1.0.1

Download zip

latestvk9737p07sv5rym8zjat32wbsgs829vdd

License

MIT-0

Free to use, modify, and redistribute. No attribution required.

Termshttps://spdx.org/licenses/MIT-0.html

SKILL.md

HTML to Image

Generate images from HTML+CSS using Chrome headless screenshots. Ideal for covers, posters, info cards, and any text-heavy visual content. Zero API cost, 100% accurate text rendering.

Use Cases

✅ Cover images (title + subtitle + tags)
✅ Info cards (data display, comparison charts)
✅ Text layout images (quote cards, highlight cards)
❌ Illustrations, photos (use an AI image generation tool)

Workflow

Step 1: Write HTML

Create an HTML file with inline CSS:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  body {
    width: 1080px;
    height: 1440px;   /* 3:4 portrait */
    margin: 0;
    overflow: hidden;
    font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  }
</style>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Step 2: Chrome Headless Screenshot

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new \
  --disable-gpu \
  --screenshot="output.png" \
  --window-size=1080,1440 \
  --hide-scrollbars \
  --force-device-scale-factor=2 \
  "file:///absolute/path/to/your.html"

# Linux (auto-detect chrome/chromium)
google-chrome --headless=new --disable-gpu \
  --screenshot="output.png" \
  --window-size=1080,1440 \
  --hide-scrollbars \
  "file:///absolute/path/to/your.html"

Chrome path can be overridden via CHROME_PATH environment variable.

Common Sizes

Purpose	Width×Height	Ratio
Portrait cover	1080×1440	3:4
Square cover	1080×1080	1:1
Widescreen cover	1920×1080	16:9
Social media banner	1280×720	16:9

Tips

Chrome GPU error logs can be safely ignored
Use --force-device-scale-factor=2 for retina/high-DPI output (doubles pixel dimensions)
Use --force-device-scale-factor=1 for exact pixel dimensions
CJK fonts: PingFang SC (macOS built-in), Noto Sans SC (Linux, install via apt install fonts-noto-cjk)
For complex layouts, test in a regular browser first, then screenshot

Files

1 total

Select a file

Select a file to preview.

Comments

Loading comments…