mcpField
E
etsy-listing-generator

etsy-listing-generator

github.com/mmcmediaマーケティング・グロース57 回インストール
リポジトリ

etsy-listing-generator について

etsy-listing-generatorは、PlaywrightでHTMLテンプレートからEtsyの商品画像を生成するスキルです。テキストや画像を指定し、単数または複数の商品画像を作成できます。

主な機能

  1. 01HTMLテンプレートから画像を生成
  2. 02単一画像のレンダリング
  3. 03JSONによる一括レンダリング
  4. 04タイトル・サブタイトル・バッジの設定
  5. 05HTTPとfile URLに対応

活用シーン

  1. 01Etsyの商品掲載画像の作成
  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 商品画像を生成します。

クイックスタート — 画像 1 枚

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いいえsubtitle から自動生成出力ファイル名

テンプレートのプレースホルダー

テンプレートは通常の 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 対応