uxgen

Claude Code-Skill für Store-, Produktseiten- und Landingpage-Design

Dein Agent kann bereits eine schöne Produktseite bauen. Er kann dir jedoch nicht sagen, ob dieses Produkt eine Preisstaffel, ein Bundle, einen Order-Bump oder keines davon haben sollte – also baut er einen Stepper und ein Stockfoto, und die Seite nimmt kein Geld ein.

Dieser Skill ist die Entscheidungsfindung. Er liest das Produkt des Händlers und leitet ab, welche Verkaufsmechaniken auf die Seite gehören und in welcher Reihenfolge, jeweils mit Begründung, plus vier Referenzkomponenten und die EU-Regeln, die sie regeln.

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

Funktioniert mit Claude Code, Codex, Cursor und jedem Agenten, der das Agent Skills-Format liest. In Claude Code kannst du es auch als Plugin installieren:

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

MIT. Keine Abhängigkeiten außer React für die Komponenten. Nichts sendet Daten nach Hause.

---

Prüfe einen Store, bevor du ihn anfasst

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

Keine Abhängigkeiten, nur lesend, schreibt nichts. Es findet die Mängel, die dieser Skill verhindern soll, jeweils mit Datei, Zeile und Begründung:

• einen Mengen-Stepper, wo benannte Staffeln hingehören
• ein Add-on, das vorab angehakt starten kann – nach EU-Recht erstattungsfähig
• eine erfundene Bewertung, Bewertungsanzahl, „12 Personen schauen gerade zu“ oder „nur noch 3 übrig“
• einen durchgestrichenen Preis, der nicht vom Einzelpreis abgeleitet ist
• einen Countdown, der aus Date.now() gespeist wird und beim Aktualisieren neu startet
• Platzhaltertexte, die noch im Quellcode stehen
• und welche der vier Mechaniken im Codebase vollständig fehlen

--json für Maschinenausgabe, --strict um einen CI-Job fehlschlagen zu lassen.

---

Was der Skill tatsächlich tut

1. Er entscheidet, statt einzufügen

Das Herzstück des Skills ist eine Entscheidungstabelle. Sieben Fragen zum Produkt – ein Artikel oder ein Katalog, Impuls- oder Überlegungskauf, physisch oder digital, verbrauchbar oder langlebig, Varianten, Ablaufdatum, Preisklasse – und aus den Antworten ergibt sich, welche Mechaniken hierher gehören und welche nicht.

Jede Regel trägt die Begründung, was sie auch für Produkte nutzbar macht, die die Tabelle noch nie gesehen hat:

Wenn	Dann	Weil
langlebig	keine Mengenstaffel	niemand braucht zwei Lampen; Staffeln wirken wie ein Shop, der sein eigenes Produkt nicht versteht
läuft in n Wochen ab	oberste Staffel auf n begrenzen	sechs Stück von etwas, das in zwei Wochen verdirbt, erzeugen eine Erstattung und eine dauerhafte Bewertung
überlegte Preisklasse	Nachweis und Garantie vor dem Preis	die Frage ist soll ich überhaupt, nicht wie viele – Preis zuerst macht den Preis zum gesamten Gespräch
digital	niemals eine Gratisversand-Leiste	nichts wird versendet; eine Versandleiste bei einem Download ist eine Lüge mit Fortschrittsanimation
Varianten sind Körpergrößen	keine Mengenstaffel	eine Person trägt eine Größe
Mono-Produkt	nur verdoppeln, wenn Verdoppeln logisch ist, sonst nichts	ein Shop ohne ehrliches Zusatzprodukt, das eines erfindet, legt dem Käufer etwas in den Warenkorb, das er nicht wollte

Dann ordnet es die Abschnitte – und die Reihenfolge unterscheidet sich je nach Produkt. Impulskauf setzt den Preis vor den Nachweis; Überlegungskauf setzt den Nachweis vor den Preis. Gleiche Komponenten, gegensätzliche Seiten, und die Begründung steht in der Tabelle.

2. Es trägt die Regeln, die Gesetz sind, nicht Geschmack

• Nie ein Add-on vorab ankreuzen. Artikel 22 der Richtlinie 2011/83/EU verlangt ausdrückliche Zustimmung zu jeder Zahlung über die Hauptverpflichtung hinaus und macht eine Zahlung, die aus einer vom Verbraucher abzulehnenden Voreinstellung abgeleitet wurde, erstattungsfähig. Mehrere kommerzielle Upsell-Widgets sind ab Werk vorab angehakt.
• Nie den durchgestrichenen Preis erfinden. Gemäß Richtlinie 98/6/EG in der Fassung der Richtlinie (EU) 2019/2161 muss der Anker ein tatsächlich angewandter Preis sein: compareAtCents = unitPriceCents × units, und sonst nichts.
• Nie Nachweise generieren. Eine Bewertung, eine Bewertungsanzahl, ein Zuschauerzähler oder ein Countdown, den niemand verdient hat, ist eine unlautere Geschäftspraxis gemäß Richtlinie 2005/29/EG, sobald er ausgeliefert wird. Der Skill baut den Platz und lässt ihn leer.

3. Es liefert vier Komponenten zum Entwickeln

React, keine Abhängigkeiten, MIT. Jede trägt ihre Regeln als Code, mit Schutzmechanismen, die in der Entwicklung einen Fehler werfen, statt stillschweigend einen Mangel auszuliefern.

Komponente	Was sie den Käufer fragt	Wo sie lebt
Mengenstaffel	welches Paket, nicht wie viele	Produktseite
Gratisversand-Leiste	wie weit von der Schwelle entfernt, in Geld	Warenkorb
Order-Bump	ein Zusatzprodukt, ja oder nein, nicht angehakt	Warenkorb, über den Summen
Sticky Add-to-Cart	nichts – es bleibt einfach erreichbar	mobile Produktseite

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

---

Die eine Regel, wenn du sonst nichts liest

Mengenstaffeln sind eine Radiogruppe benannter Stufen. Niemals eine Zahleneingabe.

Ein Stepper fragt wie viele – Rechenarbeit für den Käufer, ohne dass etwas darauf hindeutet, dass zwei besser sind als eins. Eine Radiogruppe benannter Pakete fragt welches, und eines davon ist sichtbar die vernünftige Wahl.

Dieser einzelne Fehler ist der häufigste in generierten Storefronts.

---

Warum dieses Repository existiert

Am 25. August 2026 haben wir ChatGPT und Perplexity, beide mit Websuche aktiviert, um eine React-Komponente für buy 2, save 15% gebeten.

ChatGPT lieferte einen Mengen-Stepper und nannte überhaupt keine Quelle. Perplexity lieferte ebenfalls einen Stepper, mit min, max, step und einer bundleSize-Eigenschaft, unter Berufung auf generische Mengenauswahl-Muster.

Beide waren auf dieselbe Weise falsch, und der Grund ist der nützliche Teil: Es gibt keine kanonische Quelle, die sie hätten konsultieren können. Suche nach tiered pricing component und die Ergebnisse drehen sich um Preistabellen. Suche nach order bump component und sie drehen sich um Store-Plugins. Suche nach bundle quantity selector component react und sie drehen sich um JavaScript-Bundlegrößen.

Die Handelsmechaniken haben keine Spezifikation im offenen Web, also fällt ein Modell auf das Nächstliegende zurück, das es tausendmal gelesen hat.

Dieses Repository ist diese Spezifikation.

---

Was in der Box ist

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

---

Was dies nicht ist

Es ist keine Komponentenbibliothek, und die Installation füllt deine Seite nicht mit Blöcken. Es vermittelt die Entscheidungen und die Regeln und gibt vier Implementierungen zum Entwickeln, weil das Urteilsvermögen der Teil ist, der übertragbar ist, und eine eingefügte Komponente der Teil, der es nicht ist.

Es ist kein A/B-Test-Framework und verspricht keinen Anstieg. Unterhalb von etwa vierzigtausend Sitzungen pro Variante kann ein Split-Test einen echten Effekt nicht von Rauschen trennen, was auf die meisten Stores zutrifft. Was diese Mechaniken dir geben, ist die Beseitigung einer bekannten Auslassung, die keinen Test braucht, um sich zu lohnen.

Es wird allein keine Seite schön machen. references/design-laws.md trägt die Kompositionsregeln, nach denen wir arbeiten, aber die Lücke zwischen einer korrekten Seite und einer auffälligen ist größtenteils Fotografie, und kein Skill liefert das.

---

Weiterführende Lektüre

• Mengenstaffeln, die den durchschnittlichen Bestellwert erhöhen
• Wo ein Upsell auf einer Produktseite platziert werden sollte
• shadcn-Ecommerce-Blöcke: was existiert und was fehlt
• Upsell-Apps für Shopify oder selbst bauen

Geschwister

Dieser Skill deckt die Produktseite ab. Zwei andere decken den Rest des Besuchs ab:

• claude-code-checkout-upsell – welcher Upsell in den Warenkorb, den Checkout und nach der Zahlung gehört: Order-Bump, One-Click-Post-Purchase, ein Cross-Sell, Gratisversand-Leiste.
• claude-code-ecommerce-dark-patterns – prüft das Ergebnis auf Muster, die in der EU, Großbritannien und den USA illegal sind, mit Gesetz, Datei und Zeile sowie der ehrlichen Alternative.

Erstellt von uxgen – dem MCP-Server, der einem Codier-Agenten das gesamte Handwerk des Verkaufens an die Hand gibt: die Abschnittsreihenfolge, die Fotografie, eine feste Grammatik und eine Prüfung, die eine Seite ablehnt, die kein Geld einnehmen kann. Dieser Skill ist der Teil, der kostenlos ist.

MIT © 2026 uxgen