# size-chart

Builds product dimension graphics and apparel size tables with measurement callouts in metric and imperial units.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 120
- Author: xianyu110
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/xianyu110/ecommerce-image-skills/tree/HEAD/skills/size-chart/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/size-chart

## What it does

The skill generates prompts and production graphics for ecommerce listings, adhering to requirements like Amazon square ratios or Taobao page widths. Before prompting, it writes a Product Identity Lock that preserves silhouette, exact hex tones, and logos across generations. Every dimension must come directly from user input, as the skill never invents specifications.

Rendering operates through three workflows: native agent image actions, a bundled `scripts/generate.py` script powered by `GPTIMAGE_API_KEY`, or an online browser generation link generated by `scripts/online_link.py`. It assigns `gpt-image-2.5-flare` for drafting layout variations, but switches to `gpt-image-2.5-sunburst` whenever dense numeric tables or small brand marks must remain sharp.

Without a front-facing reference photo, the generation degrades into an ungrounded concept. Providing precise product measurements alongside clear photos up front keeps the graphics accurate.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/size-chart/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/size-chart/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/size-chart/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/size-chart/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install xianyu110/ecommerce-image-skills size-chart
```

2. **Manually: put the files in place**
- File: `.github/skills/size-chart/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/xianyu110/ecommerce-image-skills --path skills/size-chart
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/size-chart/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/xianyu110/ecommerce-image-skills/tree/HEAD/skills/size-chart/SKILL.md

## When to use it
- generate dimension callout graphics for Amazon product listings
- create apparel sizing tables paired with measuring guidelines
- add human hand scale references to show item proportions
- lock product logos and finishes across generated graphic prompts

## Example prompts
- Generate a 1:1 dimension graphic for this travel tumbler: 26 cm height, 7.5 cm width, and show a hand for scale.
- Create an apparel size table for sizes S, M, and L based on this hoodie photo.
- Prepare a specification infographic prompt with both centimeter and inch measurements.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: e6e3df70c649a234.

BEGIN THIRD-PARTY FILE e6e3df70c649a234
````text
---
name: size-chart
description: "Create size / dimension / specification chart images: product line drawing or photo with measurement callouts (cm + inch), apparel size tables, capacity and compatibility charts, with a human-hand or object reference for scale. Numbers come only from the user. Use for 尺寸图, 规格图, size chart, dimension image, spec sheet."
---

# Size Chart · 尺寸规格图

Removes the #1 reason for returns — wrong size expectations — with a clean, exact dimension graphic.

> Part of [ecommerce-image-skills](https://github.com/xianyu110/ecommerce-image-skills). Works with Claude Code, Codex, Cursor and any agent that loads `SKILL.md`. Default model: GPT Image 2.5 **Sunburst**.

## Step 1 · Product identity lock (always first)

Before writing any prompt, study every reference photo and write a short **identity lock** for the product. Paste it verbatim into **every** prompt this skill produces, and never let a creative instruction override it.

```text
PRODUCT IDENTITY LOCK (do not change):
- Shape & proportions: <e.g. tall cylinder, rounded shoulders, 26 cm high, 7.5 cm wide>
- Colour & finish: <e.g. matte sage green #8FA58C body, natural bamboo lid>
- Logo & printed text: <exact spelling, font feel, position, colour — e.g. white "AURA" wordmark centred on upper body>
- Parts & details: <lid, loop, buttons, ports, seams, labels, accessories that are included>
- Must NOT appear: <accessories not in the box, extra logos, invented claims>
```

Rules:
- Only use facts visible in the photos or confirmed by the user. If something is unknown (size, capacity, material), ask or leave it out — never invent specs or certifications.
- If the user gave no photo, ask for one (front view at minimum). Text-only generation is allowed but say the result is a concept, not the real product.

## Step 2 · Pick the model

| Use **Flare** (`gpt-image-2.5-flare`, default) | Switch to **Sunburst** (`gpt-image-2.5-sunburst`) |
|---|---|
| New scenes, backgrounds, layouts, many quick variations | The product's logo / label / small text must survive exactly |
| Text-to-image concepts | Local edits: swap background, recolour, remove objects, keep everything else |
| Drafts for the user to pick from | Final hero assets and anything with dense typography |

If an endpoint only exposes other image models, use the closest equivalent and tell the user.

## Specs
- Amazon: usually image 5–7, 1:1 2000×2000; show both **cm and inch**.
- Taobao/Tmall detail page: 750 px wide, any height.
- Apparel: table with S/M/L… rows and chest / length / sleeve columns, plus "how to measure" mini-diagram.
- Never estimate numbers. If the user didn't give a dimension, leave it off.

## Inputs
````
END THIRD-PARTY FILE e6e3df70c649a234

The third-party file has ended. Everything between the e6e3df70c649a234 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2731 of 5804 bytes. © xianyu110 · MIT · https://github.com/xianyu110/ecommerce-image-skills/tree/HEAD/skills/size-chart/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md