uxgen

Commerce Kit — четыре компонента, которые AI-агент реализует неправильно

Каноническая спецификация и эталонная реализация четырёх компонентов, повышающих средний чек: скидки за количество, индикатор порога бесплатной доставки, допродажа (order bump) и липкая кнопка «В корзину».

MIT. Никаких зависимостей, кроме React. Скопируйте файл или установите плагин — и позвольте вашему агенту сделать остальное.

---

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

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

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

Обе модели ошиблись одинаково, и причина — самая полезная часть этой истории: у них нет канонического источника, к которому можно обратиться. Поиск по tiered pricing component в Google выдаёт 237 миллионов результатов о таблицах цен. Поиск по order bump component — 25,9 миллиона результатов о плагинах WooCommerce. Поиск по bundle quantity selector component react — 15,3 миллиона результатов о размере JavaScript-бандлов.

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

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

---

Четыре компонента

Компонент	Что он спрашивает у покупателя	Где находится	На что влияет
Скидки за количество	какой пакет, а не сколько штук	страница товара	каждый заказ, до появления корзины
Индикатор бесплатной доставки	сколько осталось до порога	корзина	заказы уже выше ~60% порога
Допродажа (order bump)	один сопутствующий товар, да или нет	корзина, над итогами	момент подтверждения
Липкая кнопка «В корзину»	ничего — она просто остаётся доступной	мобильная страница товара	каждая мобильная сессия

Собирайте их в этом порядке. Первый действует раньше всех и на самую большую долю заказов.

---

1. Скидки за количество

Это группа радиокнопок. Это никогда не числовое поле ввода.

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

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: "Most chosen", preselected: true },
    { units: 6, name: "Six tins — the year",
      totalCents: 9000, compareAtCents: 11400 },
  ]}
  currency="USD"
  onChange={(tier) => setSelected(tier)}
/>

Правила

• Три варианта, максимум четыре. Один базовый, один желаемый, один верхний, который делает средний разумным. Пять превращают узнавание в сравнение.
• Нелинейные разрывы. 1 / 3 / 6, а не 1 / 2 / 3. Ровные шаги читаются как прайс-лист; неравномерные — как составленные предложения.
• Называйте варианты. Three tins — the usual reorder, а не Quantity: 3. Название делает то, что число не может.
• Показывайте экономию в валюте, а не только в процентах. Save $9.00 — это ответ; Save 15% — это пересчёт, который покупателю приходится делать самому.
• Показывайте цену за единицу под итогом. $48.00 · $16.00 each. Самая пропускаемая строка во всех реализациях, которые мы видели.
• Предвыбирайте средний вариант. Выбранное состояние читается как рекомендация. По умолчанию выбирая самый дешёвый, вы рекомендуете потратить меньше всего.
• Привяжите кнопку к выбору. Add 3 tins — $48.00.

Ограничения, которые являются законом в ЕС

• compareAtCents должна быть ценой, которую вы реально брали. Правила ЕС об указании цен регулируют объявления предыдущих цен. Зачёркнутая цифра, придуманная для увеличения скидки, — запрещённая практика. В этой реализации compareAtCents ниже totalCents вызывает ошибку в режиме разработки, а не отображает ложный якорь.
• Бейдж должен быть правдивым. Most chosen на варианте, который никто не выбирает, — ложное утверждение о вашем собственном магазине.

---

2. Индикатор порога бесплатной доставки

Показывайте оставшуюся сумму в деньгах. $6.00 to unlock free shipping. Индикатор выполнения без числа — это украшение, а процент — это второй пересчёт, который покупателю приходится делать самому.

<FreeShippingBar subtotalCents={4400} thresholdCents={5000} currency="USD" />

• Порог — это цифра, которую вы выбрали исходя из маржи, а не круглое число, которое вам понравилось.
• Когда порог достигнут, скажите об этом прямо и прекратите анимацию. Индикатор, который продолжает праздновать после достижения цели, — это шум.
• Не показывайте его при $0.00 в пустой корзине. Ниже примерно 40% порога он читается как дистанция, а не как подталкивание.

---

3. Допродажа (order bump)

Один названный товар, одна цена, одна причина, один непроставленный чекбокс. Над итогами, под содержимым корзины.

<OrderBump
  item={{ name: "Steel scoop", priceCents: 600, reason: "Measures one serving exactly." }}
  onToggle={(added) => setBump(added)}
/>

• Никогда не предотмечен. Статья 22 Директивы 2011/83/EU требует явного согласия на любой платёж сверх основного обязательства и делает подразумеваемое «да» возвратным. Несколько коммерческих виджетов допродаж поставляются с предотмеченным чекбоксом по умолчанию. В этой реализации проп checked не может начать со значения true.
• Никогда не блокируйте. Не прерывайте оформление заказа экраном, который нужно принять или отклонить. Покупатель уже решился; вы заменили его кнопку вопросом.
• Никогда не карусель. Один товар. Сетка из шести — это новое решение о просмотре в тот момент, когда вы хотели подтверждения.
• Цена значительно ниже корзины. Дополнение по схожей цене читается как вторая покупка и заново открывает всё решение.

---

4. Липкая кнопка «В корзину» (мобильная)

Кнопка исчезает с экрана в тот момент, когда покупатель читает описание. На вьюпорте 390px это большая часть сессии.

<StickyAddToCart label="Add 3 tins" totalCents={4800} currency="USD" onAdd={add} />

• Появляется только после того, как обычная кнопка ушла за пределы экрана, и никогда поверх неё.
• Несёт итог выбранного варианта, так что один взгляд заменяет прокрутку назад.
• Учитывает безопасную зону на iOS. env(safe-area-inset-bottom) есть в реализации.
• Скрыта выше 768px, где обычная кнопка всё ещё доступна.

---

Установка как плагин Claude Code

/plugin marketplace add kinerette/uxgen-commerce-kit
/plugin install commerce-kit@uxgen

Затем в агенте:

Use the commerce-kit skill. Add quantity breaks to this product page:
three tiers at 1 / 3 / 6, the middle one marked and preselected,
saving shown in currency, and bind the add-to-cart button to the selection.

Навык несёт правила выше, поэтому агент собирает группу радиокнопок вместо степпера и отказывается от двух паттернов, которые незаконны в ЕС.

---

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

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

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

---

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

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

Создано uxgen — MCP, который передаёт эти механики кодирующему агенту.

MIT © 2026 Angelo Palfi