How do I install the Etsy Listing Generator skill?

Run npx skillmds@latest add mmcmedia/etsy-listing-generator in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Etsy Listing Generator safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Etsy Listing Generator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Etsy Listing Generator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Etsy Listing Generator?

mmcmedia (@mmcmedia) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Etsy Listing Generator by mmcmedia — Agent Skill

Name: Etsy Listing Generator
Rating: 4.5 (4 reviews)
Author: mmcmedia

Etsy Listing Generator

Generate Etsy listing images from HTML templates using Playwright. Supports single and batch rendering with customizable title, subtitle, badge text, and product images. Use when creating Etsy product listing images, mockups, or running batch generation for multiple products (e.g., puppet printables, digital downloads). Works with any HTML template that uses PRODUCT_IMAGE_URL, TITLE_TEXT, SUBTITLE_TEXT, BADGE_LEFT_TEXT placeholders.

mmcmedia Updated Sep 10, 2026

File contents

Etsy Listing Image Generator

Generate professional Etsy listing images from HTML templates via Playwright screenshot rendering.

Quick Start — Single Image

node scripts/render.mjs <template> <image-url> <title> <subtitle> <badge> <output>

Example:

node scripts/render.mjs \
  assets/puppet-listing.html \
  "http://localhost:3021/api/output/moses-characters.png" \
  "Bible Story Puppet Printables" \
  "Moses & The Exodus" \
  "12 ELEMENTS + 4 BACKGROUNDS" \
  output/moses-listing.png

Quick Start — Batch

Create a JSON file with an array of objects:

[
  { "file": "http://localhost:3021/api/output/moses-characters.png", "subtitle": "Moses & The Exodus" },
  { "file": "http://localhost:3021/api/output/david-characters.png", "subtitle": "David & Goliath" }
]

Run:

node scripts/render.mjs --batch assets/puppet-listing.html stories.json output/listings/

Batch JSON Fields

Field	Required	Default	Description
`file` / `image` / `url`	Yes	—	Product image URL (HTTP or file://)
`title`	No	"Bible Story Puppet Printables"	Large top text on banner
`subtitle` / `name`	No	—	Smaller bottom text on banner
`badge`	No	"12 ELEMENTS + 4 BACKGROUNDS"	Left badge text
`output`	No	Auto from subtitle	Output filename

Template Placeholders

Templates are plain HTML files. The renderer replaces these strings:

PRODUCT_IMAGE_URL → product/character image
TITLE_TEXT → large banner text
SUBTITLE_TEXT → smaller banner text
BADGE_LEFT_TEXT → left pill badge
INSTANT DOWNLOAD → right badge (hardcoded, edit HTML to change)

Template Design — Current Base (puppet-listing.html)

1400×2000px portrait format
White background, sage green (#4D6840) bottom banner
Gold pill badges (top-left: custom, top-right: INSTANT DOWNLOAD)
Poppins font throughout
Product image uses object-fit: cover; object-position: center center
Subtle TheSunDaisy watermark

Creating New Templates

Copy assets/puppet-listing.html and modify. Key CSS to adjust:

.canvas width/height — canvas dimensions
.banner height — green section size
.product-area top/bottom — image boundaries
.badge styling — pill badge appearance
.title / .subtitle — typography

Keep the placeholder strings (PRODUCT_IMAGE_URL, etc.) for the renderer to replace.

Serving Local Images

If product images are local files, either:

Serve via Image Forge backend: copy to /projects/image-forge/output/ → accessible at http://localhost:3021/api/output/filename.png
Use file:// URLs (must be absolute paths)
Start any local HTTP server in the image directory

Dependencies

Node.js
Playwright (npx playwright install chromium if not installed)

---name: etsy-listing-generatordescription: Generate Etsy listing images from HTML templates using Playwright. Supports single and batch rendering with customizable title, subtitle, badge text, and product images. Use when creating Etsy product listing images, mockups, or running batch generation for multiple products (e.g., puppet printables, digital downloads). Works with any HTML template that uses PRODUCT_IMAGE_URL, TITLE_TEXT, SUBTITLE_TEXT, BADGE_LEFT_TEXT placeholders.---# Etsy Listing Image GeneratorGenerate professional Etsy listing images from HTML templates via Playwright screenshot rendering.## Quick Start — Single Image```bashnode scripts/render.mjs <template> <image-url> <title> <subtitle> <badge> <output>```Example:```bashnode scripts/render.mjs \ assets/puppet-listing.html \ "http://localhost:3021/api/output/moses-characters.png" \ "Bible Story Puppet Printables" \ "Moses & The Exodus" \ "12 ELEMENTS + 4 BACKGROUNDS" \ output/moses-listing.png```## Quick Start — BatchCreate a JSON file with an array of objects:```json[ { "file": "http://localhost:3021/api/output/moses-characters.png", "subtitle": "Moses & The Exodus" }, { "file": "http://localhost:3021/api/output/david-characters.png", "subtitle": "David & Goliath" }]```Run:```bashnode scripts/render.mjs --batch assets/puppet-listing.html stories.json output/listings/```## Batch JSON Fields| Field | Required | Default | Description ||-------|----------|---------|-------------|| `file` / `image` / `url` | Yes | — | Product image URL (HTTP or file://) || `title` | No | "Bible Story Puppet Printables" | Large top text on banner || `subtitle` / `name` | No | — | Smaller bottom text on banner || `badge` | No | "12 ELEMENTS + 4 BACKGROUNDS" | Left badge text || `output` | No | Auto from subtitle | Output filename |## Template PlaceholdersTemplates are plain HTML files. The renderer replaces these strings:- `PRODUCT_IMAGE_URL` → product/character image- `TITLE_TEXT` → large banner text- `SUBTITLE_TEXT` → smaller banner text - `BADGE_LEFT_TEXT` → left pill badge- `INSTANT DOWNLOAD` → right badge (hardcoded, edit HTML to change)## Template Design — Current Base (puppet-listing.html)- **1400×2000px** portrait format- White background, sage green (#4D6840) bottom banner- Gold pill badges (top-left: custom, top-right: INSTANT DOWNLOAD)- Poppins font throughout- Product image uses `object-fit: cover; object-position: center center`- Subtle TheSunDaisy watermark## Creating New TemplatesCopy `assets/puppet-listing.html` and modify. Key CSS to adjust:- `.canvas` width/height — canvas dimensions- `.banner` height — green section size- `.product-area` top/bottom — image boundaries- `.badge` styling — pill badge appearance- `.title` / `.subtitle` — typographyKeep the placeholder strings (`PRODUCT_IMAGE_URL`, etc.) for the renderer to replace.## Serving Local ImagesIf product images are local files, either:1. Serve via Image Forge backend: copy to `/projects/image-forge/output/` → accessible at `http://localhost:3021/api/output/filename.png`2. Use `file://` URLs (must be absolute paths)3. Start any local HTTP server in the image directory## Dependencies- Node.js- Playwright (`npx playwright install chromium` if not installed)

Frequently asked questions