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.