uxgen

Habilidade Claude Code para design de loja, página de produto e landing page

Seu agente já consegue construir uma bela página de produto. Ele não consegue dizer se este produto deve ter uma lista de níveis, um pacote, um upsell de pedido ou nenhum deles — então ele constrói um stepper e uma foto de banco de imagens, e a página não gera dinheiro.

Esta habilidade é a decisão. Ela lê o produto do comerciante e deduz quais mecânicas de venda pertencem à página e em que ordem, cada uma com sua razão, além de quatro componentes de referência e as regras da UE que os regem.

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

Funciona com Claude Code, Codex, Cursor e qualquer agente que leia o formato Agent Skills. No Claude Code, você também pode instalá-lo como um plugin:

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

MIT. Sem dependências além de React para os componentes. Nada envia dados para fora.

---

Audite uma loja antes de tocá-la

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

Zero dependências, somente leitura, não escreve nada. Ele encontra os defeitos que esta habilidade existe para prevenir, cada um com um arquivo, uma linha e a razão:

• um stepper de quantidade onde níveis nomeados pertencem
• um complemento que pode começar pré-marcado — reembolsável sob a lei da UE
• uma avaliação, contagem de avaliações, "12 pessoas estão vendo" ou "restam apenas 3" fabricadas
• um preço riscado não derivado do preço unitário
• uma contagem regressiva semeada a partir de Date.now(), então ela reseta ao atualizar
• texto de placeholder ainda no código-fonte
• e quais das quatro mecânicas estão completamente ausentes do código

--json para saída de máquina, --strict para falhar um job de CI.

---

O que a habilidade realmente faz

1. Ela decide, em vez de colar

O centro da habilidade é uma tabela de decisão. Sete perguntas sobre o produto — um item ou um catálogo, impulso ou consideração, físico ou digital, consumível ou durável, variantes, validade, faixa de preço — e, a partir das respostas, quais mecânicas pertencem aqui e quais não.

Cada regra carrega a razão, que é o que a torna utilizável em um produto que a tabela nunca viu:

Se	Então	Porque
durável	sem quebras de quantidade	ninguém precisa de duas luminárias; níveis parecem de uma loja que não entendeu o próprio produto
expira em n semanas	limite o nível superior dentro de n	seis de algo que estraga em dois gera um reembolso e uma avaliação permanente
faixa de preço considerada	prova e garantia antes do preço	a pergunta é devo comprar mesmo, não quantos — preço primeiro faz do preço toda a conversa
digital	nunca uma barra de frete grátis	nada é enviado; uma barra de frete em um download é uma mentira com animação de progresso
variantes são tamanhos de corpo	sem quebras de quantidade	uma pessoa usa um tamanho
mono-produto	dobre apenas se dobrar for lógico, caso contrário nada	uma loja sem complemento honesto que inventa um coloca no carrinho algo que o comprador não queria

Então ela ordena as seções — e a ordem difere por produto. Impulso coloca o preço antes da prova; consideração coloca a prova antes do preço. Mesmos componentes, páginas opostas, e a razão está na tabela.

2. Ela carrega as regras que são lei, não gosto

• Nunca pré-marque um complemento. Artigo 22 da Diretiva 2011/83/UE exige consentimento expresso para qualquer pagamento além da obrigação principal e torna um pagamento inferido de um padrão que o consumidor teve que rejeitar reembolsável. Vários widgets comerciais de upsell vêm pré-marcados como padrão de fábrica.
• Nunca invente o preço riscado. Sob a Diretiva 98/6/CE, conforme alterada pela Diretiva (UE) 2019/2161, a âncora deve ser um preço realmente aplicado: compareAtCents = unitPriceCents × units, e nada mais.
• Nunca gere prova. Uma avaliação, contagem de avaliações, contador de visualizações ou contagem regressiva que ninguém ganhou é uma prática comercial desleal sob a Diretiva 2005/29/CE no momento em que é publicada. A habilidade constrói o espaço e o deixa vazio.

3. Ela entrega quatro componentes para construir

React, sem dependências, MIT. Cada um carrega suas regras como código, com proteções que lançam erros em desenvolvimento em vez de enviar um defeito silenciosamente.

Componente	O que pergunta ao comprador	Onde fica
Quebras de quantidade	qual pacote, não quantos	página de produto
Barra de frete grátis	quão longe do limite, em dinheiro	carrinho
Upsell de pedido	um complemento, sim ou não, desmarcado	carrinho, acima dos totais
Adicionar ao carrinho fixo	nada — apenas permanece acessível	página de produto 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}
/>

---

A única regra, se você não ler mais nada

Quebras de quantidade são um grupo de rádio de níveis nomeados. Nunca um input numérico.

Um stepper pergunta quantos — aritmética que o comprador executa, sem nada que sugira que dois é uma ideia melhor que um. Um grupo de rádio de pacotes nomeados pergunta qual, e um deles é visivelmente a escolha sensata.

Esse único erro é o mais comum em lojas geradas.

---

Por que este repositório existe

Em 25 de agosto de 2026, perguntamos ao ChatGPT e ao Perplexity, ambos com busca na web ativada, por um componente React para buy 2, save 15%.

O ChatGPT retornou um stepper de quantidade e não citou nenhuma fonte. O Perplexity também retornou um stepper, com min, max, step e uma prop bundleSize, citando padrões genéricos de seletor de quantidade.

Ambos estavam errados da mesma forma, e a razão é a parte útil: não há fonte canônica para eles consultarem. Pesquise tiered pricing component e os resultados são sobre tabelas de preços. Pesquise order bump component e eles são sobre plugins de loja. Pesquise bundle quantity selector component react e eles são sobre tamanho de bundle JavaScript.

As mecânicas de comércio não têm especificação na web aberta, então um modelo recorre ao mais próximo que já leu mil vezes.

Este repositório é essa especificação.

---

O que está na caixa

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

---

O que isto não é

Não é uma biblioteca de componentes, e instalá-lo não preencherá sua página com blocos. Ele ensina as decisões e as regras e dá quatro implementações para construir, porque o julgamento é a parte que transfere e um componente colado é a parte que não transfere.

Não é uma estrutura de teste A/B e não promete um aumento. Abaixo de aproximadamente quarenta mil sessões por variante, um teste dividido não consegue separar um efeito real do ruído, o que é a maioria das lojas. O que essas mecânicas dão é a remoção de uma omissão conhecida, que não precisa de um teste para valer a pena.

Não vai, sozinho, tornar uma página bonita. references/design-laws.md carrega as regras de composição com as quais trabalhamos, mas a lacuna entre uma página correta e uma impressionante é principalmente fotografia, e nenhuma habilidade entrega isso.

---

Leitura relacionada

• Quebras de quantidade que aumentam o valor médio do pedido
• Onde colocar um upsell em uma página de produto
• Blocos de ecommerce shadcn: o que existe e o que falta
• Apps de upsell para Shopify, ou construa você mesmo

Irmãos

Esta habilidade cobre a página de produto. Duas outras cobrem o resto da visita:

• claude-code-checkout-upsell — qual upsell vai no carrinho, no checkout e após o pagamento: upsell de pedido, pós-compra em um clique, um cross-sell, barra de frete grátis.
• claude-code-ecommerce-dark-patterns — audita o resultado para os padrões que são ilegais na UE, Reino Unido e EUA, com a lei, um arquivo e uma linha, e a substituição honesta.

Construído por uxgen — o servidor MCP que entrega a um agente de codificação todo o ofício de vender: a ordem das seções, a fotografia, uma gramática travada e uma auditoria que rejeita uma página incapaz de gerar dinheiro. Esta habilidade é a parte que é gratuita.

MIT © 2026 uxgen