image-creator

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

2.0k|522|Updated Mar 1, 2026
One-click install
npx skills add https://github.com/renatoasse/opensquad --skill image-creator-renatoasse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-creator
Source: https://github.com/renatoasse/opensquad/tree/main/skills/image-creator
Command: npx skills add https://github.com/renatoasse/opensquad --skill image-creator-renatoasse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating consistent, high-quality visuals from HTML/CSS templates can be error-prone and time-consuming when creating social media graphics, banners, or slide decks. This Skill provides a self-contained rendering engine that outputs pixel-perfect images for multiple platforms.

Core Features & Use Cases

  • Self-contained HTML templates with inline CSS that render to PNG using a headless browser.
  • Viewport control and batch rendering for multi-image outputs (slides, carousels, banners).
  • Automated screenshot capture and export, suitable for social media campaigns and marketing assets.

Quick Start

Create a self-contained HTML file with inline CSS, serve it locally, then render a screenshot with Playwright.

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 an image using a headless browser?▼

To render HTML and CSS into an image, you need a self-contained HTML file with inline CSS served locally, which is then captured as a pixel-perfect PNG screenshot using Playwright's headless browser automation.

Can I generate multiple social media graphics from HTML templates in different viewports?▼

Yes, you can generate social media graphics from HTML templates across multiple viewports. The rendering engine supports viewport control and batch rendering for multi-image outputs like slides, carousels, and banners.

What's the best way to automate screenshot capture for marketing banners?▼

The best way to automate screenshot capture for banners is using a deterministic workflow with self-contained HTML/CSS templates and Playwright, which outputs production-ready images suitable for social media campaigns.

Do I need external CSS files to render pixel-perfect images with Playwright?▼

No, you do not need external CSS files. The rendering workflow requires self-contained HTML templates with inline CSS to ensure deterministic, pixel-perfect image output across multiple platforms.

Why does my HTML to image conversion result in misaligned visuals?▼

Misaligned HTML to image conversion often results from external dependencies or inconsistent viewport settings. Using self-contained HTML with inline CSS and strict viewport control ensures deterministic, pixel-perfect rendering.

Does image-creator work for generating slide deck visuals from HTML?▼

Yes, image-creator works for generating slide deck visuals by rendering self-contained HTML/CSS templates into pixel-perfect images via automated screenshot capture, suitable for multi-image batch outputs.