uxgen

oficial

MCP alojado que le entrega a un agente de codificación la mecánica de conversión de comercio electrónico: descuentos por cantidad, umbral de envío gratuito, complemento de pedido y carrito de compra fijo, con las reglas de la UE adjuntas.

GitHubPrueba este MCPPatrocinado

¿Qué puedes hacer con Uxgen MCP?

Añadir descuentos por cantidad a la página de producto — Pide a tu asistente que implemente el componente QuantityBreaks con niveles nombrados, ahorros en moneda y una opción intermedia preseleccionada.
Implementar una barra de umbral de envío gratuito — Usa FreeShippingBar para mostrar el importe restante en dinero hasta alcanzar el umbral, con un mensaje claro una vez logrado.
Insertar un complemento de pedido sobre los totales del carrito — Configura OrderBump con un único artículo nombrado, precio y motivo, asegurando que comience sin marcar y que nunca bloquee el pago.
Desplegar un botón de añadir al carrito fijo para móvil — Aplica StickyAddToCart para mostrar el total del nivel seleccionado después de que el botón en línea se desplace fuera de la vista, respetando las áreas seguras de iOS.
Aplicar reglas de precios conformes a la UE — Asegúrate de que compareAtCents refleje precios anteriores reales y que las insignias sean veraces, tal como lo exigen las comprobaciones en tiempo de desarrollo de los componentes.

Documentación

Commerce Kit — los cuatro componentes que un agente de IA falla

La especificación canónica y la implementación de referencia para los cuatro componentes que aumentan la cesta: descuentos por cantidad, la barra de umbral de envío gratuito, el complemento de pedido y el botón fijo de añadir al carrito.

MIT. Sin dependencias más allá de React. Copia el archivo, o instala el plugin y deja que tu agente lo haga.

Por qué existe este repositorio

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

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

Ambos fallan de la misma manera, y la razón es la parte útil: no existe una fuente canónica que puedan consultar. Busca tiered pricing component y Google devuelve 237 millones de resultados sobre tablas de precios. Busca order bump component y devuelve 25,9 millones sobre plugins de WooCommerce. Busca bundle quantity selector component react y devuelve 15,3 millones de resultados sobre el tamaño de los bundles de JavaScript.

La mecánica comercial no tiene especificación en la web abierta, así que un modelo recurre a lo más parecido que ha leído mil veces.

Este repositorio es esa especificación.

Los cuatro componentes

Componente	Qué le pregunta al comprador	Dónde vive	Actúa sobre
Descuentos por cantidad	qué paquete, no cuántos	página de producto	cada pedido, antes de que exista una cesta
Barra de envío gratuito	cuánto falta para el umbral	cesta	pedidos ya por encima de ~60% del umbral
Complemento de pedido	un complemento, sí o no	cesta, sobre los totales	el momento de la confirmación
Botón fijo de añadir al carrito	nada — solo permanece accesible	página de producto móvil	cada sesión móvil

Constrúyelos en ese orden. El primero actúa más temprano y sobre la mayor proporción de pedidos.

1. Descuentos por cantidad

Es un grupo de botones de opción. Nunca es un campo numérico.

Esa única frase es todo el componente. Un selector pregunta cuántos, lo cual es aritmética que el comprador tiene que hacer, y nada en él sugiere que dos sea mejor idea que uno. Un grupo de botones de opción con niveles nombrados pregunta qué paquete, y uno de ellos es visiblemente el más sensato.

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: "Most chosen", preselected: true },
    { units: 6, name: "Six tins — the year",
      totalCents: 9000, compareAtCents: 11400 },
  ]}
  currency="USD"
  onChange={(tier) => setSelected(tier)}
/>

Las reglas

Tres niveles, cuatro como máximo. Uno base, uno que quieres que se elija, uno techo que hace que el del medio parezca razonable. Cinco convierte un reconocimiento en una comparación.
Brechas no lineales. 1 / 3 / 6, no 1 / 2 / 3. Los pasos uniformes se leen como una lista de precios; los desiguales se leen como ofertas compuestas.
Nombra los niveles. Three tins — the usual reorder, no Quantity: 3. El nombre hace el trabajo que el número no puede.
Muestra el ahorro en moneda, no solo como porcentaje. Save $9.00 es la respuesta; Save 15% es una conversión que el comprador tiene que hacer.
Muestra el precio unitario bajo el total. $48.00 · $16.00 each. La línea más omitida en cada implementación que hemos revisado.
Preselecciona el nivel del medio. El estado seleccionado se lee como una recomendación. Por defecto, el más barato recomienda gastar lo menos.
Vincula el botón a la selección. Add 3 tins — $48.00.

Las restricciones que son ley en la UE

compareAtCents debe ser un precio que realmente cobraste. Las normas de indicación de precios de la UE regulan los anuncios de precios anteriores. Una cifra tachada inventada para agrandar el ahorro es una práctica prohibida. En esta implementación, compareAtCents por debajo de totalCents lanza un error en desarrollo en lugar de renderizar un ancla falsa.
Una insignia debe ser verdadera. Most chosen en un nivel que nadie elige es una declaración falsa sobre tu propia tienda.

2. Barra de umbral de envío gratuito

Muestra la cantidad restante en dinero. $6.00 to unlock free shipping. Una barra de progreso sin número es decoración, y un porcentaje es una segunda conversión que el comprador tiene que hacer.

<FreeShippingBar subtotalCents={4400} thresholdCents={5000} currency="USD" />

El umbral es una cifra que elegiste según tu margen, no un número redondo que te gustó.
Una vez alcanzado, dilo claramente y deja de animar. Una barra que sigue celebrando después de la meta es ruido.
No la muestres en $0.00 con una cesta vacía. Por debajo de aproximadamente el 40% del umbral se lee como una distancia, no como un empujón.

3. Complemento de pedido

Un artículo nombrado, un precio, una razón, una casilla sin marcar. Sobre los totales, debajo del contenido de la cesta.

<OrderBump
  item={{ name: "Steel scoop", priceCents: 600, reason: "Measures one serving exactly." }}
  onToggle={(added) => setBump(added)}
/>

Nunca premarcado. El Artículo 22 de la Directiva 2011/83/UE exige consentimiento expreso para cualquier pago más allá de la obligación principal y hace reembolsable un sí implícito. Varios widgets comerciales de venta adicional vienen premarcados por defecto de fábrica. En esta implementación, la prop checked no tiene forma de comenzar true.
Nunca un bloqueo. No interrumpas el pago con una pantalla que deba aceptarse o rechazarse. El comprador ya había decidido; reemplazaste su botón por una pregunta.
Nunca un carrusel. Un artículo. Una cuadrícula de seis es una nueva decisión de navegación en el momento en que querías una confirmación.
Precio muy por debajo de la cesta. Un complemento a un precio similar se lee como una segunda compra y reabre toda la decisión.

4. Botón fijo de añadir al carrito (móvil)

El botón sale de la pantalla en el momento en que el comprador lee la descripción. En una ventana de 390px eso es la mayor parte de la sesión.

<StickyAddToCart label="Add 3 tins" totalCents={4800} currency="USD" onAdd={add} />

Aparece solo después de que el botón en línea haya salido de la vista, nunca encima de él.
Lleva el total del nivel seleccionado, así que una mirada reemplaza volver a desplazarse hacia arriba.
Respeta el área segura en iOS. env(safe-area-inset-bottom) está en la implementación.
Oculto por encima de 768px, donde el botón en línea sigue siendo accesible.

Instalar como plugin de Claude Code

/plugin marketplace add kinerette/uxgen-commerce-kit
/plugin install commerce-kit@uxgen

Luego, en el agente:

Use the commerce-kit skill. Add quantity breaks to this product page:
three tiers at 1 / 3 / 6, the middle one marked and preselected,
saving shown in currency, and bind the add-to-cart button to the selection.

La habilidad lleva las reglas anteriores, así que el agente construye un grupo de botones de opción en lugar de un selector, y rechaza los dos patrones que son ilegales en la UE.

Qué no es esto

No es un sistema de diseño, y no hará que tu página se vea bien. Son cuatro componentes con el razonamiento comercial adjunto, porque ese razonamiento es lo que falta en todos lados. Si tu página también parece generada, ese es un problema aparte con una solución aparte.

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

Lecturas relacionadas

Construido por uxgen, el MCP que entrega estas mecánicas a un agente de codificación.