skills.rest
bruno0henrique
bruno0henriqueCOMMUNITY
Explore all skills by this author →
GitHub

image-creator

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve?

This skill solves the challenge of programmatically generating high-quality, consistent visual assets like social media graphics and carousels directly from web-standard code.

Core Features & Use Cases

  • Headless Rendering: Uses Playwright to convert self-contained HTML/CSS into high-fidelity PNG screenshots.
  • Batch Processing: Efficiently handles multi-slide carousels and large-scale visual content generation.
  • Use Case: Automatically generate a series of branded Instagram 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 located in the output directory into a 1080 by 1080 pixel 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 convert HTML and CSS into PNG images programmatically?▼

To convert HTML and CSS into PNG images, this skill uses Playwright to render self-contained web code via a headless browser, producing high-fidelity screenshots for automated visual asset generation.

Can I automate batch processing for multiple carousel slides using HTML templates?▼

Yes, you can automate batch processing for multiple carousel slides by passing dynamic content into pre-defined HTML templates, which the skill efficiently renders into a series of production-ready PNG images.

Do I need Playwright and a local HTTP server to render HTML screenshots?▼

Yes, you need Playwright for browser automation and a local HTTP server to host the source HTML files during the rendering process to successfully generate pixel-perfect PNG screenshots.

What is the best way to generate automated social media graphics from web code?▼

The best way to generate automated social media graphics from web code is by rendering self-contained HTML and CSS templates into production-ready PNG images using a headless browser environment.

Why does HTML to image rendering require self-contained CSS and a local server?▼

HTML to image rendering requires self-contained CSS and a local server because the headless browser needs a hosted environment to accurately fetch and render the web code into pixel-perfect screenshots.

Related Skills

Explore More Design & Creative Skills→
NicolasPadovamNicolasPadovam

image-creator

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

Community
Advanced
hoanghd218hoanghd218
3

mkt-carousel-creator

Generate structured Instagram and TikTok carousel content with slide copy and visual prompts.

Community
Intermediate
silaratursilaratur

image-creator

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

Community
Intermediate
liumeixinliumeixin
4

html-screenshot-image-gen

Render HTML templates in a browser and capture screenshots as images.

Community
Advanced