ecommerce-image-workflow

Eコマース画像ワークフロー

実際の商品参考画像から、コンパクトなEコマース画像セットを作成します。 このV1スキルの範囲は意図的に限定されています。参考商品モードのみに対応します。ユーザーが商品を説明するだけで、商品写真を提供していない場合は、写真の提供を依頼して終了してください。このバージョンでは、概要だけに基づくコンセプト商品の作成は行いません。

リソースマップ

ecommerce-image-workflow/
|-- SKILL.md
|-- example.html
`-- references/
    `-- checklist.md

このスキルで作成するもの

デフォルトでは、1つの商品につき、Eコマース向けの画像アセットを3点作成します。

1. メイン画像 - 白または柔らかなニュートラルカラーの背景に、商品を主役として配置した、すっきりとしたパックショットです。
2. 特徴画像 - 小さくて読めない画像内テキストに頼らず、1つのセールスポイントを明確に示し、適切なコールアウト用スペースを設けた画像です。
3. ライフスタイル画像 - 商品を参考画像に忠実に保ちながら、もっともらしい使用シーンに配置した画像です。

また、以下も作成します。

• 参考入力、スロット、プロンプト、出力、アスペクト比、忠実性に関する注意事項を記載した image-manifest.json。
• 生成ファイルへのリンクと画像の役割の概要を掲載した、小さなプレビューギャラリー ecommerce-gallery.html。

入力条件

必須：

• 現在のプロジェクトに、少なくとも1枚の商品参考画像がアップロードされていること。

不足している必須情報のみを尋ねます。

• 商品名、または商品が明らかでない場合は短いラベル。
• 特徴画像から安全に推測できない場合は、主なセールスポイント。
• プラットフォーム固有の構図をユーザーが求めている場合に限り、対象マーケットプレイスまたはアスペクト比。

広範なヒアリング質問はしないでください。ワークフローを滞らせないようにしてください。

ワークフロー

ステップ0 - 参考商品モードを確認する

計画を立てる前に、現在のプロジェクトに実際の商品参考画像が含まれていることを確認します。

商品画像がない場合は、次のように返信します。

まず、商品参考画像を少なくとも1枚アップロードしてください。このV1ワークフローでは、参考写真に写っている実際の商品を維持します。概要だけに基づくコンセプト生成は、今後のバージョンで対応する予定です。

その後、終了します。

ステップ1 - 商品の識別要素を抽出する

参考画像を確認し、内部用の簡潔な識別情報をまとめます。

• 商品カテゴリーとフォームファクター。
• 形状とシルエット。
• 主な色と素材。
• ロゴ、ラベル、模様、留め具、ポート、ストラップ、ハンドル、その他の固定された特徴。
• スケールの手掛かりとプロポーション。
• 変更してはならないもの。

すべての生成プロンプトで、これらの識別要素を使用します。

ステップ2 - 3スロットのショットプランを作成する

生成を指示する前に、簡潔なショットプランを作成します。

スロット	デフォルトのアスペクト比	目的
main	1:1	白または柔らかなニュートラルカラーの背景に商品を主役として配置した、マーケットプレイス向け画像
feature	4:5	クローズアップのディテール、またはシンプルなコールアウト用スペースで、1つのセールスポイントを明確に示す
lifestyle	4:5	商品を視覚的に忠実に保ちながら、現実的な使用シーンを表現する

プロジェクトのメタデータに imageAspect があり、ユーザーがセット全体で単一のアスペクト比を期待している場合は、それを使用します。それ以外の場合は、上記のスロットごとのデフォルト値を使用します。

ステップ3 - 忠実性を固定したプロンプトを作成する

すべてのプロンプトの冒頭付近に、次の商品忠実性に関する指示を含める必要があります。

Preserve the exact product identity from the reference image: shape,
silhouette, color, material, logo/label placement, visible construction
details, and proportions. Do not redesign the product. Do not add, remove,
or relocate product features.

次に、スロット固有の指示を追加します。

メイン画像のプロンプト

• 商品を中央に配置し、全体が見えるようにします。
• 背景は白、オフホワイト、またはごく薄いグレーにします。
• 影をすっきりと見せる、柔らかなスタジオ照明を使用します。
• ユーザーから指定がない限り、小道具は使用しません。
• フレーム内に販促テキストを入れません。

特徴画像のプロンプト

• ユーザーが提示した、または安全に推測できる特徴を1つに絞ります。
• クローズアップ構図、断面風の切り抜き、または後からデザイナーがラベルを追加できる、すっきりとしたネガティブスペースを使用します。
• フレーム内で商品が視覚的にバランスよく見えるようにします。明示的なコールアウト構成を生成しない場合は、商品を中央に配置します。ラベル用スペースが必要な場合は、商品をわずかにずらす程度にし、空きスペースが意図的に設けられたように見せます。
• 認証、性能数値、素材、または効能を捏造しません。
• 小さく描画されたテキストは避け、代わりにラベル用スペースを設けます。

ライフスタイル画像のプロンプト

• 製品カテゴリに合った、現実的な環境を使用します。
• 製品を主役にします。
• 使い方の説明に役立ち、製品を隠さない場合に限り、人との関わりを描写します。
• 製品のサイズ感と構造を維持します。

ステップ 4 - メディア契約を通じて実行する

統一された OpenDesign メディアディスパッチャーを使用します。プロバイダー API やカスタムモデルコマンドを直接呼び出さないでください。

各スロットについて、標準の生成／待機ループを実行します。

# POSIX bash. Do not call provider APIs directly.
out=$("$OD_NODE_BIN" "$OD_BIN" media generate \
  --project "$OD_PROJECT_ID" \
  --surface image \
  --model "<imageModel from metadata>" \
  --aspect "<slot aspect or imageAspect from metadata>" \
  --image "<project-relative product reference image>" \
  --output "<product-slug>-<slot>.png" \
  --prompt "<full slot prompt>")
ec=$?
if [ "$ec" -ne 0 ]; then echo "$out" >&2; exit "$ec"; fi

last=$(printf '%s\n' "$out" | tail -1)
task_id=$(printf '%s\n' "$last" |
  python3 -c "import sys,json; d=json.load(sys.stdin); print(d.get('taskId',''))" 2>/dev/null)
since=$(printf '%s\n' "$last" |
  python3 -c "import sys,json; d=json.load(sys.stdin); print(d.get('nextSince',0))" 2>/dev/null)
since="${since:-0}"

while [ -n "$task_id" ]; do
  out=$("$OD_NODE_BIN" "$OD_BIN" media wait "$task_id" --since "$since")
  ec=$?
  last=$(printf '%s\n' "$out" | tail -1)
  since=$(printf '%s\n' "$last" |
    python3 -c "import sys,json; d=json.load(sys.stdin); print(d.get('nextSince',0))" 2>/dev/null)
  since="${since:-0}"
  if [ "$ec" -eq 0 ]; then
    task_id=""
  elif [ "$ec" -ne 2 ]; then
    echo "$out" >&2
    exit "$ec"
  fi
done

printf '%s\n' "$last"

最終行は {"file": {"name": "...", ...}} という JSON 形式にしてください。 返された最終ファイル名をそれぞれ image-manifest.json に記録します。

アクティブな画像モデルまたはプロバイダーが --image を使用できない場合は、処理を中止し、このワークフローには製品の忠実度を保つために参照画像を利用できる画像生成経路が必要であることをユーザーに伝えてください。

ステップ 5 - image-manifest.json を作成する

生成後、プロジェクトファイル image-manifest.json を作成します。

{
  "workflow": "ecommerce-image-workflow",
  "mode": "reference-product",
  "productName": "Example product",
  "referenceImages": ["reference-product.png"],
  "fidelityNotes": [
    "Preserve product identity, color, material, construction, and proportions.",
    "Do not treat these outputs as platform-compliance proof without human review."
  ],
  "slots": [
    {
      "id": "main",
      "role": "marketplace packshot",
      "aspect": "1:1",
      "output": "example-product-main.png",
      "promptSummary": "Centered product-first packshot on a clean neutral background."
    },
    {
      "id": "feature",
      "role": "single feature highlight",
      "aspect": "4:5",
      "output": "example-product-feature.png",
      "promptSummary": "Close-up or negative-space composition for one verified selling point."
    },
    {
      "id": "lifestyle",
      "role": "usage context",
      "aspect": "4:5",
      "output": "example-product-lifestyle.png",
      "promptSummary": "Realistic scene with the product as the focal point."
    }
  ]
}

マニフェストには事実を記載してください。不明な詳細は、主張を作り上げずに null または短い注記を記入します。

ステップ 6 - ecommerce-gallery.html を作成する

以下の内容を含む、シンプルな単一ファイルの HTML ギャラリーを作成します。

• 参照画像を最初に表示します。
• 生成した 3 つのスロットを、それぞれの役割名とともに表示します。
• 製品の忠実度に関する注記を記載します。
• image-manifest.json へのリンクを設定します。
• システムフォントとローカルのプロジェクトファイルのみを使用し、CDN のインポートは行いません。

ステップ 7 - 引き渡し

以下を返信します。

• 生成されたファイル名。
• 使用した忠実度ロックの概要を一文で説明します。
• マーケットプレイス固有のコンプライアンス、最終的なテキストのオーバーレイ、主張や法務に関するレビューは、引き続き人が確認する必要があることを注意喚起します。

<artifact> タグは出力しないでください。

厳守事項

• V1 では、実際の製品参照画像が必要です。概要のみからコンセプト製品を作成してはいけません。
• 1 回の実行につき製品は 1 つです。
• デフォルトでは、スロットを正確に 3 つにします。メイン、特徴、ライフスタイル。
• 製品を維持し、再設計しないでください。
• 主張、認証、測定値、成分、性能データを捏造しないでください。
• "$OD_NODE_BIN" "$OD_BIN" media generate を使用し、プロバイダー API を直接呼び出さないでください。
• 生成後は必ず image-manifest.json を作成します。
• 引き渡し前に references/checklist.md を実行します。