uxgen

स्टोर, उत्पाद पृष्ठ और लैंडिंग पृष्ठ डिज़ाइन के लिए Claude Code कौशल

आपका एजेंट पहले से ही एक सुंदर उत्पाद पृष्ठ बना सकता है। यह आपको नहीं बता सकता कि इस उत्पाद में टियर सूची, बंडल, ऑर्डर बंप या इनमें से कोई भी नहीं होना चाहिए — इसलिए यह एक स्टेपर और एक स्टॉक फोटो बनाता है, और पृष्ठ कोई पैसा नहीं कमाता।

यह कौशल निर्णय लेने वाला है। यह व्यापारी के उत्पाद को पढ़ता है और अनुमान लगाता है कि पृष्ठ पर कौन सी बिक्री तंत्र शामिल होनी चाहिए और किस क्रम में, प्रत्येक के कारण सहित, साथ ही चार संदर्भ घटक और उन्हें नियंत्रित करने वाले EU नियम।

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

शून्य निर्भरता, केवल पढ़ता है, कुछ नहीं लिखता। यह उन दोषों को ढूंढता है जिन्हें रोकने के लिए यह कौशल मौजूद है, प्रत्येक के साथ एक फ़ाइल, एक पंक्ति और कारण:

• एक मात्रा स्टेपर जहां नामित टियर होने चाहिए
• एक ऐड-ऑन जो पूर्व-चयनित शुरू हो सकता है — EU कानून के तहत वापसी योग्य
• एक निर्मित रेटिंग, समीक्षा गणना, "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}
/>

---

एक नियम, यदि आप कुछ और नहीं पढ़ते हैं

मात्रा ब्रेक नामित टियर का एक रेडियो समूह है। कभी भी संख्या इनपुट नहीं।

एक स्टेपर कितने पूछता है — खरीदार द्वारा किया गया अंकगणित, जिसमें कुछ भी नहीं है यह सुझाव देता है कि दो एक से बेहतर विचार है। नामित पैकेजों का एक रेडियो समूह कौन सा पूछता है, और उनमें से एक स्पष्ट रूप से समझदार विकल्प है।

वह एक गलती उत्पन्न स्टोरफ्रंट में सबसे आम है।

---

यह रिपॉजिटरी क्यों मौजूद है

25 अगस्त 2026 को हमने 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 उन रचना नियमों को ले जाता है जिन पर हम काम करते हैं, लेकिन एक सही पृष्ठ और एक आकर्षक पृष्ठ के बीच का अंतर अधिकतर फोटोग्राफी है, और कोई कौशल वह शिप नहीं करता।

---

संबंधित पठन

• औसत ऑर्डर मूल्य बढ़ाने वाले मात्रा ब्रेक
• उत्पाद पृष्ठ पर अपसेल कहां रखें
• shadcn ईकॉमर्स ब्लॉक: क्या मौजूद है और क्या गायब है
• Shopify के लिए अपसेल ऐप्स, या इसे स्वयं बनाएं

सहोदर

यह कौशल उत्पाद पृष्ठ को कवर करता है। दो अन्य यात्रा के बाकी हिस्से को कवर करते हैं:

• claude-code-checkout-upsell — कौन सा अपसेल कार्ट, चेकआउट और भुगतान के बाद जाता है: ऑर्डर बंप, एक-क्लिक पोस्ट-खरीद, एक क्रॉस-सेल, मुफ्त शिपिंग बार।
• claude-code-ecommerce-dark-patterns — उन पैटर्न के लिए परिणाम का ऑडिट करता है जो EU, UK और US में अवैध हैं, कानून, एक फ़ाइल और एक पंक्ति, और ईमानदार प्रतिस्थापन के साथ।

uxgen द्वारा निर्मित — MCP सर्वर जो एक कोडिंग एजेंट को बिक्री का पूरा व्यापार देता है: अनुभाग क्रम, फोटोग्राफी, एक लॉक व्याकरण, और एक ऑडिट जो एक पृष्ठ को अस्वीकार करता है जो पैसा लेने में असमर्थ है। यह कौशल वह हिस्सा है जो मुफ्त है।

MIT © 2026 uxgen