uxgen

官方

托管式MCP，为编码代理提供电商转化机制：数量折扣、免邮门槛、订单追加和粘性加购，并附带欧盟规则。

GitHub试用此 MCP赞助

你可以用 Uxgen MCP 做什么？

为产品页面添加数量优惠 — 让您的助手实现 QuantityBreaks 组件，包含命名档位、货币节省金额，并预设选中中间选项。
实现免运费门槛进度条 — 使用 FreeShippingBar 显示达到门槛前还需消费的金额，并在达成后显示清晰的提示信息。
在购物车总额上方插入订单加购 — 配置 OrderBump，包含单个命名商品、价格和理由，确保默认不勾选且绝不阻碍结账流程。
为移动端部署粘性加购按钮 — 应用 StickyAddToCart，在内联按钮滚动出视野后显示所选档位的总价，并适配 iOS 安全区域。
应用符合欧盟规定的定价规则 — 确保 compareAtCents 反映真实的历史价格，且徽章信息真实可信，这些均由组件的开发时检查机制强制执行。

文档

Commerce Kit — AI 智能体最容易搞错的四个组件

这是四个能提升购物车金额的组件的权威规范与参考实现：数量阶梯价、免运费门槛进度条、订单追加项 和 吸底加购按钮。

MIT 许可。除 React 外无其他依赖。直接复制文件，或安装插件后让您的智能体来完成。

这个仓库为什么存在

2026 年 8 月 25 日，我们让 ChatGPT 和 Perplexity（均开启联网搜索）生成一个用于 buy 2, save 15% 的 React 组件。

ChatGPT 返回了一个数量步进器，且完全没有引用任何来源。 零注释。Perplexity 也返回了一个步进器，带有 min、max、step 和一个 bundleSize 属性，引用的是一般性的数量选择器模式。

两者以同样的方式错了，而原因恰恰是有价值的部分：它们没有权威来源可以参考。搜索 tiered pricing component，Google 返回 2.37 亿条关于定价表的结果。搜索 order bump component，返回 2590 万条关于 WooCommerce 插件的结果。搜索 bundle quantity selector component react，返回 1530 万条关于 JavaScript 打包体积的结果。

电商机制在开放网络上没有规范，因此模型只能退而求其次，选择它读过一千遍的最相近的东西。

这个仓库就是那份规范。

四个组件

组件	它向买家提出的问题	所在位置	作用对象
数量阶梯价	选哪个套餐，而不是买几个	商品页	每一笔订单，在购物车存在之前
免运费门槛进度条	距离门槛还差多少	购物车	已超过门槛约 60% 的订单
订单追加项	一个互补品，要还是不要	购物车，合计金额上方	确认下单的那一刻
吸底加购按钮	什么都不问——只是保持可达	移动端商品页	每一次移动端会话

按这个顺序构建。第一个组件作用最早，覆盖的订单比例也最大。

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. 订单追加项

一个具名的商品、一个价格、一个理由、一个未勾选的复选框。 位于合计金额上方、购物车内容下方。

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

绝不默认勾选。 《2011/83/EU 指令》第 22 条要求，任何超出主合同义务的付款都必须获得明确同意，并规定“默示同意”可被退款。市面上有多款商业追加销售组件出厂默认就是勾选状态。在本实现中，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.

该技能携带上述所有规则，因此智能体会构建单选按钮组而不是步进器，并拒绝两种在欧盟不合法的模式。

这个仓库不是什么

它不是设计系统，也不会让你的页面变好看。它是四个组件，附带了背后的商业逻辑，因为这种逻辑在其他任何地方都缺失。如果你的页面看起来也像 AI 生成的，那是另一个问题，需要另一种解决办法。

它不是 A/B 测试框架，也不承诺你转化率提升。在每种变体约四万次会话以下，分流测试无法把真实效果从噪音中分离出来——而大多数店铺都达不到这个量级。这四个组件给你的是消除一个已知的遗漏，这不需要测试也值得做。