uxgen

Compétence Claude Code pour la conception de boutiques, de pages produit et de pages d’atterrissage

Votre agent peut déjà créer une belle page produit. Il ne peut pas vous dire si ce produit doit avoir une liste de paliers, un lot, une vente incitative ou aucun de ces éléments — il crée donc un sélecteur numérique et une photo de stock, et la page ne génère aucun revenu.

Cette compétence est la décision. Elle lit le produit du marchand et déduit quels mécanismes de vente doivent figurer sur la page et dans quel ordre, chacun avec sa raison, ainsi que quatre composants de référence et les règles de l’UE qui les régissent.

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

Fonctionne avec Claude Code, Codex, Cursor et tout agent qui lit le format Agent Skills. Dans Claude Code, vous pouvez également l’installer comme plugin :

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

MIT. Aucune dépendance au-delà de React pour les composants. Rien ne communique avec l’extérieur.

---

Auditez une boutique avant d’y toucher

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

Zéro dépendance, lecture seule, aucune écriture. Il détecte les défauts que cette compétence existe pour prévenir, chacun avec un fichier, une ligne et la raison :

• un sélecteur numérique de quantité là où des paliers nommés sont nécessaires
• un module complémentaire pouvant être pré-coché — remboursable selon le droit de l’UE
• une note, un nombre d’avis, « 12 personnes consultent » ou « plus que 3 disponibles » fabricated
• un prix barré non dérivé du prix unitaire
• un compte à rebours initialisé depuis Date.now(), donc réinitialisé à chaque actualisation
• un texte de remplacement encore présent dans le code source
• et lesquels des quatre mécanismes sont totalement absents du codebase

--json pour la sortie machine, --strict pour faire échouer un travail CI.

---

Ce que fait réellement la compétence

1. Elle décide, au lieu de coller

Le cœur de la compétence est un tableau de décision. Sept questions sur le produit — un article ou un catalogue, achat impulsif ou réfléchi, physique ou numérique, consommable ou durable, variantes, expiration, fourchette de prix — et à partir des réponses, quels mécanismes appartiennent ici et lesquels non.

Chaque règle porte la raison, ce qui la rend utilisable sur un produit que le tableau n’a jamais vu :

Si	Alors	Parce que
durable	pas de paliers de quantité	personne n’a besoin de deux lampes ; les paliers évoquent une boutique qui n’a pas compris son propre produit
expire dans n semaines	plafonner le palier supérieur à n	six unités d’un produit qui se périme en deux semaines génèrent un remboursement et un avis permanent
fourchette de prix réfléchie	preuve et garantie avant le prix	la question est devrais-je même acheter, pas combien — le prix en premier fait du prix toute la conversation
numérique	jamais de barre de livraison gratuite	rien n’est expédié ; une barre de livraison sur un téléchargement est un mensonge avec une animation de progression
les variantes sont des tailles de vêtements	pas de paliers de quantité	une personne porte une seule taille
mono-produit	doubler uniquement si le doublage est logique, sinon rien	une boutique sans complément honnête qui en invente un met dans le panier un article que l’acheteur ne voulait pas

Ensuite, elle ordonne les sections — et l’ordre diffère selon le produit. L’impulsif place le prix avant la preuve ; le réfléchi place la preuve avant le prix. Mêmes composants, pages opposées, et la raison est dans le tableau.

2. Elle porte les règles qui sont la loi, pas le goût

• Ne jamais pré-cocher un module complémentaire. Article 22 de la directive 2011/83/UE exige un consentement exprès pour tout paiement au-delà de l’obligation principale et rend remboursable un paiement déduit d’un défaut que le consommateur a dû refuser. Plusieurs widgets commerciaux de vente incitative sont livrés pré-cochés par défaut.
• Ne jamais inventer le prix barré. Selon la directive 98/6/CE telle que modifiée par la directive (UE) 2019/2161, l’ancre doit être un prix réellement appliqué : compareAtCents = unitPriceCents × units, et rien d’autre.
• Ne jamais générer de preuve. Une note, un nombre d’avis, un compteur de visiteurs ou un compte à rebours que personne n’a mérité est une pratique commerciale déloyale au titre de la directive 2005/29/CE dès sa mise en ligne. La compétence crée l’emplacement et le laisse vide.

3. Elle fournit quatre composants pour construire

React, aucune dépendance, MIT. Chacun porte ses règles sous forme de code, avec des garde-fous qui lèvent une erreur en développement plutôt que de livrer un défaut en silence.

Composant	Ce qu’il demande à l’acheteur	Où il se trouve
Paliers de quantité	quel lot, pas combien	page produit
Barre de livraison gratuite	à quelle distance du seuil, en argent	panier
Vente incitative	un complément, oui ou non, non coché	panier, au-dessus des totaux
Bouton d’ajout au panier collant	rien — il reste simplement accessible	page produit mobile

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

---

La règle unique, si vous ne lisez rien d’autre

Les paliers de quantité sont un groupe de boutons radio avec des paliers nommés. Jamais une saisie numérique.

Un sélecteur numérique demande combien — un calcul que l’acheteur effectue, sans rien qui suggère que deux est une meilleure idée qu’un. Un groupe de boutons radio avec des lots nommés demande lequel, et l’un d’eux est visiblement le choix judicieux.

Cette seule erreur est la plus courante dans les vitrines générées.

---

Pourquoi ce dépôt existe

Le 25 août 2026, nous avons demandé à ChatGPT et Perplexity, tous deux avec la recherche web activée, un composant React pour buy 2, save 15%.

ChatGPT a renvoyé un sélecteur numérique de quantité et n’a cité aucune source. Perplexity a aussi renvoyé un sélecteur numérique, avec min, max, step et une propriété bundleSize, citant des modèles génériques de sélecteur de quantité.

Les deux avaient tort de la même manière, et la raison est la partie utile : il n’existe aucune source canonique à consulter. Recherchez tiered pricing component et les résultats concernent les tableaux de prix. Recherchez order bump component et ils concernent les plugins de boutique. Recherchez bundle quantity selector component react et ils concernent la taille des bundles JavaScript.

Les mécanismes de commerce n’ont aucune spécification sur le web ouvert, donc un modèle retombe sur la chose la plus proche qu’il a lue mille fois.

Ce dépôt est cette spécification.

---

Ce qui est dans la boîte

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

---

Ce que ce n’est pas

Ce n’est pas une bibliothèque de composants, et l’installer ne remplira pas votre page de blocs. Elle enseigne les décisions et les règles et fournit quatre implémentations pour construire, car le jugement est la partie qui se transfère et un composant collé est la partie qui ne se transfère pas.

Ce n’est pas un cadre de tests A/B et elle ne promet pas d’augmentation. En dessous d’environ quarante mille sessions par variante, un test fractionné ne peut pas séparer un effet réel du bruit, ce qui est le cas de la plupart des boutiques. Ce que ces mécanismes vous donnent, c’est la suppression d’une omission connue, qui n’a pas besoin d’un test pour valoir la peine.

Elle ne rendra pas, à elle seule, une page belle. references/design-laws.md porte les règles de composition que nous suivons, mais l’écart entre une page correcte et une page frappante est surtout une question de photographie, et aucune compétence ne fournit cela.

---

Lectures connexes

• Paliers de quantité qui augmentent le panier moyen
• Où placer une vente incitative sur une page produit
• Blocs ecommerce shadcn : ce qui existe et ce qui manque
• Applications de vente incitative pour Shopify, ou construisez la vôtre

Compétences sœurs

Cette compétence couvre la page produit. Deux autres couvrent le reste de la visite :

• claude-code-checkout-upsell — quelle vente incitative va dans le panier, le paiement et après le paiement : vente incitative, achat post-paiement en un clic, une vente croisée, barre de livraison gratuite.
• claude-code-ecommerce-dark-patterns — audite le résultat pour les modèles illégaux dans l’UE, le Royaume-Uni et les États-Unis, avec la loi, un fichier et une ligne, et le remplacement honnête.

Construit par uxgen — le serveur MCP qui donne à un agent de codage tout le métier de la vente : l’ordre des sections, la photographie, une grammaire verrouillée, et un audit qui rejette une page incapable de générer des revenus. Cette compétence est la partie gratuite.

MIT © 2026 uxgen