uxgen

ทักษะ Claude Code สำหรับการออกแบบร้านค้า หน้าสินค้า และหน้าแลนดิ้ง

เอเจนต์ของคุณสามารถสร้างหน้าสินค้าที่สวยงามได้อยู่แล้ว แต่ไม่สามารถบอกคุณได้ว่า สินค้า นี้ ควรมี tier list, bundle, order bump หรือไม่มีเลย — ดังนั้นมันจึงสร้าง stepper และภาพสต็อก และหน้านั้นก็ไม่สามารถสร้างรายได้

ทักษะนี้คือตัวตัดสินใจ มันอ่านสินค้าของร้านค้าและอนุมานว่ากลไกการขายใดควรอยู่บนหน้า และเรียงลำดับอย่างไร พร้อมเหตุผลของแต่ละกลไก รวมถึงคอมโพเนนต์อ้างอิงสี่ตัว และกฎของสหภาพยุโรปที่ควบคุมกลไกเหล่านั้น

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

ไม่มีการพึ่งพาใดๆ อ่านอย่างเดียว ไม่เขียนอะไรเลย มันค้นหาข้อบกพร่องที่ทักษะนี้ มีไว้เพื่อป้องกัน แต่ละรายการมีไฟล์ บรรทัด และเหตุผล:

• stepper จำนวน ที่ควรเป็น tier ที่มีชื่อ
• ส่วนเสริมที่สามารถเริ่มต้น ติ๊กไว้ล่วงหน้า — ซึ่งต้องคืนเงินตามกฎหมาย EU
• คะแนน จำนวนรีวิว "มีคนดู 12 คน" หรือ "เหลือเพียง 3 ชิ้น" ที่สร้างขึ้นเอง
• ราคาที่ขีดฆ่า ที่ไม่ได้มาจากราคาต่อหน่วย
• นับถอยหลัง ที่ตั้งจาก Date.now() ดังนั้นมันจึงรีเซ็ตเมื่อรีเฟรช
• ข้อความตัวอย่างที่ยังอยู่ในซอร์สโค้ด
• และกลไกสี่อย่างใดที่หายไปจากโค้ดเบสทั้งหมด

--json สำหรับเอาต์พุตของเครื่อง --strict เพื่อทำให้งาน CI ล้มเหลว

---

ทักษะนี้ทำอะไรจริงๆ

1. มันตัดสินใจ แทนที่จะวางโค้ด

หัวใจของทักษะนี้คือตารางการตัดสินใจ คำถามเจ็ดข้อเกี่ยวกับสินค้า — สินค้าเดียวหรือแคตตาล็อก ซื้อตามอารมณ์หรือคิดก่อนซื้อ สินค้าจับต้องได้หรือดิจิทัล สินค้าที่ใช้แล้วหมดไปหรือคงทน ตัวเลือกสินค้า วันหมดอายุ ช่วงราคา — และจากคำตอบ กลไกใดควรอยู่ที่นี่และกลไกใดไม่ควร

แต่ละกฎมีเหตุผล ซึ่งทำให้สามารถใช้ได้กับสินค้าที่ตารางไม่เคยเห็น:

ถ้า	แล้ว	เพราะ
สินค้าคงทน	ไม่มีตัวแบ่งจำนวน	ไม่มีใครต้องการโคมไฟสองอัน tier อ่านดูเหมือนร้านที่ไม่เข้าใจสินค้าของตัวเอง
หมดอายุใน n สัปดาห์	จำกัด tier สูงสุดภายใน n	หกชิ้นของสิ่งที่เน่าเสียในสองสัปดาห์ทำให้เกิดการคืนเงินและรีวิวถาวร
ช่วงราคาที่คิดก่อนซื้อ	หลักฐานและการรับประกัน ก่อน ราคา	คำถามคือ ควรซื้อเลยไหม ไม่ใช่ ซื้อกี่ชิ้น — ราคาก่อนทำให้ราคากลายเป็นบทสนทนาทั้งหมด
ดิจิทัล	ไม่มีแถบส่งฟรี	ไม่มีอะไรต้องจัดส่ง แถบส่งฟรีบนไฟล์ดาวน์โหลดคือการโกหกพร้อมแอนิเมชันความคืบหน้า
ตัวเลือกคือขนาดเสื้อผ้า	ไม่มีตัวแบ่งจำนวน	คนหนึ่งคนใส่ขนาดเดียว
สินค้าเดี่ยว	เพิ่มเป็นสองเท่าเฉพาะเมื่อการเพิ่มนั้นสมเหตุสมผล มิฉะนั้นไม่ต้องทำอะไร	ร้านที่ไม่มีสินค้าเสริมที่จริงใจแต่สร้างขึ้นมา จะใส่สิ่งที่ผู้ซื้อไม่ต้องการลงในตะกร้า

จากนั้นมันจัดลำดับส่วนต่างๆ — และลำดับนั้นแตกต่างกันตามสินค้า สินค้าซื้อตามอารมณ์ วางราคาก่อนหลักฐาน สินค้าที่คิดก่อนซื้อวางหลักฐานก่อนราคา คอมโพเนนต์เดียวกัน หน้าที่ตรงข้ามกัน และเหตุผลอยู่ในตาราง

2. มันนำกฎที่เป็นกฎหมาย ไม่ใช่รสนิยม

• ห้ามติ๊กส่วนเสริมล่วงหน้า มาตรา 22 ของ Directive 2011/83/EU กำหนดให้ต้องได้รับความยินยอมอย่างชัดแจ้งสำหรับการชำระเงินใดๆ ที่เกินกว่าภาระผูกพันหลัก และทำให้การชำระเงินที่อนุมานจากค่าเริ่มต้นที่ผู้บริโภคต้องปฏิเสธต้องคืนเงินได้ วิดเจ็ต upsell เชิงพาณิชย์หลายตัวมาพร้อมการติ๊กล่วงหน้าเป็นค่าเริ่มต้นจากโรงงาน
• ห้ามสร้างราคาที่ขีดฆ่าขึ้นเอง ภายใต้ Directive 98/6/EC ซึ่งแก้ไขเพิ่มเติมโดย Directive (EU) 2019/2161 ราคาอ้างอิงต้องเป็นราคาที่ใช้จริง: compareAtCents = unitPriceCents × units และไม่มีอย่างอื่น
• ห้ามสร้างหลักฐาน คะแนน จำนวนรีวิว ตัวนับผู้ชม หรือการนับถอยหลังที่ไม่มีใคร ได้รับจริง ถือเป็นการปฏิบัติทางการค้าที่ไม่เป็นธรรมภายใต้ Directive 2005/29/EC ทันทีที่เผยแพร่ ทักษะนี้สร้างช่องว่างและปล่อยให้ว่างเปล่า

3. มันมาพร้อมคอมโพเนนต์สี่ตัวสำหรับใช้สร้าง

React ไม่มีการพึ่งพา MIT แต่ละตัวนำกฎมาเป็นโค้ด พร้อมการ์ดป้องกันที่ จะแสดงข้อผิดพลาดในระหว่างการพัฒนาแทนที่จะส่งข้อบกพร่องออกไปอย่างเงียบๆ

คอมโพเนนต์	มันถามอะไรผู้ซื้อ	อยู่ที่ไหน
Quantity breaks	แพ็กเกจไหน ไม่ใช่กี่ชิ้น	หน้าสินค้า
แถบส่งฟรี	ห่างจากเกณฑ์เท่าไร ในรูปเงิน	ตะกร้า
Order bump	สินค้าเสริมหนึ่งรายการ ใช่หรือไม่ ไม่ติ๊กไว้	ตะกร้า เหนือยอดรวม
ปุ่มเพิ่มลงตะกร้าแบบติดแน่น	ไม่ถามอะไร — แค่ยังเข้าถึงได้	หน้าสินค้าบนมือถือ

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

---

กฎข้อเดียว ถ้าคุณไม่อ่านอย่างอื่น

Quantity breaks คือกลุ่มตัวเลือกแบบ radio ของ tier ที่มีชื่อ ห้ามเป็นช่องกรอกตัวเลข

Stepper ถามว่า กี่ชิ้น — การคำนวณที่ผู้ซื้อต้องทำ โดยไม่มีอะไรบ่งบอกว่า สองดีกว่าหนึ่ง กลุ่มตัวเลือกแบบ radio ของแพ็กเกจที่มีชื่อถามว่า อันไหน และหนึ่งในนั้นดูเหมือนตัวเลือกที่สมเหตุสมผลอย่างชัดเจน

ความผิดพลาดเดียวนี้เป็นสิ่งที่พบบ่อยที่สุดในร้านค้าที่สร้างโดยอัตโนมัติ

---

ทำไมรีโพสิทอรีนี้ถึงมีอยู่

เมื่อวันที่ 25 สิงหาคม 2026 เราถาม ChatGPT และ Perplexity ทั้งคู่เปิดการค้นหาเว็บ ให้สร้างคอมโพเนนต์ React สำหรับ buy 2, save 15%

ChatGPT ส่งคืน quantity stepper และไม่มีการอ้างอิงแหล่งที่มาเลย Perplexity ก็ส่งคืน stepper เช่นกัน พร้อม min, max, step และ prop ชื่อ bundleSize โดยอ้างรูปแบบตัวเลือกจำนวนทั่วไป

ทั้งคู่ผิดในแบบเดียวกัน และเหตุผลคือส่วนที่มีประโยชน์: ไม่มีแหล่งข้อมูลที่เป็น ทางการให้พวกเขาค้นหา ค้นหา tiered pricing component แล้ว ผลลัพธ์จะเกี่ยวกับตารางราคา ค้นหา order bump component แล้วมันจะเกี่ยวกับ ปลั๊กอินร้านค้า ค้นหา bundle quantity selector component react แล้วมันจะเกี่ยวกับ ขนาดของ JavaScript bundle

กลไกการค้าขายไม่มีสเปกบนเว็บเปิด ดังนั้นโมเดลจึงถอยกลับไปใช้ สิ่งที่ใกล้เคียงที่สุดที่มันเคยอ่านมาหลายพันครั้ง

รีโพสิทอรีนี้คือสเปกนั้น

---

มีอะไรในกล่อง

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 มีกฎการจัดองค์ประกอบที่เราทำงานด้วย แต่ช่องว่างระหว่างหน้าที่ถูกต้องกับ หน้าที่โดดเด่นส่วนใหญ่คือการถ่ายภาพ และไม่มีทักษะใดที่ให้สิ่งนั้นได้

---

การอ่านเพิ่มเติม

• Quantity breaks ที่เพิ่มมูลค่าการสั่งซื้อเฉลี่ย
• ตำแหน่งวาง upsell บนหน้าสินค้า
• บล็อก ecommerce ของ shadcn: มีอะไรและขาดอะไร
• แอป Upsell สำหรับ Shopify หรือสร้างเอง

ทักษะที่เกี่ยวข้อง

ทักษะนี้ครอบคลุมหน้าสินค้า อีกสองทักษะครอบคลุมส่วนที่เหลือของการเข้าชม:

• claude-code-checkout-upsell — upsell ใดที่ควรอยู่ในตะกร้า ชำระเงิน และหลังการชำระเงิน: order bump, การซื้อหลังชำระเงินด้วยคลิกเดียว, cross-sell หนึ่งรายการ, แถบส่งฟรี
• claude-code-ecommerce-dark-patterns — ตรวจสอบผลลัพธ์สำหรับรูปแบบที่ผิดกฎหมายใน EU, UK และ US พร้อมกฎหมาย ไฟล์และบรรทัด และทางเลือกที่ซื่อสัตย์

สร้างโดย uxgen — เซิร์ฟเวอร์ MCP ที่มอบ ทักษะการขายทั้งหมดให้เอเจนต์เขียนโค้ด: ลำดับส่วน การถ่ายภาพ ไวยากรณ์ที่ล็อก และการตรวจสอบที่ปฏิเสธหน้าที่ไม่สามารถรับเงินได้ ทักษะนี้คือส่วนที่ฟรี

MIT © 2026 uxgen