product-configurator-design
정보
이 스킬은 제약 조건 로직, 실시간 가격 계산, 유효성 검사 등의 기능을 갖춘 인터랙티브 제품 구성기 설계를 위한 플레이북을 제공합니다. 개발자가 새로운 구성기의 범위를 설정하거나 전환율 저하나 사용자 이탈과 같은 문제를 해결할 때 도움을 줍니다. 이 가이드는 완전히 안내되는 구성부터 완전히 개방형 맞춤화에 이르기까지 실용적인 패턴을 다룹니다.
빠른 설치
Claude Code
추천npx skills add rampstackco/claude-skills -a claude-code/plugin add https://github.com/rampstackco/claude-skillsgit clone https://github.com/rampstackco/claude-skills.git ~/.claude/skills/product-configurator-designClaude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요
문서
Product Configurator Design
A senior product marketing director's playbook for designing build-your-own product configurators. Tesla-style vehicle configurators, custom-pricing builders, plan-builders, product customizers. Constraint logic, real-time pricing, validation, save-and-share mechanics. The discipline of building a configurator that produces configurations users actually commit to.
Most configurators fail in one of two ways. They expose every parameter at full granularity (47 toggles, 12 sliders) and produce decision paralysis; users abandon halfway through. Or they pretend to be configurators but are actually three pre-built bundles labeled "Custom"; the configurator framing was marketing while the product is bundles.
The configurators that work do something different. Smart defaults that produce a sensible starting configuration; meaningful constraints that prevent invalid combinations and surface why; escape hatches into deeper customization for users who want it; real-time pricing that responds to choices. Users feel guided rather than overwhelmed.
The voice is the senior product marketing director who has watched configurators double conversion when redesigned with smart defaults and watched them collapse when "more options" were added without constraint logic. Practical, opinionated about the constraints that protect users from themselves, willing to call out when canned bundles are the right answer.
When to use this skill: scoping a build-your-own configurator for the first time, auditing a configurator with high abandonment, designing the constraint logic that prevents invalid combinations, or deciding which parameters earn exposure vs which should default.
What this skill covers
This skill spans build-your-own product configurators. The growth-tooling distinctions:
calculator-designis calculators that give a number from inputs. This skill builds a product configuration with multiple decisions.comparison-tool-designis comparing known options. This skill builds a custom option.multi-step-form-designis data capture. This skill is configuration design.product-configurator-design(this skill) is constraint logic, real-time pricing, validation, save-and-share, and configurator-to-cart handoff.pm-spec-writingis the spec for engineers building the configurator.
The audience: product marketers, growth marketers, ecommerce teams, B2B teams shipping configurable products, agencies running configurator work for clients.
Out of scope: calculator design (covered by calculator-design); comparison tools (covered by comparison-tool-design); the engineering implementation; specific configurator-platform configurations (those stay implementation-side).
The configurator decision: when configurators earn investment vs when bundles suffice
Before designing the configurator, decide whether a configurator is the right answer.
Configurators earn investment when:
- The product has genuinely customizable parameters that affect outcome and cost.
- The audience values customization beyond what bundles offer.
- The team can support the configuration logic (validation, pricing, fulfillment).
- The combinatorial space is meaningful but constrained (not literally infinite).
Configurators do NOT earn investment when:
- The product is essentially bundles. Calling them "configurations" is marketing, not product.
- The audience does not value customization. Some audiences want to choose from curated options, not build.
- The combinatorial space is so large that no audience can navigate it.
- Customization produces invalid combinations the team cannot prevent.
- A simpler comparison or selection tool would serve.
The decision is not "should we have a configurator"; it is "is the configurator the right tool for this product and audience."
Detail in references/configurator-decision-criteria.md.
Infinite-options vs canned-bundles-only vs guided-configuration
The keystone framing.
Infinite-options. Every parameter exposed at full granularity. 47 toggle switches and 12 sliders. Decision paralysis. Users abandon halfway through; few complete a configuration. Cost: design effort produces a configurator nobody completes; conversion suffers.
Canned-bundles-only. "Configurator" that is actually three pre-built bundles labeled Basic/Pro/Enterprise. No real customization. The configurator framing was marketing; the product is bundles. Cost: audience that came expecting customization feels deceived; conversion suffers because expectations did not match reality.
Guided-configuration. Smart defaults that produce a sensible starting configuration; meaningful constraints that prevent invalid combinations; escape hatches into deeper customization for users who want it; real-time pricing that responds to choices. Cost: design effort upfront is significant; conversion typically improves meaningfully because users complete configurations they commit to.
The litmus test. Hand the configurator to a stranger in the target audience. Do they reach a configuration they would actually buy in under 5 minutes without expert help? If yes, guided-configuration. If they paralyze at the options, infinite-options. If they only see bundles, canned-bundles-only.
Default-configuration design
The starting point.
The principle. The configurator opens with a sensible default configuration. The user adjusts from there.
Default selection.
- The configuration most audiences would choose.
- Reflects audience research (sales-call mining, prior configurations).
- Inferable from referrer, query, or stated preference.
Default presentation.
- Default visible immediately; user sees a complete configuration with price.
- Adjust controls obvious; user knows what is changeable.
- Reset-to-default available; users who experiment can return.
The blank-canvas trap. Configurator opens empty; user must build from scratch. Decision paralysis at the start.
The cure. Default-heavy. The user adjusts; never builds from zero.
Detail in references/default-configuration-design.md.
Constraint logic
Preventing invalid combinations; surfacing why.
The principle. The configurator should not let users build invalid configurations (combinations that cannot ship, cannot be priced, or do not work together). When constraints engage, the configurator surfaces why.
Constraint patterns.
- Hard constraints. "Option A and Option B are incompatible." Configurator prevents the combination; explains why.
- Soft constraints. "Combining Option A with Option C is unusual but possible." Configurator allows; warns.
- Implication constraints. "Selecting Option A requires Option D." Configurator auto-includes D; explains.
- Capacity constraints. "This configuration exceeds shipping capacity." Configurator caps; explains.
Constraint communication.
- Why this constraint engaged.
- What user can do (different option, contact for custom).
- No friction-only blocking; always offer a path.
The over-constrained trap. Too many constraints; user feels boxed in.
The under-constrained trap. User builds configuration that fails at checkout or fulfillment.
Detail in references/constraint-logic-patterns.md.
Real-time pricing and impact display
Pricing that responds to choices.
The principle. Price updates as the user adjusts. The user sees the cost impact of each choice immediately.
Strong pricing display.
- Total price prominent and updated in real time.
- Per-choice impact visible ("Adds $X" or "Saves $X").
- Breakdown available ("How is this priced").
- Currency and locale appropriate.
Weak pricing display.
- Price hidden until the end.
- Per-choice impact invisible; user does not know what each option costs.
- Breakdown not available; total is opaque.
The price-shock trap. User configures heavily; reaches checkout; sees a price they did not expect; abandons.
The cure. Price visible throughout. No surprises at checkout.
Detail in references/real-time-pricing-patterns.md.
Validation and error patterns
When the configurator catches invalid input.
The principle. Validation should be helpful, not punitive.
Validation patterns.
- Inline validation. Error appears next to the invalid choice.
- Pre-emptive validation. Constraint logic prevents the error from being possible.
- Final validation. Pre-checkout review surfaces any remaining issues.
Error communication.
- Specific to the issue.
- Explains why.
- Offers a path (alternative option, contact for custom).
The validation-strict trap. Validation rejects valid edge-case inputs.
The validation-loose trap. Configurator accepts inputs that fail downstream.
Detail in references/validation-and-error-patterns.md.
Save-and-share mechanics
Configurations users return to or send to others.
The principle. Configurators that serve real decision-making produce configurations users want to save and share.
Save patterns.
- Email-link save. User enters email; configuration link emailed.
- Account-based save. Logged-in users save automatically.
- Anonymous-session save. Browser-based persistence.
Share patterns.
- Shareable URL. Configuration encoded in URL; share via any channel.
- Embed code. Configuration embeddable on other sites or in proposals.
- Email share. Direct email-to-recipient with configuration.
Why save-and-share matters.
- Multi-decision purchases require deliberation.
- B2B configurations often need stakeholder review.
- Returning users continue rather than restart.
Detail in references/save-and-share-mechanics.md.
Configurator-to-cart handoff
When the user commits.
The principle. Handoff from configurator to cart should preserve the configuration entirely.
Handoff patterns.
- Configuration becomes the cart item.
- Cart shows the configuration summary.
- Edit-from-cart returns to configurator with state preserved.
The handoff failure. Configuration partially preserved; cart shows a generic SKU; user cannot tell if their custom build is reflected.
The cure. Handoff loop closed. Configuration visible in cart; price matches; edits possible.
Detail in references/configurator-to-cart-handoff.md.
Common failure modes
Rapid-fire. Diagnoses in references/common-configurator-failures.md.
- "Users abandon halfway through configuration." Likely infinite-options pattern; too many decisions.
- "Configurator generates valid-looking configs that fail at fulfillment." Under-constrained; constraint logic missing.
- "Users complain about price surprises at checkout." Pricing not real-time or hidden until end.
- "Sales says many users contact for help configuring." Configurator too complex for audience; defaults wrong.
- "Users save configurations but do not return." Save mechanism works but follow-up missing.
- "Configurator works on desktop, breaks on mobile." Mobile UX broken.
- "Audience completes but conversion to purchase is low." Configurator works; commitment friction at handoff.
- "We added more options; abandonment climbed." Crossed the cognitive-load threshold.
- "Constraint engaged but user did not understand why." Communication broken; users feel arbitrarily blocked.
The framework: 12 considerations for configurator design
When designing or auditing a configurator, walk these 12 considerations.
- The configurator decision. Is configurator the right tool, or do bundles serve?
- Guided-configuration, not infinite-options or canned-bundles-only. Smart defaults plus meaningful constraints plus escape hatches.
- Default configuration sensible. User adjusts from default; does not build from zero.
- Constraint logic prevents invalid combinations. Hard, soft, implication, capacity constraints.
- Constraint communication clear. Why constraint engaged; what user can do.
- Real-time pricing visible. Price updates with choices; breakdown available.
- Validation helpful. Inline; specific; offers paths.
- Save-and-share works. Multi-session; shareable; B2B-friendly.
- Configurator-to-cart handoff preserves state. Cart shows configuration.
- Mobile parity. Configurator works on the devices the audience uses.
- Conversion as success metric. Not just completion rate; downstream purchase.
- Maintenance discipline. Configurations updated as product changes; quarterly audit.
The output of the framework is a configurator that earns the configuration that ships, with constraint logic, pricing, and handoff working together to produce commitments users keep.
Reference files
references/configurator-decision-criteria.md- When configurators earn the build vs when bundles serve.references/default-configuration-design.md- The starting point. Default selection and presentation.references/constraint-logic-patterns.md- Hard, soft, implication, capacity constraints. Communication patterns.references/real-time-pricing-patterns.md- Price updates with choices. Breakdown and impact display.references/validation-and-error-patterns.md- Helpful validation. Inline, pre-emptive, final.references/save-and-share-mechanics.md- Email-link, account, anonymous, shareable URL, embed.references/configurator-to-cart-handoff.md- Handoff that preserves configuration; cart visibility; edit-from-cart.references/configurator-anti-patterns.md- The patterns that look like configurators but degrade conversion.references/common-configurator-failures.md- 9+ failure patterns with diagnoses and cures.
Closing: configurators earn investment when they earn the configuration that ships
The configurators that work as compounding assets are the ones that produce configurations users commit to. Not 50-cell decision matrices. Not bundles dressed as configurators. Configurations the user built, priced, validated, saved, and bought.
That is the bar. Below the bar are infinite-options (decision paralysis; users abandon) and canned-bundles-only (configurator framing without real customization; users feel deceived). Above the bar are guided-configuration tools where smart defaults, meaningful constraints, real-time pricing, validation, and save-and-share work together to produce commitments.
The discipline is in the design choices. The decision to build a configurator at all. The default configuration that opens the experience. The constraint logic that protects users from invalid combinations. The pricing that updates with choices. The validation that helps without punishing. The save-and-share that supports multi-decision purchases. The cart handoff that preserves the configuration. The maintenance that keeps the configurator in sync with the product it represents.
GitHub 저장소
자주 묻는 질문
product-configurator-design Skill이란 무엇인가요?
product-configurator-design은(는) rampstackco이(가) 만든 Claude Skill입니다. Skill은 Claude가 필요할 때 불러오는 지침과 리소스를 묶어 추가 프롬프트 없이 product-configurator-design 관련 작업을 수행할 수 있게 합니다.
product-configurator-design은(는) 어떻게 설치하나요?
이 페이지의 설치 명령을 사용하세요. product-configurator-design을(를) Claude Code 플러그인으로 추가하거나 저장소를 skills 디렉터리에 복제한 다음 Claude를 다시 시작해 Skill을 불러옵니다.
product-configurator-design은(는) 어떤 카테고리에 속하나요?
product-configurator-design은(는) 메타 카테고리에 속합니다.
product-configurator-design은(는) 무료로 사용할 수 있나요?
네. product-configurator-design은(는) AIMCP에 등록되어 있으며 무료로 설치할 수 있습니다.
연관 스킬
이 스킬은 콘텐츠 콜렉션(Content Collections)을 위한 프로덕션 검증된 설정을 제공합니다. 콘텐츠 콜렉션은 Markdown/MDX 파일을 Zod 검증이 포함된 타입 안전한 데이터 콜렉션으로 변환해주는 TypeScript 최우선 도구입니다. 블로그, 문서 사이트 또는 콘텐츠 중심의 Vite + React 애플리케이션을 구축할 때 타입 안전성과 자동 콘텐츠 검증을 보장하기 위해 사용하세요. Vite 플러그인 구성과 MDX 컴파일부터 배포 최적화 및 스키마 검증에 이르기까지 모든 것을 다룹니다.
이 스킬은 개발자들이 Polymarket 예측 시장 플랫폼을 활용한 애플리케이션을 구축할 수 있도록 지원하며, 거래 및 시장 데이터를 위한 API 통합 기능을 포함합니다. 또한 WebSocket을 통한 실시간 데이터 스트리밍을 제공하여 실시간 거래와 시장 활동을 모니터링할 수 있습니다. 이를 통해 거래 전략을 구현하거나 실시간 시장 업데이트를 처리하는 도구를 생성하는 데 활용할 수 있습니다.
이 스킬은 개발자들이 명령어, 파일, LSP 작업 등 25개 이상의 이벤트 유형에 연결되는 OpenCode 플러그인을 만들 수 있도록 돕습니다. JavaScript/TypeScript 모듈을 위한 플러그인 구조, 이벤트 API 명세, 구현 패턴을 제공합니다. OpenCode AI 어시스턴트의 라이프사이클을 사용자 정의 이벤트 기반 로직으로 가로채거나, 모니터링하거나, 확장해야 할 때 사용하세요.
SGLang은 RadixAttention 프리픽스 캐싱을 활용하여 JSON, 정규식, 에이전트 워크플로우를 위한 고속 구조화 생성에 특화된 고성능 LLM 서빙 프레임워크입니다. 특히 반복되는 프리픽스가 있는 작업에서 상당히 빠른 추론 속도를 제공하여 복잡한 구조화 출력 및 다중 턴 대화에 이상적입니다. 제약 디코딩이 필요하거나 광범위한 프리픽스 공유가 있는 애플리케이션을 구축할 때는 vLLM과 같은 대안보다 SGLang을 선택하십시오.
