uxgen

Skill de Claude Code para el diseño de tiendas, páginas de producto y páginas de aterrizaje

Tu agente ya puede construir una página de producto hermosa. Pero no puede decirte si este producto debería tener una lista de niveles, un paquete, un impulso de pedido o ninguno de ellos — así que construye un stepper y una foto de stock, y la página no genera dinero.

Este skill es la decisión. Lee el producto del comerciante y deduce qué mecánicas de venta pertenecen a la página y en qué orden, cada una con su razón, además de cuatro componentes de referencia y las reglas de la UE que los rigen.

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

Funciona con Claude Code, Codex, Cursor y cualquier agente que lea el formato Agent Skills. En Claude Code también puedes instalarlo como plugin:

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

MIT. Sin dependencias más allá de React para los componentes. Nada envía datos a casa.

---

Audita una tienda antes de tocarla

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

Cero dependencias, solo lectura, no escribe nada. Encuentra los defectos que este skill existe para prevenir, cada uno con un archivo, una línea y la razón:

• un stepper de cantidad donde pertenecen niveles nombrados
• un complemento que puede comenzar pre-marcado — reembolsable bajo la ley de la UE
• una calificación, un conteo de reseñas, "12 personas están viendo" o "solo quedan 3" fabricados
• un precio tachado no derivado del precio unitario
• una cuenta regresiva sembrada desde Date.now(), por lo que se reinicia al recargar
• texto de relleno aún en el código fuente
• y cuáles de las cuatro mecánicas están completamente ausentes del código base

--json para salida de máquina, --strict para fallar un trabajo de CI.

---

Qué hace realmente el skill

1. Decide, en lugar de pegar

El centro del skill es una tabla de decisión. Siete preguntas sobre el producto — un artículo o un catálogo, impulso o consideración, físico o digital, consumible o duradero, variantes, caducidad, banda de precio — y de las respuestas, qué mecánicas pertenecen aquí y cuáles no.

Cada regla lleva la razón, que es lo que la hace utilizable en un producto que la tabla nunca ha visto:

Si	Entonces	Porque
duradero	sin descuentos por cantidad	nadie necesita dos lámparas; los niveles se leen como una tienda que no ha entendido su propio producto
caduca en n semanas	limita el nivel superior dentro de n	seis de algo que se echa a perder en dos produce un reembolso y una reseña permanente
banda de precio considerada	prueba y garantía antes del precio	la pregunta es ¿debería siquiera?, no ¿cuántos? — el precio primero hace que el precio sea toda la conversación
digital	nunca una barra de envío gratis	nada se envía; una barra de envío en una descarga es una mentira con una animación de progreso
las variantes son tallas de cuerpo	sin descuentos por cantidad	una persona usa una talla
mono-producto	duplícalo solo si duplicar es lógico, de lo contrario nada	una tienda sin un complemento honesto que inventa uno pone algo en el carrito que el comprador no quería

Luego ordena las secciones — y el orden difiere según el producto. El impulso pone el precio antes de la prueba; la consideración pone la prueba antes del precio. Mismos componentes, páginas opuestas, y la razón está en la tabla.

2. Lleva las reglas que son ley, no gusto

• Nunca pre-marques un complemento. Artículo 22 de la Directiva 2011/83/UE requiere consentimiento expreso para cualquier pago más allá de la obligación principal y hace que un pago inferido de un valor predeterminado que el consumidor tuvo que rechazar sea reembolsable. Varios widgets comerciales de venta adicional vienen pre-marcados como su valor predeterminado de fábrica.
• Nunca inventes el precio tachado. Bajo la Directiva 98/6/CE modificada por la Directiva (UE) 2019/2161, el ancla debe ser un precio realmente aplicado: compareAtCents = unitPriceCents × units, y nada más.
• Nunca generes prueba. Una calificación, un conteo de reseñas, un contador de visitantes o una cuenta regresiva que nadie ganó es una práctica comercial desleal bajo la Directiva 2005/29/CE en el momento en que se publica. El skill construye el espacio y lo deja vacío.

3. Incluye cuatro componentes para construir sobre ellos

React, sin dependencias, MIT. Cada uno lleva sus reglas como código, con salvaguardas que lanzan errores en desarrollo en lugar de enviar un defecto silenciosamente.

Componente	Qué le pregunta al comprador	Dónde vive
Descuentos por cantidad	qué paquete, no cuántos	página de producto
Barra de envío gratis	qué tan lejos del umbral, en dinero	carrito
Impulso de pedido	un complemento, sí o no, sin marcar	carrito, sobre los totales
Botón de añadir al carrito fijo	nada — solo permanece accesible	página de producto móvil

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 única regla, si no lees nada más

Los descuentos por cantidad son un grupo de radio de niveles nombrados. Nunca una entrada numérica.

Un stepper pregunta ¿cuántos? — aritmética que el comprador realiza, sin nada que sugiera que dos es una mejor idea que uno. Un grupo de radio de paquetes nombrados pregunta ¿cuál?, y uno de ellos es visiblemente la opción sensata.

Ese único error es el más común en los escaparates generados.

---

Por qué existe este repositorio

El 25 de agosto de 2026 preguntamos a ChatGPT y Perplexity, ambos con búsqueda web habilitada, por un componente de React para buy 2, save 15%.

ChatGPT devolvió un stepper de cantidad y no citó ninguna fuente. Perplexity también devolvió un stepper, con min, max, step y una prop bundleSize, citando patrones genéricos de selectores de cantidad.

Ambos estaban equivocados de la misma manera, y la razón es la parte útil: no hay una fuente canónica para que consulten. Busca tiered pricing component y los resultados son sobre tablas de precios. Busca order bump component y son sobre plugins de tiendas. Busca bundle quantity selector component react y son sobre el tamaño del paquete de JavaScript.

Las mecánicas de comercio no tienen especificación en la web abierta, así que un modelo recurre a lo más cercano que ha leído mil veces.

Este repositorio es esa especificación.

---

Qué hay en la caja

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

---

Qué no es esto

No es una biblioteca de componentes, e instalarlo no llenará tu página con bloques. Enseña las decisiones y las reglas y da cuatro implementaciones para construir sobre ellas, porque el juicio es la parte que se transfiere y un componente pegado es la parte que no.

No es un marco de pruebas A/B y no promete un aumento. Por debajo de aproximadamente cuarenta mil sesiones por variante, una prueba dividida no puede separar un efecto real del ruido, que es la mayoría de las tiendas. Lo que estas mecánicas te dan es la eliminación de una omisión conocida, que no necesita una prueba para valer la pena.

No hará, por sí solo, que una página sea hermosa. references/design-laws.md lleva las reglas de composición con las que trabajamos, pero la brecha entre una página correcta y una llamativa es principalmente fotografía, y ningún skill incluye eso.

---

Lecturas relacionadas

• Descuentos por cantidad que aumentan el valor promedio del pedido
• Dónde colocar una venta adicional en una página de producto
• Bloques de comercio electrónico de shadcn: qué existe y qué falta
• Aplicaciones de venta adicional para Shopify, o constrúyelo tú mismo

Hermanos

Este skill cubre la página de producto. Otros dos cubren el resto de la visita:

• claude-code-checkout-upsell — qué venta adicional va en el carrito, el checkout y después del pago: impulso de pedido, compra posterior de un clic, una venta cruzada, barra de envío gratis.
• claude-code-ecommerce-dark-patterns — audita el resultado en busca de los patrones que son ilegales en la UE, el Reino Unido y los EE. UU., con la ley, un archivo y una línea, y el reemplazo honesto.

Construido por uxgen — el servidor MCP que entrega a un agente de codificación todo el oficio de vender: el orden de las secciones, la fotografía, una gramática bloqueada y una auditoría que rechaza una página incapaz de generar dinero. Este skill es la parte que es gratuita.

MIT © 2026 uxgen