skills.rest
silaratur
silaraturCOMMUNITY
Explore all skills by this author →
GitHub

image-creator

Render HTML and CSS content into high-resolution PNG images with a headless Playwright browser.

Updated Mar 31, 2026
Search Tags:#automation#design#html#rendering#playwright#screenshot
One-click install
npx skills add https://github.com/silaratur/VMO_GAB --skill image-creator-silaratur
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-creator
Source: https://github.com/silaratur/VMO_GAB/tree/main/skills/image-creator
Command: npx skills add https://github.com/silaratur/VMO_GAB --skill image-creator-silaratur

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve?

This skill solves the challenge of programmatically generating high-quality, pixel-perfect visual assets like social media posts and infographics directly from web-standard code.

Core Features & Use Cases

  • HTML-to-Image Rendering: Converts self-contained HTML/CSS templates into PNG screenshots using a headless browser.
  • Batch Processing: Supports sequential rendering for multi-slide carousels and consistent visual sets.
  • Use Case: Automatically generate a series of branded LinkedIn carousel slides by passing dynamic content into a pre-defined HTML template.

Quick Start

Use the image-creator skill to render the file slide-01.html into a 1200x627 PNG image.

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 high-resolution PNG images?▼

To render HTML and CSS into PNG images, this skill uses a headless Playwright browser to navigate self-contained templates and capture pixel-perfect screenshots, converting web-standard code directly into production-ready visual assets.

Can I automate screenshot generation for multi-slide social media carousels?▼

Yes, you can automate screenshot generation for multi-slide carousels using batch processing, which sequentially renders multiple HTML files into a consistent set of high-resolution PNG images for social media platforms.

Do I need a local HTTP server to capture screenshots with Playwright?▼

Yes, you need a local HTTP server to host your HTML templates so the headless Playwright browser can navigate to them and accurately capture pixel-perfect PNG screenshots.

How do I configure the viewport size for specific social media platform images?▼

You can configure precise viewport dimensions before rendering to match various social media platforms, ensuring the headless browser captures screenshots at the exact pixel dimensions required for your output.

What is the best way to programmatically generate infographics from web code?▼

The best way to programmatically generate infographics from web code is by passing dynamic content into pre-defined HTML and CSS templates, letting a headless browser handle the rendering into high-quality PNG files.

Does this approach work for generating branded LinkedIn carousel slides automatically?▼

Yes, this approach works for generating branded LinkedIn carousel slides by injecting dynamic content into a pre-defined HTML template and batch rendering the sequence into individual PNG images.

Related Skills

Explore More Design & Creative Skills→
bruno0henriquebruno0henrique

image-creator

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

Community
Advanced
NicolasPadovamNicolasPadovam

image-creator

Render self-contained HTML and CSS into PNG images with Playwright.

Community
Advanced
renatoasserenatoasse
2.0k

image-creator

Render self-contained HTML/CSS templates into PNG images via Playwright.

Community
Advanced
winsorllcwinsorllc

canvas-a2ui

Create and capture HTML5 Canvas diagrams and charts via Puppeteer.

Community
Advanced