Skip to content

/ecommerce-image-workflow

Reference-product ecommerce image workflow for generating a compact set of product-faithful main, feature, and lifestyle images from real product reference photos. V1 requires uploaded product imagery and intentionally defers brief-only concept generation and platform-specific

From plugin
open-design
96k164 skills1 command1 MCP
Install
$ npx -y skills add nexu-io/open-design --skill ecommerce-image-workflow --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/ecommerce-image-workflow

Context preview

The summary Claude sees to decide when to auto-load this skill.

Reference-product ecommerce image workflow for generating a compact set of product-faithful main, feature, and lifestyle images from real product reference photos. V1 requires uploaded product imagery and intentionally defers brief-only concept generation and platform-specific

SKILL.md

ecommerce-image-workflow.SKILL.md
name: ecommerce-image-workflow
en_name: "Ecommerce Image Workflow"
description: |
  Reference-product ecommerce image workflow for generating a compact set
  of product-faithful main, feature, and lifestyle images from real product
  reference photos. V1 requires uploaded product imagery and intentionally
  defers brief-only concept generation and platform-specific batch exports.
triggers:
  - "ecommerce product images"
  - "product image set"
  - "product photography workflow"
  - "product main image"
  - "product feature shot"
  - "reference product commerce images"
  - "lifestyle product image"
  - "amazon product images"
  - "shopify product images"
  - "taobao product images"
od:
  mode: image
  surface: image
  category: image-generation
  scenario: marketing
  preview:
    type: html
    entry: example.html
  design_system:
    requires: false
  example_prompt: |
    Use the Ecommerce Image Workflow to turn my uploaded product reference
    photo into a compact ecommerce image set: one main packshot, one feature
    highlight image, and one lifestyle scene. Preserve the exact product
    identity, color, material, logo placement, structure, and proportions.

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.

Resource map

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.

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

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.

Step 1 - Extract product identity anchors

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

Create a compact shot plan before dispatch:

| Slot | Default aspect | Goal | |---|---:|---| | main | 1:1 | Product-first marketplace image on white or soft neutral background | | feature | 4:5 | One clear selling point with close-up detail or simple callout space | | lifestyle | 4:5 | Realistic 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.

Step 3 - Compose prompts with a fidelity lock

Every prompt must include this product fidelity instruction near the top:

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:

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

Use the unified OpenDesign media dispatcher. Do not call provider APIs or custom model commands directly.

For each slot, run the standard generate/wait loop:

# 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 aspec
Read more
Ships withopen-design

🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.

Get the whole plugin, auto-invoked

Other skills on open-design.