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 printab...
Full skill instructions
Generate professional Etsy listing images from HTML templates via Playwright screenshot rendering.
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
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/
| 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 |
Templates are plain HTML files. The renderer replaces these strings:
PRODUCT_IMAGE_URL → product/character imageTITLE_TEXT → large banner textSUBTITLE_TEXT → smaller banner textBADGE_LEFT_TEXT → left pill badgeINSTANT DOWNLOAD → right badge (hardcoded, edit HTML to change)object-fit: cover; object-position: center centerCopy 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.
If product images are local files, either:
/projects/image-forge/output/ → accessible at http://localhost:3021/api/output/filename.pngfile:// URLs (must be absolute paths)npx playwright install chromium if not installed)
Perform comprehensive QA testing of web applications through browser automation. Navigate user flows, document bugs, check responsive design, capture screenshots, and report console errors. Use when testing websites, web apps (like PsalMix), or validating UI/UX before launch or after updates.
Generate Etsy product mockups automatically using the Tempest Photoshop script.
Comprehensive data analysis specialist covering basic metrics through advanced predictive analytics and marketing ROI. Your go-to expert for all data-driven decision making.
Competitor research and market analysis specialist who tracks what your competitors are doing and identifies opportunities they're missing.
Create and validate skills by measuring the gap between model output WITH and WITHOUT the skill.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimizati...
Browser automation via Playwright CLI. Open pages, interact with elements, take screenshots, and more. Ideal for coding agents and automated testing workflows.
AI skill for automated design audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.
Generate high-quality, print-ready digital art for Etsy listings using AI image generators. This skill provides prompt formulas, templates, and best practices for creating sellable wall art, printables, and digital products.
Generate high-quality images using Ideogram AI API, optimized for Etsy digital products.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Every creator agent gets a reviewer agent. No exceptions.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience