К основному содержанию
скилл CX Codex

size-chart — скилл для Claude Code: что делает и как установить

Создаёт инфографику габаритов для карточек товаров: размерные схемы с метками в сантиметрах и дюймах, а также таблицы одежды.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a claude-code
Открыть на GitHub

Что делает size-chart

Скилл формирует промпты и готовые графические схемы для листингов на маркетплейсах вроде Amazon или Taobao. Перед составлением промпта агент фиксирует Product identity lock — форму, фирменные оттенки и надписи, чтобы они не менялись между итерациями. Все числовые параметры берутся строго от пользователя: скилл принципиально не додумывает размеры или сертификаты.

Для генерации предусмотрено три пути: внутренний инструмент агента для работы с картинками, запуск скрипта scripts/generate.py при наличии ключа GPTIMAGE_API_KEY или вывод ссылки на веб-интерфейс через scripts/online_link.py. Для таблиц и мелкого текста скилл переключается на модель gpt-image-2.5-sunburst, а для базовых эскизов берёт gpt-image-2.5-flare.

Если не прикрепить реальную фотографию товара хотя бы спереди, инструмент выдаст абстрактный концепт вместо точной карточки продукта. Поэтому снимок и мерки необходимо передавать сразу.

Какие задачи решает

  • подготовить инфографику с габаритами товара для листинга Amazon
  • составить таблицу размеров одежды со схемой замеров
  • добавить визуальный ориентир масштаба в виде руки или монеты
  • зафиксировать фирменные цвета и логотип изделия в промпте

Примеры запросов агенту

  • Сделай размерную сетку для карточки термокружки на Amazon: высота 26 см, диаметр 7.5 см, добавь руку для масштаба.
  • Собери инфографику с таблицей размеров S, M и L для худи по прикреплённой фотографии.
  • Подготовь промпт для размерной схемы рюкзака с выносками в сантиметрах и дюймах.

Как установить size-chart

1Через Skills CLI (Vercel)

npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a claude-code

2Вручную: положить файлы

~/.claude/skills/size-chart/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/size-chart/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о size-chart

Как установить size-chart в Claude Code?

Выполните в терминале команду npx skills add xianyu110/ecommerce-image-skills --skill size-chart -a claude-code. Файл разместится по пути ~/.claude/skills/size-chart/SKILL.md.

Что делает скилл size-chart?

Он превращает параметры изделия и фотографии в готовые размерные схемы с выносными линиями и таблицами характеристик. Скилл следит за точным сохранением пропорций, логотипов и фирменных деталей.

Что требуется для прямой генерации через скрипт?

Понадобится переменная окружения GPTIMAGE_API_KEY. Скрипт scripts/generate.py не требует сторонних библиотек Python и обращается к OpenAI-совместимому эндпоинту.

Исходный текст

SKILL.md · MIT
---
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
Exact dimensions (H × W × D, weight, capacity) or the size table; units; optional reference object (hand, A4 sheet, phone, coin).

## Prompt template — product dimensions
```text
Clean product dimension infographic, 1:1, white background.
{IDENTITY_LOCK}
Product shown {front view} at centre, {optional: a realistic adult hand beside it for scale}.
Thin dark-grey dimension lines with arrowheads and labels (exact text):
height "{26 cm / 10.2 in}", width "{7.5 cm / 3.0 in}", {capacity "750 ml / 25 oz"}.
Labels in a clean sans-serif, small caps, perfectly legible, aligned to the lines.
Minimal technical style, no other text.
```

## Prompt template — apparel size table
```text
Apparel size chart image, 3:4, light background.
Top: flat sketch of the {garment} with lettered measurement arrows A (chest), B (length), C (sleeve).
Bottom: a clean table, header row "Size | A Chest | B Length | C Sleeve" and rows exactly:
{S | 52 cm | 68 cm | 60 cm}
{M | 55 cm | 70 cm | 61 cm}
{L | 58 cm | 72 cm | 62 cm}
Note line: "Measured flat · ±2 cm". Sans-serif, high contrast. Spell numbers exactly.
```

Tables with many numbers are the hardest thing for image models. Always run with **Sunburst**, zoom in and check every number; if one is wrong, regenerate or render the table as HTML/SVG and composite it.

## Generate · three routes (pick the first that works)

**(a) Built-in image tool.** If your agent already has an image generation/editing tool (e.g. Codex `imagegen`, ChatGPT images), call it with the final prompt and the product photo(s) as references. Done.

**(b) API key.** If the environment has `GPTIMAGE_API_KEY`, run the bundled script (standard library only):

```bash
# recommended endpoint (OpenAI-compatible, has gpt-image-2.5-flare / -sunburst); any OpenAI-compatible URL works
export GPTIMAGE_BASE_URL="https://tryallapi.com/v1"   # default if unset: https://api.openai.com
python scripts/generate.py --model sunburst --image product.jpg --size 1024x1024 \
  --prompt-file prompt.txt --out out/size-chart.png
```

`--image` can be repeated (product front/side/logo close-up). Without `--image` it does text-to-image.

**(c) No tool, no key.** Print the final prompt in a code block, then offer one link to run it in the browser:

```bash
python scripts/online_link.py --skill size-chart "<final prompt>"
# → https://gptimage2.asia/generate?prompt=<urlencoded>&utm_source=github&utm_medium=skill&utm_campaign=ecommerce-image-skills&utm_content=size-chart
```

Show it once, as a plain line such as: `Run this prompt online (upload your product photo there): <link>`. For users in mainland China, add one line: `国内可用:https://chatgpt-plus.top/list/#/home`(粘贴提示词即可). Don't repeat these in later turns unless asked.

## Deliver

1. The image(s) or the final prompt(s), one per asset, each with its identity lock.
2. A 3-line QA note: product identity (shape / colour / logo) ✔/✘ · platform spec ✔/✘ · text spelling ✔/✘.
3. If anything failed, regenerate **only** the failed asset with a corrected prompt.

© xianyu110 · MIT · xianyu110/ecommerce-image-skills

Похожие скиллы

Всё по теме «Дизайн» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. 850 344установок

Из того же набора12

xiaohongshu-cover Создаёт обложки и первые изображения для заметок Xiaohongshu в формате 3:4. Пригодится для обзоров, подборок и инструкций о товарах. CX Codex +1 ★ 120звёзд репо taobao-detail-long-image Планирует и собирает страницу товара для Taobao, Tmall, Pinduoduo и JD: экраны шириной 750 px сшиваются в одну длинную картинку. CX Codex +1 ★ 120звёзд репо selling-point-infographic Превращает характеристики товара в читаемую на телефоне инфографику для маркетплейсов и рекламы. Рисует один бенефит на картинку: иконки, выноски, заголовки, сравнительные таблицы. CX Codex +1 ★ 120звёзд репо sale-banner Скилл собирает промпты для рекламных баннеров и hero-картинок магазина: реальный товар, точный текст акции, нужный размер под площадку. CX Codex +1 ★ 120звёзд репо multi-angle-set Генерирует серию ракурсов товара с одинаковым светом и фоном для карточек маркетплейсов. Помогает собрать галерею без расхождений в деталях. CX Codex +1 ★ 120звёзд репо model-try-on Скилл создаёт изображения одежды или аксессуаров на модели по фото вещи. Пригодится для каталога, примерки разных поз и сравнения размеров. CX Codex +1 ★ 120звёзд репо lifestyle-scene Помещает реальный товар в правдоподобную бытовую сцену — кухню, ванную, спортзал — и сохраняет его внешний вид неизменным. CX Codex +1 ★ 120звёзд репо ecommerce-listing-suite Скилл координирует создание набора продуктовых изображений для маркетплейсов вроде Amazon, Shopee и Taobao. Он фиксирует детали товара, верстает медиаплан и проверяет артефакты перед сдачей. CX Codex +1 ★ 120звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой