
Ecommerce Image Workflow
FreeGenerate product-focused images from reference photos.
Free · Opens the source repo
What Ecommerce Image Workflow does
The Ecommerce Image Workflow is designed to streamline the creation of essential product images for online retail. By utilizing real product reference imagery, this skill generates a compact set of three images: a main image for marketplace listings, a feature image highlighting a key selling point, and a lifestyle image that places the product in a realistic context. This workflow is particularly useful for e-commerce professionals looking to enhance their product presentations without the need for extensive design resources.
The skill operates in a reference-product mode, meaning it requires an uploaded product image to function. It extracts key identity anchors from the reference photo, such as product category, color, and materials, ensuring that the generated images remain true to the original product. This fidelity is crucial for maintaining brand integrity and meeting customer expectations in a competitive online marketplace.
The generated outputs include an image-manifest.json file that details the inputs, outputs, and fidelity notes, as well as an ecommerce-gallery.html file that provides a simple preview of the generated images alongside the reference image. This allows users to easily review the outputs and ensures that all necessary information is readily accessible for further use or compliance checks.
This skill is ideal for designers, marketers, and e-commerce managers who need to produce high-quality product images efficiently. It is particularly beneficial for those who have access to real product images and want to create a consistent and professional visual representation for their online stores.
When to use it
Use this skill when you have real product reference images and need to generate a set of e-commerce images quickly and accurately.
When not to use it
This skill is not suitable for creating concept images or for projects without a real product reference image, as it requires actual product photos to function.
What you can build with it
Creating Product Listings
Generate high-quality images for your e-commerce product listings quickly and efficiently.
Marketing Campaigns
Use the generated lifestyle images to enhance marketing materials and social media posts.
Product Catalog Updates
Easily update your online store's product catalog with consistent, professional images.
How to install Ecommerce Image Workflow
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/ecommerce-image-workflow --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioEcommerce 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:
- Main image - clean product-first packshot on white or soft neutral background.
- Feature image - one selling point shown clearly with controlled callout space, without relying on tiny unreadable in-image text.
- Lifestyle image - product shown in a plausible use context while keeping the product faithful to the reference.
Also create:
image-manifest.jsondescribing reference inputs, slots, prompts, outputs, aspect ratios, and fidelity notes.ecommerce-gallery.htmlas 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 Open Design 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 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.
Step 5 - Write image-manifest.json
After generation, create a project file named 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."
}
]
}
Keep the manifest honest. If a detail is unknown, write null or a short note
instead of inventing claims.
Step 6 - Write 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.
Step 7 - Hand off
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.
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.jsonafter generation. - Run
references/checklist.mdbefore handoff.
Frequently asked questions about Ecommerce Image Workflow
Similar skills
Legacy Circuit Mockups
Visualize and create retro circuit diagrams easily.
Brainstorming Ideas Into Designs
Transform ideas into structured designs through dialogue.
Aperture Oscillation
Surface design tensions by oscillating scope levels.
Product Design Critique
Get structured feedback on your UI designs.
Mobile App Image Generation
Create premium mobile app screen concepts effortlessly.
Open Design Default
Seamlessly route user prompts for design tasks.
