Gerador de Imagens HTML

Render HTML/CSS into retina PNG images using a headless browser.

Updated Mar 22, 2026

Search Tags:#templates #png #onboarding #puppeteer #design-system #render #html-to-image

Ready to run

npx skills add https://github.com/bellaFG/html-image-generator --skill gerador-de-imagens-html

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Gerador de Imagens HTML
Source: https://github.com/bellaFG/html-image-generator/tree/main/skill
Command: npx skills add https://github.com/bellaFG/html-image-generator --skill gerador-de-imagens-html

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) components.

What problem does it solve?

Converts HTML/CSS templates and brand assets into high-quality raster images so teams can produce consistent, on-brand social media posts, banners, OG images and thumbnails without manual graphic design tooling.

Core Features & Use Cases

HTML to PNG rendering: Render self-contained HTML/CSS into retina PNGs for feed, story, banner, og-image and thumbnail formats.
Brand-aware generation: Uses project context (brand.json, company.md, .image-gen assets, templates and history) and a searchable design system to keep outputs on-brand and varied.
Onboarding & automation: Collaborative onboarding flow to capture identity, reusable templates, campaign support, and scripts to search design guidelines and persist design systems.

Quick Start

Generate a 1080x1080 feed image by rendering your HTML template with the provided render script and specifying the format and output file.

Frequently Asked Questions about Gerador de Imagens HTML

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render HTML and CSS templates into high-quality PNG images?▼

You can render HTML to PNG images by using the provided render script with Puppeteer to process self-contained HTML and CSS templates. This generates high-quality, retina 2x PNG outputs suitable for social media posts, banners, and thumbnails.

Can I use brand assets and design-system guidelines to generate on-brand images?▼

Yes, you can generate on-brand images by integrating local project assets like brand.json and .image-gen. The Skill searches your design system and uses project context to ensure varied outputs remain visually consistent with your brand guidelines.

What image formats and dimensions does the HTML to PNG rendering support?▼

The HTML to PNG rendering supports retina 2x outputs for various marketing formats including feed, story, banner, og-image, and thumbnail. You can generate specific dimensions like a 1080x1080 feed image by specifying the format in the render script.

Does HTML to image conversion require Puppeteer to function?▼

Yes, Puppeteer is a required dependency for HTML to image conversion. It provides the headless browser environment necessary to render self-contained HTML and CSS templates into high-quality raster PNG files at retina 2x resolution.

What is the best way to automate campaign banner generation from HTML templates?▼

The best way to automate campaign banner generation from HTML templates is by using the included scripts to search design guidelines and persist design systems. This allows you to programmatically render multiple on-brand PNGs without manual graphic design tooling.