본문으로 건너뛰기
cccskills
무료GitHub에 공개

ecommerce-image-workflow

Turn real product reference photos into three ecommerce images: a clean main shot, a feature highlight, and a lifestyle scene. The workflow prioritizes product consistency and also creates an image manifest and a preview gallery.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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.

설치 방법 보기

이럴 때 유용합니다

  • Creating a main product image from a reference photo
  • Showing one product feature in a dedicated image
  • Creating a realistic product usage scene
  • Reviewing generated images alongside the reference

포함된 파일(3)

  • SKILL.md9.5 KB
  • example.html11.7 KB
  • references/checklist.md3.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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:

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.

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 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.json after generation.
  • Run references/checklist.md before handoff.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

8-bit-orbit-video-template

무료요약 있음AI 평가 90점

복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.

  • 픽셀 스타일의 소개 영상을 만들 때
  • 세 장면 영상의 내용을 교체할 때
  • HTML에서 장면 전환을 확인할 때
nexu-io/open-design10.3만2026년 10월 20일 업데이트

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design10.3만2026년 10월 20일 업데이트

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design10.3만2026년 10월 20일 업데이트

agent-browser

무료요약 있음AI 평가 100점

브라우저에서 페이지를 살펴보고 클릭, 입력, 화면 캡처, 정보 추출을 수행합니다. OpenDesign의 로컬 미리보기를 중심으로 웹 앱의 동작과 품질을 확인합니다.

  • OpenDesign 미리보기를 확인합니다
  • 웹 앱의 클릭과 입력을 테스트합니다
  • 페이지나 요소의 화면을 캡처합니다
nexu-io/open-design10.3만2026년 10월 20일 업데이트

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design10.3만2026년 10월 20일 업데이트

algorithmic-art

무료요약 있음AI 평가 80점

p5.js에서 계산 규칙과 난수로 생성 예술을 만듭니다. 난수의 초깃값을 고정해 같은 그림을 재현하며, 포스터와 동적인 느낌의 정지 이미지, 구도 시안 제작에 활용합니다.

  • 규칙을 바탕으로 포스터를 제작합니다
  • 움직임이 느껴지는 정지 이미지를 만듭니다
  • 예술 작품의 구도를 시험합니다
nexu-io/open-design10.3만2026년 10월 20일 업데이트

nexu-io의 스킬 모두 보기

이 스킬의 문제 신고