image-creator

Render HTML/CSS templates into PNG images using Playwright.

Updated Mar 25, 2026

Search Tags:#automation #html #css #image #playwright #screenshot #render

Ready to run

npx skills add https://github.com/FredericoMatsuoka/porsche-search-glow --skill image-creator-fredericomatsuoka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: image-creator
Source: https://github.com/FredericoMatsuoka/porsche-search-glow/tree/main/skills/image-creator
Command: npx skills add https://github.com/FredericoMatsuoka/porsche-search-glow --skill image-creator-fredericomatsuoka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Render HTML/CSS into production-ready images by driving a headless browser to capture pixel-perfect screenshots from complete HTML templates.

Core Features & Use Cases

Headless rendering: Convert standalone HTML/CSS into production-ready images with no external dependencies.
Viewport control: Render at precise viewport sizes for social media, banners, and thumbnails.
Output fidelity: Generate pixel-perfect screenshots suitable for marketing assets, illustrations, and documentation.

Quick Start

Render a complete HTML/CSS file to a PNG image at a specified 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 a PNG image?▼

To render HTML and CSS into a PNG image, this Skill uses a headless browser to capture pixel-perfect screenshots of self-contained HTML templates at defined viewports. It outputs production-ready images for social graphics and marketing assets.

Can I control the viewport size when taking screenshots of HTML templates?▼

Yes, you can control the viewport size when taking screenshots of HTML templates. This Skill targets self-contained HTML files at precise viewport dimensions to generate pixel-perfect images suitable for banners and thumbnails.

Do I need external dependencies to convert HTML files into images?▼

No external dependencies are required to convert HTML files into images. The rendering workflow relies entirely on Playwright to drive a headless browser and output PNG screenshots from your standalone HTML and CSS templates.

What is the best way to automate generating marketing assets from HTML?▼

The best way to automate generating marketing assets from HTML is using a headless browser approach. This Skill drives Playwright to render complete HTML templates into pixel-perfect screenshots without manual intervention.

Does rendering HTML to images with Playwright support inline CSS templates?▼

Yes, rendering HTML to images with Playwright supports inline CSS templates. The workflow accepts self-contained HTML and CSS templates to produce production-ready PNG screenshots for documentation and illustrations.