uxgen

스토어, 제품 페이지 및 랜딩 페이지 디자인을 위한 Claude Code 스킬

여러분의 에이전트는 이미 아름다운 제품 페이지를 만들 수 있습니다. 하지만 이 제품에 티어 목록, 번들, 주문 범프 또는 그 중 아무것도 없어야 하는지 알려줄 수는 없습니다 — 그래서 스테퍼와 스톡 사진을 만들고, 페이지는 돈을 벌지 못합니다.

이 스킬이 바로 그 결정을 내립니다. 판매자의 제품을 읽고 어떤 판매 메커니즘이 페이지에 속하는지, 어떤 순서로 배치해야 하는지, 각각의 이유와 함께 네 가지 참조 컴포넌트와 이를 규율하는 EU 규정을 도출합니다.

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

Claude Code, Codex, Cursor 및 Agent Skills 형식을 읽는 모든 에이전트와 함께 작동합니다. Claude Code에서는 플러그인으로 설치할 수도 있습니다:

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

MIT. 컴포넌트에는 React 외에 의존성이 없습니다. 어떤 것도 외부로 전송되지 않습니다.

---

스토어를 건드리기 전에 감사하세요

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

의존성 없음, 읽기 전용, 아무것도 쓰지 않습니다. 이 스킬이 방지하려는 결함을 파일, 줄, 이유와 함께 찾아냅니다:

• 명명된 티어가 있어야 할 곳에 있는 수량 스테퍼
• 사전 체크로 시작할 수 있는 애드온 — EU 법에 따라 환불 가능
• 조작된 평점, 리뷰 수, "12명이 보고 있음" 또는 "3개 남음"
• 단가에서 파생되지 않은 취소선 가격
• Date.now()에서 시드된 카운트다운 — 새로고침 시 리셋됨
• 소스에 남아 있는 플레이스홀더 카피
• 네 가지 메커니즘 중 코드베이스에 완전히 없는 것

--json는 기계 출력용, --strict은 CI 작업을 실패시키는 용도입니다.

---

스킬이 실제로 하는 일

1. 붙여넣기 대신 결정합니다

스킬의 핵심은 결정 테이블입니다. 제품에 대한 일곱 가지 질문 — 단일 품목인지 카탈로그인지, 충동 구매인지 신중한 구매인지, 실물인지 디지털인지, 소모품인지 내구재인지, 변형, 만료, 가격대 — 그리고 그 답변에서 어떤 메커니즘이 여기에 속하고 어떤 것이 속하지 않는지 결정합니다.

각 규칙은 이유를 담고 있으며, 이는 테이블이 본 적 없는 제품에도 사용할 수 있게 만듭니다:

조건	결과	이유
내구재	수량 분할 없음	아무도 램프 두 개가 필요하지 않습니다; 티어는 자신의 제품을 이해하지 못한 상점처럼 보입니다
n주 후 만료	상위 티어를 n 이내로 제한	이 주에 상하는 것을 여섯 개 사면 환불과 영구적인 리뷰가 발생합니다
신중한 가격대	가격 이전에 증거와 보증	질문은 몇 개가 아니라 아예 살지 말지입니다 — 가격을 먼저 보여주면 가격이 대화의 전부가 됩니다
디지털	무료 배송 바 절대 없음	배송되는 것이 없습니다; 다운로드에 배송 바를 넣는 것은 진행 애니메이션이 있는 거짓말입니다
변형이 신체 사이즈	수량 분할 없음	한 사람은 한 사이즈를 입습니다
단일 제품	두 배로 하는 것이 논리적인 경우에만 두 배로, 그렇지 않으면 없음	정직한 보완재가 없는 상점이 하나를 만들어내면 구매자가 원하지 않는 것을 장바구니에 넣습니다

그런 다음 섹션을 정렬합니다 — 순서는 제품에 따라 다릅니다. 충동 구매는 증거보다 가격을 먼저, 신중한 구매는 가격보다 증거를 먼저 둡니다. 같은 컴포넌트, 반대 페이지, 그리고 그 이유는 테이블에 있습니다.

2. 취향이 아니라 법인 규칙을 담고 있습니다

• 애드온을 사전 체크하지 마세요. 지침 2011/83/EU 제22조는 주요 의무를 넘어선 모든 지불에 명시적 동의를 요구하며, 소비자가 거부해야 했던 기본값에서 추론된 지불을 환불 가능하게 만듭니다. 여러 상업용 업셀 위젯은 공장 기본값으로 사전 체크된 상태로 배송됩니다.
• 취소선 가격을 조작하지 마세요. 지침 (EU) 2019/2161로 개정된 지침 98/6/EC에 따라 앵커는 실제로 적용된 가격이어야 합니다: compareAtCents = unitPriceCents × units, 그 외에는 아무것도 아닙니다.
• 증거를 생성하지 마세요. 아무도 얻지 못한 평점, 리뷰 수, 시청자 카운터 또는 카운트다운은 배송되는 순간 지침 2005/29/EC에 따른 불공정 상거래 관행입니다. 스킬은 슬롯을 만들고 비워 둡니다.

3. 구축할 네 가지 컴포넌트를 제공합니다

React, 의존성 없음, MIT. 각각은 규칙을 코드로 담고 있으며, 개발 중에 조용히 결함을 배송하는 대신 오류를 던지는 가드레일이 있습니다.

컴포넌트	구매자에게 묻는 것	위치
수량 분할	몇 개가 아니라 어떤 패키지인지	제품 페이지
무료 배송 바	임계값까지 얼마나 남았는지, 금액으로	장바구니
주문 범프	하나의 보완재, 예 또는 아니오, 체크되지 않음	장바구니, 합계 위
고정 장바구니 담기	아무것도 묻지 않음 — 계속 접근 가능하게 유지	모바일 제품 페이지

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

---

다른 것을 읽지 않아도 되는 하나의 규칙

수량 분할은 명명된 티어의 라디오 그룹입니다. 절대 숫자 입력이 아닙니다.

스테퍼는 몇 개를 묻습니다 — 구매자가 수행하는 산술로, 두 개가 하나보다 낫다는 것을 암시하는 것은 없습니다. 명명된 패키지의 라디오 그룹은 어느 것을 묻고, 그중 하나는 눈에 띄게 합리적인 선택입니다.

이 단일 실수는 생성된 스토어프론트에서 가장 흔한 것입니다.

---

이 저장소가 존재하는 이유

2026년 8월 25일, 우리는 웹 검색이 활성화된 ChatGPT와 Perplexity에게 buy 2, save 15%용 React 컴포넌트를 요청했습니다.

ChatGPT는 수량 스테퍼를 반환했고 출처를 전혀 인용하지 않았습니다. Perplexity도 스테퍼를 반환했으며, min, max, step 및 bundleSize prop과 함께 일반적인 수량 선택기 패턴을 인용했습니다.

둘 다 같은 방식으로 틀렸고, 그 이유가 유용한 부분입니다: 그들이 참고할 표준 출처가 없습니다. tiered pricing component을 검색하면 결과는 가격 테이블에 관한 것입니다. order bump component를 검색하면 스토어 플러그인에 관한 것입니다. bundle quantity selector component react를 검색하면 JavaScript 번들 크기에 관한 것입니다.

상거래 메커니즘에는 공개 웹에 사양이 없으므로, 모델은 천 번 읽은 가장 가까운 것으로 돌아갑니다.

이 저장소가 바로 그 사양입니다.

---

상자 안에 있는 것

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

---

이것이 아닌 것

컴포넌트 라이브러리가 아니며, 설치한다고 페이지가 블록으로 채워지지 않습니다. 결정과 규칙을 가르치고 구축할 네 가지 구현을 제공합니다. 판단이 전수되는 부분이고 붙여넣은 컴포넌트는 전수되지 않는 부분이기 때문입니다.

A/B 테스트 프레임워크가 아니며 향상을 약속하지 않습니다. 변형당 약 4만 세션 미만에서는 분할 테스트가 실제 효과와 노이즈를 구분할 수 없으며, 이는 대부분의 스토어에 해당합니다. 이 메커니즘이 제공하는 것은 알려진 누락의 제거이며, 테스트 없이도 할 가치가 있습니다.

그 자체로 페이지를 아름답게 만들지는 않습니다. references/design-laws.md에는 우리가 작업하는 구성 규칙이 담겨 있지만, 정확한 페이지와 인상적인 페이지 사이의 간격은 대부분 사진이며, 어떤 스킬도 그것을 제공하지 않습니다.

---

관련 자료

• 평균 주문 가치를 높이는 수량 분할
• 제품 페이지에서 업셀을 배치할 위치
• shadcn 전자상거래 블록: 존재하는 것과 누락된 것
• Shopify용 업셀 앱, 또는 직접 구축

자매 스킬

이 스킬은 제품 페이지를 다룹니다. 다른 두 개는 방문의 나머지 부분을 다룹니다:

• claude-code-checkout-upsell — 장바구니, 결제 및 결제 후에 어떤 업셀이 들어가는지: 주문 범프, 원클릭 구매 후 업셀, 하나의 교차 판매, 무료 배송 바.
• claude-code-ecommerce-dark-patterns — EU, 영국 및 미국에서 불법인 패턴에 대해 결과를 감사하며, 법률, 파일, 줄 및 정직한 대체안을 제공합니다.

uxgen이 구축 — 코딩 에이전트에게 판매의 전체 기술을 제공하는 MCP 서버: 섹션 순서, 사진, 고정된 문법, 그리고 돈을 벌지 못하는 페이지를 거부하는 감사. 이 스킬은 무료로 제공되는 부분입니다.

MIT © 2026 uxgen