mcpField
E
etsy-listing-generator

etsy-listing-generator

github.com/mmcmedia营销与增长57 次安装
代码仓库

关于 etsy-listing-generator

etsy-listing-generator 使用 Playwright 将 HTML 模板渲染为 Etsy 商品图片，适合需要制作单张或批量商品图的卖家与创作者，可配置文本和图片输入。

主要功能

  1. 01从 HTML 模板渲染图片
  2. 02渲染单张图片
  3. 03通过 JSON 批量渲染
  4. 04配置标题、副标题和徽章
  5. 05支持 HTTP 和 file URL

适用场景

  1. 01制作 Etsy 商品展示图
  2. 02批量渲染多个商品图片
  3. 03用本地商品图片生成展示图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mmcmedia/openclaw-agents --skill etsy-listing-generator

安装后在 Claude Code 中输入/etsy-listing-generator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

package-lock.json
package.json
WORKFLOW.md
assets/
puppet-listing.html
puppet-preview.html
scripts/
render.mjs

详细介绍

Etsy 刊登图片生成器

通过 Playwright 截图渲染，从 HTML 模板生成专业的 Etsy 刊登图片。

快速开始 — 单张图片

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

示例：

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

快速开始 — 批量处理

创建一个包含对象数组的 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" }
]

运行：

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

批量 JSON 字段

字段必填默认值说明
file / image / url是—产品图片 URL（HTTP 或 file://）
title否"Bible Story Puppet Printables"横幅顶部的大字
subtitle / name否—横幅底部的小字
badge否"12 ELEMENTS + 4 BACKGROUNDS"左侧徽章文字
output否根据副标题自动生成输出文件名

模板占位符

模板是纯 HTML 文件。渲染器会替换以下字符串：

  • PRODUCT_IMAGE_URL → 产品／角色图片
  • TITLE_TEXT → 横幅大字
  • SUBTITLE_TEXT → 横幅小字
  • BADGE_LEFT_TEXT → 左侧胶囊徽章
  • INSTANT DOWNLOAD → 右侧徽章（硬编码，修改 HTML 即可更改）

模板设计 — 当前基础模板（puppet-listing.html）

  • 1400×2000px 纵向格式
  • 白色背景，底部为鼠尾草绿（#4D6840）横幅
  • 金色胶囊徽章（左上：自定义，右上：INSTANT DOWNLOAD）
  • 全文使用 Poppins 字体
  • 产品图片使用 object-fit: cover; object-position: center center
  • 淡淡的 TheSunDaisy 水印

创建新模板

复制 assets/puppet-listing.html 并进行修改。可调整的关键 CSS：

  • .canvas 宽度／高度 — 画布尺寸
  • .banner 高度 — 绿色区域尺寸
  • .product-area 顶部／底部 — 图片边界
  • .badge 样式 — 胶囊徽章外观
  • .title / .subtitle — 字体样式

保留占位符字符串（PRODUCT_IMAGE_URL 等），供渲染器替换。

提供本地图片

如果产品图片是本地文件，可使用以下任一方式：

  1. 通过 Image Forge 后端提供：复制到 /projects/image-forge/output/ → 可通过 http://localhost:3021/api/output/filename.png 访问
  2. 使用 file:// URL（必须是绝对路径）
  3. 在图片目录中启动任意本地 HTTP 服务

依赖项

  • Node.js
  • Playwright（如果尚未安装，请运行 npx playwright install chromium）

评论

支持 Markdown