ecommerce-image-workflow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Ecommerce Image Workflow

电商图片工作流

Create a compact ecommerce image set from real product reference imagery. This V1 skill is intentionally narrow: it supports reference-product mode only. If the user only describes a product and does not provide a product photo, ask for one and stop. Do not create a brief-only concept product in this version.
从真实产品参考图像生成一套简洁的电商图片集。 本V1版本技能的适用范围经过刻意限定:仅支持基于产品参考图的模式。如果用户仅描述产品而未提供产品照片,请要求用户上传后停止操作。本版本不支持仅基于文字描述生成概念产品。

Resource map

资源目录

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

What this skill produces

本技能产出内容

By default, generate three ecommerce-ready image assets for one product:
  1. Main image - clean product-first packshot on white or soft neutral background.
  2. Feature image - one selling point shown clearly with controlled callout space, without relying on tiny unreadable in-image text.
  3. Lifestyle image - product shown in a plausible use context while keeping the product faithful to the reference.
Also create:
  • image-manifest.json
    describing reference inputs, slots, prompts, outputs, aspect ratios, and fidelity notes.
  • ecommerce-gallery.html
    as a small preview gallery linking the generated files and summarizing the image roles.
默认情况下,为单个产品生成三张符合电商需求的图像资产:
  1. 主图 - 以产品为核心的清晰包装图,背景为白色或柔和中性色。
  2. 功能图 - 清晰展示一个产品卖点,预留规整的标注空间,避免使用难以辨认的微小图像内文字。
  3. 场景图 - 在合理的使用场景中展示产品,同时保证产品与参考图的还原度。
此外还会生成:
  • image-manifest.json
    :记录参考输入、图像插槽、提示词、输出文件、宽高比以及还原度说明。
  • ecommerce-gallery.html
    :小型预览画廊,关联生成的文件并概述各图像的作用。

Input contract

输入约定

Required:
  • At least one uploaded product reference image in the active project.
Ask only for missing essentials:
  • Product name or short label if it is not obvious.
  • Main selling point if the feature image cannot be inferred safely.
  • Target marketplace or aspect only if the user asks for platform-specific framing.
Do not ask broad discovery questions. Keep the workflow moving.
必填项:
  • 当前项目中至少上传一张产品参考图像。
仅询问缺失的必要信息:
  • 若产品名称或简短标识不明确,需询问用户。
  • 若无法安全推断出产品卖点,需询问用户以确定功能图的内容。
  • 仅当用户要求特定平台的构图时,才询问目标平台或宽高比。
避免询问宽泛的探索性问题,确保工作流推进顺畅。

Workflow

工作流步骤

Step 0 - Confirm reference-product mode

步骤0 - 确认基于产品参考图的模式

Before planning, verify that the current project includes a real product reference image.
If no product image is available, reply:
Please upload at least one product reference image first. This V1 workflow preserves a real product from reference photos; brief-only concept generation is deferred to a later version.
Then stop.
在规划前,验证当前项目是否包含真实产品参考图像。
若没有可用的产品图像,请回复:
请先上传至少一张产品参考图像。本V1版本工作流基于参考照片还原真实产品;仅基于文字描述的概念产品生成将在后续版本中支持。
然后停止操作。

Step 1 - Extract product identity anchors

步骤1 - 提取产品特征锚点

Inspect the reference image and write a short internal identity lock:
  • Product category and form factor.
  • Shape and silhouette.
  • Primary colors and materials.
  • Logo, label, pattern, fasteners, ports, straps, handles, or other fixed details.
  • Scale cues and proportions.
  • What must not change.
Use these anchors in every generation prompt.
检查参考图像并编写简短的内部特征锁定说明:
  • 产品类别与形态。
  • 外形与轮廓。
  • 主色调与材质。
  • 标志、标签、图案、扣件、接口、背带、把手或其他固定细节。
  • 尺寸线索与比例。
  • 必须保留的不可修改内容。
在所有生成提示词中使用这些锚点。

Step 2 - Build a three-slot shot plan

步骤2 - 制定三插槽拍摄方案

Create a compact shot plan before dispatch:
SlotDefault aspectGoal
main1:1Product-first marketplace image on white or soft neutral background
feature4:5One clear selling point with close-up detail or simple callout space
lifestyle4:5Realistic use context with the product still visually faithful
If the project metadata provides
imageAspect
, use it when the user expects a single aspect across the set. Otherwise use the slot defaults above.
在执行前制定简洁的拍摄方案:
插槽默认宽高比目标
main1:1以产品为核心的电商平台主图,背景为白色或柔和中性色
feature4:5清晰展示一个卖点,可采用特写细节或简洁的标注空间
lifestyle4:5真实使用场景,同时保证产品视觉还原度
若项目元数据提供了
imageAspect
,且用户希望整套图像使用统一宽高比,则使用该值。否则使用上述插槽默认值。

Step 3 - Compose prompts with a fidelity lock

步骤3 - 编写带有还原度锁定的提示词

Every prompt must include this product fidelity instruction near the top:
text
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.
Then add slot-specific instructions:
每个提示词顶部必须包含以下产品还原度说明:
text
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.
然后添加插槽专属说明:

Main image prompt

主图提示词

  • Product centered and fully visible.
  • White, off-white, or very light grey background.
  • Soft studio lighting with clean shadow.
  • No props unless the user asked for them.
  • No in-frame marketing text.
  • 产品居中且完整展示。
  • 背景为白色、米白色或浅灰色。
  • 柔和的工作室灯光与清晰的阴影。
  • 除非用户要求,否则不添加道具。
  • 不包含画面内营销文字。

Feature image prompt

功能图提示词

  • Focus on one user-provided or safely inferred feature.
  • Use close-up composition, cutaway-style crop, or clean negative space for later designer-added labels.
  • Keep the product visually balanced in the frame. If no explicit callout structure is being generated, center the product. If label space is needed, offset the product only slightly and make the empty space feel intentional.
  • Do not invent certifications, performance numbers, materials, or claims.
  • Avoid tiny rendered text; leave label space instead.
  • 聚焦于用户提供或可安全推断的一个卖点。
  • 采用特写构图、局部裁剪或预留干净的空白区域,供设计师后续添加标签。
  • 保持产品在画面中的视觉平衡。若无需生成明确的标注结构,将产品居中;若需要预留标签空间,仅轻微偏移产品,确保空白区域看起来自然合理。
  • 不得虚构认证、性能数据、材质或宣传语。
  • 避免使用微小的渲染文字;预留标签空间即可。

Lifestyle image prompt

场景图提示词

  • Use a realistic environment matched to the product category.
  • Keep the product the focal point.
  • Show human interaction only if it helps explain use and does not obscure the product.
  • Preserve product scale and structure.
  • 使用与产品类别匹配的真实环境。
  • 保持产品为视觉焦点。
  • 仅当有助于说明产品使用方式且不会遮挡产品时,才展示人机交互。
  • 保留产品的尺寸与结构。

Step 4 - Dispatch through the media contract

步骤4 - 通过媒体约定执行生成

Use the unified Open Design media dispatcher. Do not call provider APIs or custom model commands directly.
For each slot, run the standard generate/wait loop:
bash
undefined
使用统一的Open Design媒体调度器。不得直接调用服务商API或自定义模型命令。
对每个插槽,运行标准的生成/等待循环:
bash
undefined

POSIX bash. Do not call provider APIs directly.

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"

The final line must be JSON with `{"file": {"name": "...", ...}}`.
Record each final returned filename in `image-manifest.json`.

If the active image model or provider cannot use `--image`, stop and tell the
user that this workflow needs a reference-capable image generation path for
product fidelity.
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`参数,请停止操作并告知用户:本工作流需要支持参考图的图像生成路径以保证产品还原度。

Step 5 - Write
image-manifest.json

步骤5 - 编写
image-manifest.json

After generation, create a project file named
image-manifest.json
:
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."
    }
  ]
}
Keep the manifest honest. If a detail is unknown, write
null
or a short note instead of inventing claims.
生成完成后,创建名为
image-manifest.json
的项目文件:
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
或简短说明。

Step 6 - Write
ecommerce-gallery.html

步骤6 - 编写
ecommerce-gallery.html

Create a simple single-file HTML gallery that:
  • Shows the reference image first.
  • Shows the three generated slots with their role names.
  • Lists product-fidelity notes.
  • Links to
    image-manifest.json
    .
  • Uses system fonts and local project files only; no CDN imports.
创建一个简单的单文件HTML画廊,需满足:
  • 首先展示参考图像。
  • 展示三个生成的插槽图像及其角色名称。
  • 列出产品还原度说明。
  • 关联
    image-manifest.json
  • 仅使用系统字体和本地项目文件;不引入CDN资源。

Step 7 - Hand off

步骤7 - 交付结果

Reply with:
  • The generated filenames.
  • A one-sentence summary of the fidelity lock used.
  • A reminder that marketplace-specific compliance, final text overlays, and claim/legal review remain human review steps.
Do not emit an
<artifact>
tag.
回复内容应包含:
  • 生成的文件名。
  • 一句话概述所使用的还原度锁定规则。
  • 提醒用户:平台合规性检查、最终文字叠加以及宣传语/法律审核仍需人工完成。
请勿使用
<artifact>
标签。

Hard rules

硬性规则

  • V1 requires real product reference imagery. No brief-only concept products.
  • One product per run.
  • Default to exactly three slots: main, feature, lifestyle.
  • Preserve the product; do not redesign it.
  • Do not invent claims, certifications, measurements, ingredients, or performance data.
  • Use
    "$OD_NODE_BIN" "$OD_BIN" media generate
    ; do not call provider APIs directly.
  • Always create
    image-manifest.json
    after generation.
  • Run
    references/checklist.md
    before handoff.
  • V1版本要求使用真实产品参考图像。不支持仅基于文字描述的概念产品。
  • 每次运行仅处理一个产品。
  • 默认生成三个插槽图像:主图、功能图、场景图。
  • 还原产品原貌;不得重新设计产品。
  • 不得虚构宣传语、认证、尺寸、成分或性能数据。
  • 使用
    "$OD_NODE_BIN" "$OD_BIN" media generate
    ;不得直接调用服务商API。
  • 生成完成后必须创建
    image-manifest.json
  • 交付前需运行
    references/checklist.md