uxgen

Навык Claude Code для дизайна магазина, страницы товара и лендинга

Ваш агент уже умеет создавать красивую страницу товара. Но он не может сказать вам, нужен ли этому товару прайс-лист, комплект, дополнительное предложение при оформлении заказа или ничего из этого — поэтому он создает степпер и стоковое фото, и страница не приносит денег.

Этот навык — про принятие решений. Он читает товар продавца и определяет, какие механики продаж должны быть на странице и в каком порядке, с обоснованием для каждой, а также четыре эталонных компонента и правила ЕС, которые их регулируют.

npx skills add kinerette/claude-code-store-design

Работает с Claude Code, Codex, Cursor и любым агентом, который читает формат Agent Skills. В Claude Code вы также можете установить его как плагин:

/plugin marketplace add kinerette/claude-code-store-design
/plugin install store-design@uxgen

MIT. Нет зависимостей, кроме React для компонентов. Ничего не отправляет данные наружу.

---

Проверьте магазин, прежде чем его трогать

node skills/store-design/scripts/audit-commerce.mjs ./src

Ноль зависимостей, только чтение, ничего не записывает. Он находит дефекты, для предотвращения которых и существует этот навык, каждый с файлом, строкой и причиной:

• степпер количества там, где нужны именованные уровни
• дополнение, которое может быть предустановлено — подлежит возврату по законодательству ЕС
• выдуманный рейтинг, количество отзывов, «12 человек смотрят» или «осталось только 3»
• зачеркнутая цена, не основанная на цене за единицу
• обратный отсчет, инициализированный из Date.now(), поэтому он сбрасывается при обновлении
• заглушечный текст, все еще находящийся в исходном коде
• и какие из четырех механик полностью отсутствуют в кодовой базе

--json для машинного вывода, --strict для провала CI-задачи.

---

Что на самом деле делает навык

1. Он решает, а не вставляет

Ядро навыка — таблица решений. Семь вопросов о товаре — один товар или каталог, импульсная или обдуманная покупка, физический или цифровой, расходуемый или долговечный, варианты, срок годности, ценовой диапазон — и из ответов следует, какие механики здесь уместны, а какие нет.

Каждое правило несет обоснование, что делает его применимым к товару, который таблица никогда не видела:

Если	То	Потому что
долговечный	нет разбивки по количеству	никому не нужны две лампы; уровни выглядят как магазин, который не понял свой собственный товар
истекает через n недель	ограничьте верхний уровень значением n	шесть штук того, что портится за два, приводят к возврату и постоянному негативному отзыву
обдуманный ценовой диапазон	доказательства и гарантия до цены	вопрос в том, стоит ли вообще, а не сколько — цена первой делает цену всем разговором
цифровой	никогда не используйте полосу бесплатной доставки	ничего не доставляется; полоса доставки на скачиваемом файле — это ложь с анимацией прогресса
варианты — это размеры тела	нет разбивки по количеству	один человек носит один размер
монопродукт	удваивайте только если удвоение логично, иначе ничего	магазин без честного дополнения, который его выдумывает, кладет в корзину то, что покупатель не хотел

Затем он упорядочивает секции — и порядок зависит от товара. Импульсная покупка ставит цену перед доказательствами; обдуманная ставит доказательства перед ценой. Те же компоненты, противоположные страницы, и причина в таблице.

2. Он несет правила, которые являются законом, а не вкусом

• Никогда не предустанавливайте дополнение. Статья 22 Директивы 2011/83/ЕС требует явного согласия на любой платеж сверх основного обязательства и делает платеж, выведенный из настройки по умолчанию, которую потребитель должен был отклонить, подлежащим возврату. Некоторые коммерческие виджеты допродаж поставляются с предустановленными опциями по умолчанию.
• Никогда не выдумывайте зачеркнутую цену. Согласно Директиве 98/6/EC с поправками, внесенными Директивой (ЕС) 2019/2161, якорная цена должна быть фактически примененной ценой: compareAtCents = unitPriceCents × units, и ничем иным.
• Никогда не генерируйте доказательства. Рейтинг, количество отзывов, счетчик просмотров или обратный отсчет, которые никто не заслужил, являются недобросовестной коммерческой практикой согласно Директиве 2005/29/EC с момента их публикации. Навык создает слот и оставляет его пустым.

3. Он поставляет четыре компонента для разработки

React, без зависимостей, MIT. Каждый несет свои правила в виде кода, с защитными механизмами, которые вызывают ошибку при разработке, а не тихо поставляют дефект.

Компонент	Что он спрашивает у покупателя	Где он находится
Разбивка по количеству	какой пакет, а не сколько	страница товара
Полоса бесплатной доставки	насколько далеко до порога, в деньгах	корзина
Дополнение при оформлении заказа	одно дополнение, да или нет, без отметки	корзина, над итогами
Липкая кнопка «в корзину»	ничего — она просто остается доступной	мобильная страница товара

import { QuantityBreaks } from "./src/quantity-breaks"

<QuantityBreaks
  tiers={[
    { units: 1, name: "One tin",   totalCents: 1900, compareAtCents: 1900 },
    { units: 3, name: "Three tins — the usual reorder",
      totalCents: 4800, compareAtCents: 5700, badge: "Best value", preselected: true },
    { units: 6, name: "Six tins — the year",
      totalCents: 9000, compareAtCents: 11400 },
  ]}
  currency="USD"
  onChange={setSelected}
/>

---

Единственное правило, если вы больше ничего не читаете

Разбивка по количеству — это радиогруппа именованных уровней. Никогда не числовой ввод.

Степпер спрашивает сколько — арифметика, которую выполняет покупатель, и ничто в нем не подсказывает, что два — лучшая идея, чем один. Радиогруппа именованных пакетов спрашивает какой, и один из них явно выглядит разумным выбором.

Эта единственная ошибка — самая распространенная в сгенерированных витринах.

---

Зачем существует этот репозиторий

25 августа 2026 года мы спросили ChatGPT и Perplexity, оба с включенным веб-поиском, о React-компоненте для buy 2, save 15%.

ChatGPT вернул степпер количества и не указал ни одного источника. Perplexity тоже вернул степпер, с min, max, step и пропом bundleSize, ссылаясь на общие шаблоны выбора количества.

Оба были неправы одинаково, и причина — самая полезная часть: нет канонического источника, к которому они могли бы обратиться. Поиск tiered pricing component дает результаты о таблицах цен. Поиск order bump component — о плагинах для магазинов. Поиск bundle quantity selector component react — о размере JavaScript-бандла.

У коммерческих механик нет спецификации в открытом вебе, поэтому модель обращается к ближайшему, что она читала тысячу раз.

Этот репозиторий — та самая спецификация.

---

Что в коробке

skills/store-design/
├── SKILL.md                        the trade, condensed
├── references/
│   ├── decision-table.md           ← the centre: which mechanics, which order, why
│   ├── design-laws.md              composition, colour, and the tells of a generated page
│   ├── quantity-breaks.md          tier maths, naming grammar, anti-patterns
│   ├── buy-box.md                  the order of the block that holds the decision
│   ├── proof.md                    reviews and credentials, and what to do with none
│   ├── email-capture.md            the address, without a modal at second zero
│   └── eu-rules.md                 the four constraints that are law
└── scripts/
    └── audit-commerce.mjs          find the defects in an existing store

src/                                four React reference implementations

---

Чем это не является

Это не библиотека компонентов, и ее установка не заполнит вашу страницу блоками. Она учит решениям и правилам и дает четыре реализации для разработки, потому что суждение — это то, что переносится, а вставленный компонент — это то, что не переносится.

Это не фреймворк для A/B-тестирования, и он не обещает вам рост. Ниже примерно сорока тысяч сессий на вариант сплит-тест не может отделить реальный эффект от шума, что характерно для большинства магазинов. Что эти механики дают вам — это устранение известного упущения, которое не требует теста, чтобы быть стоящим.

Сама по себе она не сделает страницу красивой. references/design-laws.md несет правила композиции, по которым мы работаем, но разрыв между правильной страницей и впечатляющей — это в основном фотография, и ни один навык этого не даст.

---

Дополнительное чтение

• Разбивка по количеству, повышающая средний чек
• Где разместить допродажу на странице товара
• shadcn ecommerce blocks: что существует и чего не хватает
• Upsell-приложения для Shopify или создайте свое

Родственные навыки

Этот навык охватывает страницу товара. Два других охватывают остальную часть визита:

• claude-code-checkout-upsell — какая допродажа идет в корзину, на оформление заказа и после оплаты: дополнение при оформлении, одноразовая покупка после оплаты, один кросс-сейл, полоса бесплатной доставки.
• claude-code-ecommerce-dark-patterns — проверяет результат на паттерны, которые незаконны в ЕС, Великобритании и США, с указанием закона, файла и строки, а также честной замены.

Создано uxgen — MCP-сервером, который передает кодирующему агенту все искусство продаж: порядок секций, фотографию, фиксированную грамматику и аудит, который отклоняет страницу, неспособную принимать деньги. Этот навык — та часть, которая бесплатна.

MIT © 2026 uxgen