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…
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
Claude Code
$ npx -y skills add nexu-io/open-design --skill ecommerce-image-workflow --agent claude-code
Codex
$ npx skills add nexu-io/open-design --skill ecommerce-image-workflow -a codex -y
Cursor
$ npx skills add nexu-io/open-design --skill ecommerce-image-workflow -a cursor -y
Gemini CLI
$ npx skills add nexu-io/open-design --skill ecommerce-image-workflow -a gemini-cli -y
GitHub Copilot
$ npx skills add nexu-io/open-design --skill ecommerce-image-workflow -a github-copilot -y
OpenCode
$ npx skills add nexu-io/open-design --skill ecommerce-image-workflow -a opencode -y
Windsurf
$ npx skills add nexu-io/open-design --skill ecommerce-image-workflow -a windsurf -y
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.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.
ecommerce-image-workflow/
|-- SKILL.md
|-- example.html
`-- references/
`-- checklist.mdBy 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:
aspect ratios, and fidelity notes.
files and summarizing the image roles.
Required:
Ask only for missing essentials:
framing.
Do not ask broad discovery questions. Keep the workflow moving.
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.
Inspect the reference image and write a short internal identity lock:
details.
Use these anchors in every generation prompt.
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.
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:
later designer-added labels.
structure is being generated, center the product. If label space is needed, offset the product only slightly and make the empty space feel intentional.
product.
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 aspecThe 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.
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad…
Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and…
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages,…
Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album…
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at…