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. 它承載的是法律規則，而非品味

  • 永遠不要預先勾選加購項目。 Directive 2011/83/EU 第 22 條 要求對主合約義務之外的任何付款取得明確同意，並使從消費者必須拒絕的預設值 推斷出的付款可退款。多個商業加購小工具在出廠預設值中就是預先勾選的。
  • 永遠不要捏造劃線價格。 根據 Directive 98/6/EC（經 Directive (EU) 2019/2161 修訂）， 錨定價格必須是實際適用的價格：compareAtCents = unitPriceCents × units，除此之外別無其他。
  • 永遠不要產生證明。 沒有實際依據的評分、評論數量、觀看者計數器或 倒數計時器，一旦上線，就是 Directive 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