uxgen

Claude Code becerisi: mağaza, ürün sayfası ve açılış sayfası tasarımı

Ajanınız zaten güzel bir ürün sayfası oluşturabilir. Ancak size bu ürünün bir katman listesi, bir paket, bir sipariş artırıcı mı yoksa bunların hiçbiri mi olması gerektiğini söyleyemez — bu yüzden bir adım sayacı ve bir stok fotoğrafı oluşturur ve sayfa para kazandırmaz.

Bu beceri karar verme işidir. Satıcının ürününü okur ve hangi satış mekaniklerinin sayfada yer alması gerektiğini ve hangi sırayla olacağını, her birinin gerekçesiyle birlikte, ayrıca dört referans bileşeni ve bunları yöneten AB kurallarını çıkarır.

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

Claude Code, Codex, Cursor ve Agent Skills formatını okuyan her ajanla çalışır. Claude Code'da ayrıca bir eklenti olarak da kurabilirsiniz:

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

MIT. Bileşenler için React dışında bağımlılık yoktur. Hiçbir şey eve telefon açmaz.

---

Dokunmadan önce bir mağazayı denetleyin

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

Sıfır bağımlılık, yalnızca okur, hiçbir şey yazmaz. Bu becerinin var olma amacı olan kusurları, her biri bir dosya, bir satır ve gerekçe ile bulur:

• adlandırılmış katmanların olması gereken yerde bir miktar adım sayacı
• önceden işaretlenmiş başlayabilen bir eklenti — AB yasalarına göre iade edilebilir
• bir uydurma puan, yorum sayısı, "12 kişi bakıyor" veya "sadece 3 kaldı"
• birim fiyattan türetilmemiş bir üstü çizili fiyat
• Date.now()'ten beslenen bir geri sayım, yani yenilemede sıfırlanır
• kaynakta hâlâ duran yer tutucu metin
• ve dört mekanikten hangilerinin kod tabanında tamamen eksik olduğu

Makine çıktısı için --json, bir CI işini başarısız kılmak için --strict.

---

Beceri aslında ne yapar

1. Yapıştırmak yerine karar verir

Becerinin merkezi bir karar tablosudur. Ürünle ilgili yedi soru — tek ürün mü yoksa katalog mu, dürtüsel mi yoksa düşünülmüş mü, fiziksel mi dijital mi, sarf malzemesi mi dayanıklı mı, varyantlar, son kullanma tarihi, fiyat aralığı — ve cevaplardan, hangi mekaniklerin buraya ait olduğu ve hangilerinin olmadığı.

Her kural gerekçeyi taşır, bu da tablonun hiç görmediği bir üründe kullanılabilir olmasını sağlar:

Eğer	O zaman	Çünkü
dayanıklı	miktar kırılımı yok	kimsenin iki lambaya ihtiyacı yok; katmanlar, kendi ürününü anlamamış bir mağaza gibi okunur
n hafta içinde sona eriyor	üst katmanı n içinde sınırla	iki haftada bozulan bir şeyden altı tane, bir iade ve kalıcı bir yorum üretir
düşünülmüş fiyat aralığı	kanıt ve garanti fiyattan önce	soru hiç mi değil, kaç tane — fiyat önce gelirse fiyat tüm konuşma olur
dijital	asla ücretsiz kargo çubuğu yok	hiçbir şey gönderilmez; bir indirmede kargo çubuğu, ilerleme animasyonlu bir yalandır
varyantlar beden ölçüleri	miktar kırılımı yok	bir kişi bir beden giyer
tek ürün	yalnızca mantıklıysa ikiye katla, aksi halde hiçbir şey	dürüst bir tamamlayıcısı olmayan ve uyduran bir mağaza, alıcının istemediği bir şeyi sepete koyar

Sonra bölümleri sıralar — ve sıralama ürüne göre değişir. Dürtüsel, fiyatı kanıttan önce koyar; düşünülmüş, kanıtı fiyattan önce koyar. Aynı bileşenler, zıt sayfalar ve gerekçe tabloda.

2. Yasa olan kuralları taşır, zevk değil

• Bir eklentiyi asla önceden işaretlemeyin. 2011/83/EU Direktifi'nin 22. Maddesi, ana yükümlülüğün ötesinde herhangi bir ödeme için açık onay gerektirir ve tüketicinin reddetmek zorunda kaldığı bir varsayılandan çıkarılan bir ödemeyi iade edilebilir kılar. Birkaç ticari satış artırma aracı, fabrika varsayılanı olarak önceden işaretlenmiş olarak gelir.
• Üstü çizili fiyatı asla uydurmayın. (AB) 2019/2161 Direktifi ile değiştirilen 98/6/EC Direktifi uyarınca, çapa fiilen uygulanan bir fiyat olmalıdır: compareAtCents = unitPriceCents × units ve başka hiçbir şey.
• Asla kanıt üretmeyin. Kimsenin hak etmediği bir puan, yorum sayısı, izleyici sayacı veya geri sayım, yayınlandığı anda 2005/29/EC Direktifi uyarınca haksız bir ticari uygulamadır. Beceri yuvayı oluşturur ve boş bırakır.

3. Üzerine inşa edilecek dört bileşen gönderir

React, bağımlılık yok, MIT. Her biri kurallarını kod olarak taşır ve bir kusuru sessizce göndermek yerine geliştirme sırasında fırlatan korumalarla birlikte gelir.

Bileşen	Alıcıya ne sorar	Nerede yaşar
Miktar kırılımları	kaç tane değil, hangi paket	ürün sayfası
Ücretsiz kargo çubuğu	eşiğe ne kadar uzak, para olarak	sepet
Sipariş artırıcı	bir tamamlayıcı, evet veya hayır, işaretlenmemiş	sepet, toplamların üstünde
Yapışkan sepete ekle	hiçbir şey — sadece erişilebilir kalır	mobil ürün sayfası

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

---

Başka hiçbir şey okumazsanız tek kural

Miktar kırılımları, adlandırılmış katmanlardan oluşan bir radyo grubudur. Asla bir sayı girişi değil.

Bir adım sayacı kaç tane diye sorar — alıcının yaptığı bir aritmetik, iki tane olmasının birden daha iyi bir fikir olduğunu öneren hiçbir şey yoktur. Adlandırılmış paketlerden oluşan bir radyo grubu hangisi diye sorar ve bunlardan biri görünür şekilde mantıklı seçimdir.

Bu tek hata, üretilen mağaza vitrinlerinde en yaygın olanıdır.

---

Bu depo neden var

26 Ağustos 2026'da ChatGPT ve Perplexity'ye, ikisine de web araması etkinken, buy 2, save 15% için bir React bileşeni sorduk.

ChatGPT bir miktar adım sayacı döndürdü ve hiçbir kaynak göstermedi. Perplexity de bir adım sayacı döndürdü, min, max, step ve bir bundleSize prop'u ile, genel miktar seçici kalıplarını kaynak göstererek.

İkisi de aynı şekilde yanlıştı ve yararlı kısım gerekçe: başvuracakları kanonik bir kaynak yok. tiered pricing component arayın ve sonuçlar fiyatlandırma tablolarıyla ilgili. order bump component arayın ve mağaza eklentileriyle ilgili. bundle quantity selector component react arayın ve JavaScript paket boyutuyla ilgili.

Ticaret mekaniklerinin açık web'de bir şartnamesi yok, bu yüzden bir model bin kez okuduğu en yakın şeye geri düşer.

Bu depo o şartnamedir.

---

Kutuda ne var

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

---

Bu ne değildir

Bir bileşen kitaplığı değildir ve kurmak sayfanızı bloklarla doldurmaz. Kararları ve kuralları öğretir ve üzerine inşa edilecek dört uygulama verir, çünkü aktarılan kısım muhakemedir ve yapıştırılan bir bileşen aktarılmayan kısımdır.

Bir A/B test çerçevesi değildir ve size bir artış vaat etmez. Varyant başına kabaca kırk bin oturumun altında, bir bölünmüş test gerçek bir etkiyi gürültüden ayıramaz, ki bu çoğu mağazadır. Bu mekaniklerin size verdiği şey, bilinen bir eksikliğin giderilmesidir ve bunun yapılmaya değer olduğunu kanıtlamak için bir teste ihtiyaç yoktur.

Tek başına bir sayfayı güzel yapmaz. references/design-laws.md üzerinde çalıştığımız kompozisyon kurallarını taşır, ancak doğru bir sayfa ile çarpıcı bir sayfa arasındaki fark çoğunlukla fotoğrafçılıktır ve hiçbir beceri bunu gönderemez.

---

İlgili okumalar

• Ortalama sipariş değerini artıran miktar kırılımları
• Bir ürün sayfasında satış artırıcı nereye yerleştirilir
• shadcn e-ticaret blokları: ne var ve ne eksik
• Shopify için satış artırma uygulamaları veya kendiniz oluşturun

Kardeşler

Bu beceri ürün sayfasını kapsar. Diğer ikisi ziyaretin geri kalanını kapsar:

• claude-code-checkout-upsell — sepete, ödeme sayfasına ve ödemeden sonra hangi satış artırıcı girer: sipariş artırıcı, tek tıklamayla satın alma sonrası, tek çapraz satış, ücretsiz kargo çubuğu.
• claude-code-ecommerce-dark-patterns — sonucu AB, Birleşik Krallık ve ABD'de yasa dışı olan kalıplar için denetler, yasa, bir dosya ve bir satır ve dürüst değiştirme ile.

uxgen tarafından oluşturuldu — bir kodlama ajanına satışın tüm zanaatını veren MCP sunucusu: bölüm sırası, fotoğrafçılık, kilitli bir dil bilgisi ve para alamayan bir sayfayı reddeden bir denetim. Bu beceri ücretsiz olan kısımdır.

MIT © 2026 uxgen