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
107k170 skills1 command1 MCP

Claude Code

$ npx -y skills add nexu-io/open-design --skill ecommerce-image-workflow --agent claude-code

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
@nexu-io
Ships withopen-design

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.

Stars on GitHub

Momentum

stars in total
106.9k
Star history of nexu-io/open-design on GitHub, a chart by star-history.com

Other skills on open-design.

od-contribute
Auto-invoked

od-contribute

One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or…

@nexu-io@nexu-ioInstall Skill
ad-creative
Auto-invoked

ad-creative

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad…

@nexu-io@nexu-ioInstall Skill
agent-browser
Auto-invoked

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages,…

@nexu-io@nexu-ioInstall Skill
ai-music-album
Auto-invoked

ai-music-album

Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album…

@nexu-io@nexu-ioInstall Skill

More skills from other plugins.

impeccable

impeccable

Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…

@pbakaus@pbakausInstall Skill
animate

animate

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at…

skills4d56k
@emilkowalski@emilkowalskiInstall Skill

Questions about ecommerce-image-workflow.

Which coding agents can use ecommerce-image-workflow?
ecommerce-image-workflow installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.