uxgen

官方

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

GitHub
1

你可以用 Uxgen MCP 做什么？

  • 审计现有商店前台 — 对代码库运行 audit-commerce.mjs，标记诸如预勾选附加产品、虚构证明或缺少数量折扣等缺陷，并附上文件和行号引用。

  • 按产品决定销售机制 — 根据产品属性和决策表，询问页面上应包含四个组件（数量折扣、订单追加、免运费进度条、粘性加入购物车）中的哪些。

  • 正确排列页面区块 — 获取产品价格、证明和保证的正确顺序，该顺序根据产品是冲动型购买还是深思熟虑型购买而有所不同。

  • 生成合规的数量折扣 — 构建一组命名档位的单选按钮组（绝不使用步进器），并根据欧盟定价指令，从单价推导出正确的 compareAtCents。

  • 检查非法暗黑模式 — 验证页面避免预勾选附加产品、虚构锚定价格和捏造的社会证明，并引用其违反的具体欧盟指令。

文档

用于商店、产品页和落地页设计的 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. 它承载的是法律规则，而非品味

  • 绝不要默认勾选附加项。 2011/83/EU 指令第 22 条 要求对主合同义务之外的任何付款获得明确同意，并规定通过消费者必须主动取消的默认选项而推断出的付款可退款。 多个商业加购组件出厂默认就是勾选状态。
  • 绝不要编造划线价。 根据 98/6/EC 指令及其修订版 (EU) 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}
/>

如果你只读一条规则

数量阶梯是一组命名档位的单选组。绝不是一个数字输入框。

步进器问的是多少——买家要做算术，而且没有任何信息暗示两件比一件更好。一组命名套餐的单选组问的是选哪个，而且其中有一个明显是明智的选择。

这一个错误是生成式商店前端中最常见的问题。

这个仓库为什么存在

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

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 承载了我们遵循的构图规则，但一个正确的页面和一个惊艳的页面之间的差距主要在于摄影，而没有任何技能能提供这个。

相关阅读

姊妹技能

这个技能覆盖产品页。另外两个覆盖访问流程的其余部分：

  • claude-code-checkout-upsell — 购物车、结账页和支付后应该放哪种加购：订单加购、一键售后加购、一个交叉销售、免邮进度条。
  • claude-code-ecommerce-dark-patterns — 审计结果中在欧盟、英国和美国属于非法的模式，附有法律依据、文件和行号，以及诚实的替代方案。

由 uxgen 构建——这个 MCP 服务器将销售这门手艺完整地交给编码智能体：区块顺序、摄影、一套锁定的语法，以及一个能拒绝无法赚钱的页面的审计。这个技能是其中免费的部分。

MIT © 2026 uxgen