image-creator

Render self-contained HTML/CSS files into PNG images using Playwright.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/NEXUZ-SYS/nxz-tutorial-agents --skill image-creator-nexuz-sys
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image-creator
Source: https://github.com/NEXUZ-SYS/nxz-tutorial-agents/tree/main/skills/image-creator
Command: npx skills add https://github.com/NEXUZ-SYS/nxz-tutorial-agents --skill image-creator-nexuz-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates turning HTML/CSS into production-ready images, enabling designers and developers to generate visuals from templates without manual screenshot workflows.

Core Features & Use Cases

  • Render self-contained HTML/CSS into PNG images using Playwright in a headless browser.
  • Control output via explicit viewport dimensions for posters, social thumbnails, or banners.
  • Batch render multiple HTML templates into a library of ready-to-publish visuals.

Quick Start

Create a self-contained HTML file with inline CSS and run the image-creator to render a PNG at the target viewport.

Frequently Asked Questions about image-creator

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

FAQPage Schema
How do I render HTML and CSS into PNG images automatically?

To render HTML and CSS into PNG images, you provide a self-contained HTML file with inline CSS to a Playwright headless browser runner, which outputs pixel-perfect PNG assets at your specified viewport dimensions.

What is the best way to automate generating social graphics from HTML templates?

Automating social graphics generation from HTML templates is done by running HTML files through a Playwright-based renderer, applying explicit viewport dimensions to produce ready-to-publish PNG visuals for marketing or product workflows.

Do I need inline CSS to render HTML to an image with Playwright?

Yes, you need a self-contained HTML file with inline CSS to render HTML to an image with Playwright, ensuring all styling is available locally within the document for accurate headless browser capture.

Can I batch render multiple HTML templates into a library of PNG visuals?

Yes, you can batch render multiple HTML templates into a library of PNG visuals by processing each self-contained HTML file through the Playwright runner, outputting a collection of ready-to-publish images.

How do I control the output size when rendering HTML to a PNG image?

You control the output size when rendering HTML to a PNG image by specifying explicit viewport dimensions in the Playwright runner, allowing precise sizing for posters, social thumbnails, or banners.

Does rendering HTML to PNG with Playwright support external stylesheets?

Rendering HTML to PNG with Playwright requires a self-contained HTML file, meaning external stylesheets are not supported and all CSS must be included inline within the document for successful image generation.