uxgen

Kỹ năng Claude Code cho thiết kế cửa hàng, trang sản phẩm và trang đích

Agent của bạn đã có thể xây dựng một trang sản phẩm đẹp. Nhưng nó không thể cho bạn biết liệu sản phẩm này có nên có danh sách bậc, gói combo, đơn hàng bổ sung hay không có cái nào trong số đó — vì vậy nó xây dựng một bộ chọn số lượng và một ảnh stock, và trang đó không thu được tiền.

Kỹ năng này chính là phần quyết định. Nó đọc sản phẩm của người bán và suy luận ra cơ chế bán hàng nào thuộc về trang và theo thứ tự nào, mỗi cơ chế kèm lý do, cộng với bốn thành phần tham chiếu và các quy định EU chi phối chúng.

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

Hoạt động với Claude Code, Codex, Cursor và bất kỳ agent nào đọc định dạng Agent Skills. Trong Claude Code, bạn cũng có thể cài đặt nó như một plugin:

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

MIT. Không có phụ thuộc nào ngoài React cho các thành phần. Không có gì gửi dữ liệu về nhà.

---

Kiểm tra cửa hàng trước khi bạn chạm vào nó

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

Không phụ thuộc, chỉ đọc, không ghi gì. Nó tìm ra các lỗi mà kỹ năng này tồn tại để ngăn chặn, mỗi lỗi kèm tệp, dòng và lý do:

• một bộ chọn số lượng stepper ở nơi các bậc có tên thuộc về
• một add-on có thể bắt đầu được chọn sẵn — được hoàn tiền theo luật EU
• một đánh giá, số lượt đánh giá, "12 người đang xem" hoặc "chỉ còn 3" bịa đặt
• một giá gạch ngang không được suy ra từ giá đơn vị
• một đếm ngược được khởi tạo từ Date.now(), vì vậy nó đặt lại khi làm mới
• văn bản giữ chỗ vẫn còn trong mã nguồn
• và cơ chế nào trong bốn cơ chế hoàn toàn vắng mặt trong codebase

--json cho đầu ra máy, --strict để làm hỏng một công việc CI.

---

Kỹ năng này thực sự làm gì

1. Nó quyết định, thay vì dán vào

Trung tâm của kỹ năng là một bảng quyết định. Bảy câu hỏi về sản phẩm — một mặt hàng hay một danh mục, mua theo cảm hứng hay cân nhắc, vật lý hay kỹ thuật số, tiêu dùng hay bền lâu, biến thể, hạn sử dụng, mức giá — và từ các câu trả lời, cơ chế nào thuộc về đây và cơ chế nào không.

Mỗi quy tắc mang lý do, điều làm cho nó có thể sử dụng trên một sản phẩm mà bảng chưa từng thấy:

Nếu	Thì	Vì
bền lâu	không có bậc số lượng	không ai cần hai cái đèn; các bậc đọc như một cửa hàng chưa hiểu sản phẩm của chính mình
hết hạn trong n tuần	giới hạn bậc cao nhất trong n	sáu thứ gì đó hỏng trong hai tuần tạo ra một khoản hoàn tiền và một đánh giá vĩnh viễn
mức giá cân nhắc	bằng chứng và bảo đảm trước giá	câu hỏi là có nên mua không, không phải bao nhiêu — giá trước làm giá trở thành toàn bộ cuộc trò chuyện
kỹ thuật số	không bao giờ có thanh miễn phí vận chuyển	không có gì được giao; một thanh vận chuyển trên bản tải xuống là một lời nói dối với hoạt ảnh tiến trình
biến thể là cỡ cơ thể	không có bậc số lượng	một người mặc một cỡ
một sản phẩm	nhân đôi chỉ nếu nhân đôi là hợp lý, nếu không thì không có gì	một cửa hàng không có sản phẩm bổ sung trung thực mà bịa ra một cái sẽ đặt vào giỏ thứ mà người mua không muốn

Sau đó, nó sắp xếp các phần — và thứ tự khác nhau theo sản phẩm. Mua theo cảm hứng đặt giá trước bằng chứng; cân nhắc đặt bằng chứng trước giá. Cùng thành phần, trang ngược nhau, và lý do nằm trong bảng.

2. Nó mang các quy tắc là luật, không phải sở thích

• Không bao giờ chọn sẵn một add-on. Điều 22 của Chỉ thị 2011/83/EU yêu cầu sự đồng ý rõ ràng cho bất kỳ khoản thanh toán nào ngoài nghĩa vụ chính và làm cho một khoản thanh toán được suy ra từ mặc định mà người tiêu dùng phải từ chối được hoàn tiền. Một số widget upsell thương mại được giao với tùy chọn chọn sẵn làm mặc định nhà máy.
• Không bao giờ bịa giá gạch ngang. Theo Chỉ thị 98/6/EC được sửa đổi bởi Chỉ thị (EU) 2019/2161, mốc neo phải là giá thực sự được áp dụng: compareAtCents = unitPriceCents × units, và không có gì khác.
• Không bao giờ tạo bằng chứng. Một đánh giá, số lượt đánh giá, bộ đếm người xem hoặc đếm ngược mà không ai kiếm được là một hành vi thương mại không công bằng theo Chỉ thị 2005/29/EC ngay khi nó được phát hành. Kỹ năng xây dựng vị trí và để trống nó.

3. Nó cung cấp bốn thành phần để xây dựng dựa trên

React, không phụ thuộc, MIT. Mỗi thành phần mang các quy tắc của nó dưới dạng mã, với các rào cản ném lỗi trong phát triển thay vì phát hành một lỗi một cách âm thầm.

Thành phần	Nó hỏi người mua điều gì	Nó sống ở đâu
Bậc số lượng	gói nào, không phải bao nhiêu	trang sản phẩm
Thanh miễn phí vận chuyển	còn cách ngưỡng bao xa, tính bằng tiền	giỏ hàng
Đơn hàng bổ sung	một sản phẩm bổ sung, có hoặc không, không chọn sẵn	giỏ hàng, phía trên tổng số
Nút thêm vào giỏ dính	không có gì — nó chỉ luôn có thể truy cập	trang sản phẩm di động

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}
/>

---

Một quy tắc duy nhất, nếu bạn không đọc gì khác

Bậc số lượng là một nhóm radio gồm các bậc có tên. Không bao giờ là một ô nhập số.

Một stepper hỏi bao nhiêu — phép tính người mua thực hiện, không có gì về nó gợi ý rằng hai là một ý tưởng tốt hơn một. Một nhóm radio gồm các gói có tên hỏi cái nào, và một trong số chúng hiển nhiên là lựa chọn hợp lý.

Sai lầm duy nhất đó là sai lầm phổ biến nhất trong các cửa hàng được tạo ra.

---

Tại sao kho lưu trữ này tồn tại

Vào ngày 25 tháng 8 năm 2026, chúng tôi đã hỏi ChatGPT và Perplexity, cả hai với tìm kiếm web được bật, cho một thành phần React cho buy 2, save 15%.

ChatGPT trả về một bộ chọn số lượng và không trích dẫn nguồn nào cả. Perplexity cũng trả về một stepper, với min, max, step và một prop bundleSize, trích dẫn các mẫu chọn số lượng chung chung.

Cả hai đều sai theo cùng một cách, và lý do là phần hữu ích: không có nguồn chính thức nào để chúng tham khảo. Tìm kiếm tiered pricing component và kết quả là về bảng giá. Tìm kiếm order bump component và chúng là về plugin cửa hàng. Tìm kiếm bundle quantity selector component react và chúng là về kích thước gói JavaScript.

Các cơ chế thương mại không có đặc tả trên web mở, vì vậy một mô hình rơi vào thứ gần nhất mà nó đã đọc hàng nghìn lần.

Kho lưu trữ này là đặc tả đó.

---

Có gì trong hộp

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

---

Đây không phải là gì

Nó không phải là một thư viện thành phần, và cài đặt nó sẽ không lấp đầy trang của bạn với các khối. Nó dạy các quyết định và các quy tắc và cung cấp bốn triển khai để xây dựng dựa trên, vì phán đoán là phần chuyển giao được và một thành phần được dán là phần không chuyển giao được.

Nó không phải là một khung thử nghiệm A/B và nó không hứa hẹn một sự tăng trưởng. Dưới khoảng bốn mươi nghìn phiên mỗi biến thể, một thử nghiệm phân chia không thể tách hiệu ứng thực từ nhiễu, điều này đúng với hầu hết các cửa hàng. Những gì các cơ chế này mang lại cho bạn là việc loại bỏ một thiếu sót đã biết, điều này không cần một thử nghiệm để đáng làm.

Nó sẽ không, một mình, làm cho một trang đẹp. references/design-laws.md mang các quy tắc bố cục mà chúng tôi làm việc theo, nhưng khoảng cách giữa một trang đúng và một trang nổi bật chủ yếu là nhiếp ảnh, và không có kỹ năng nào cung cấp điều đó.

---

Đọc liên quan

• Bậc số lượng làm tăng giá trị đơn hàng trung bình
• Nơi đặt upsell trên trang sản phẩm
• shadcn ecommerce blocks: cái gì tồn tại và cái gì thiếu
• Ứng dụng Upsell cho Shopify, hoặc tự xây dựng

Anh em

Kỹ năng này bao phủ trang sản phẩm. Hai kỹ năng khác bao phủ phần còn lại của chuyến thăm:

• claude-code-checkout-upsell — upsell nào đi vào giỏ hàng, thanh toán và sau thanh toán: đơn hàng bổ sung, mua sau thanh toán một cú nhấp, một cross-sell, thanh miễn phí vận chuyển.
• claude-code-ecommerce-dark-patterns — kiểm tra kết quả cho các mẫu bất hợp pháp ở EU, Anh và Mỹ, với luật, một tệp và một dòng, và sự thay thế trung thực.

Được xây dựng bởi uxgen — máy chủ MCP trao cho một agent mã hóa toàn bộ nghề bán hàng: thứ tự phần, nhiếp ảnh, một ngữ pháp khóa, và một cuộc kiểm tra từ chối một trang không thể thu tiền. Kỹ năng này là phần miễn phí.

MIT © 2026 uxgen