commerce-product-detail

Product Detail

Overview

A specialized skill for designing and generating product/service detail pages based on shadcn/ui. With conversion-maximizing strategies, it designs detail pages that match Naver Smart Store, Coupang, and Kakao Commerce specifications and generates HTML or Next.js+shadcn/ui React components.

Supported areas:

• E-commerce detail page design (Smart Store, Coupang, Kakao)
• SaaS product detail page (pricing plans, feature comparison, demo CTA)
• Service introduction page (consulting, education, subscription services)
• Mobile-first detail page (short-form style based on 375px)
• Theme consistency based on shadcn/ui components (simultaneously output Light/Dark)

Default stack

Layer	Default value	Notes
Own store/SaaS	Next.js 15 + Tailwind v4 + shadcn/ui	Automatically ensures Radix accessibility
Smart Store/Coupang	Single HTML + Tailwind CDN + shadcn CSS variables	Complies with platform upload specifications
Icons	Lucide React	Or SVG inline
Charts (price comparison, etc.)	Recharts	When selected in Interview Q5

Trigger keywords

detail page, product page, detail design, shopping mall detail, product detail, Smart Store detail, Coupang detail, Kakao detail, product description, product introduction page, detail planning, product planning, product page, detail design, product description page

Workflow

Step 0: shadcn theme interview (HARD)

Must be performed immediately before producing the code/design spec.

Q1: 베이스 팔레트 선택
- Neutral (기본) / Zinc / Stone / Slate

Q2: 컬러 모드 선택
- System+Toggle (기본) / Light / Dark / Auto

Q3: 모서리 반경 선택
- Balanced 0.5rem (기본) / Sharp / Soft / Pill

Q4: 효과 선택 (복수)
- Fade-up / Scroll Reveal / Parallax / Chart

If Chart is selected, choose the Q5 chart library (Recharts/Chart.js/Tremor/ECharts)

Step 1: Product analysis and target identification

Product analysis

• Check industry-average conversion rates by category (beauty 1.5-2.5%, electronics 0.8-1.5%)
• Create a FAB (Feature-Advantage-Benefit) conversion table
• Derive 3 differentiation points versus competing products

Target analysis

• Define 1 persona (name, age, occupation, pain points)
• Prioritize purchase decision factors (price/quality/brand/reviews/shipping)
• Identify the highest drop-off point in the purchase journey

Step 2: Page structure design

Structure reflecting 2026 trends:

• Short-form style: 1 scroll 1 message principle
• Mobile first: design based on 375px, then expand to desktop
• Video first: place a 30-second product introduction video in the hero
• Interactive elements: 360-degree product view, touch swipe gallery

8 required sections:

[1] 히어로/메인 이미지 갤러리 (제품 사진 + 영상)
[2] 제품 기본 정보 (가격, 재고, 평점, 옵션 선택)
[3] 탭 메뉴 (상세정보 | 후기 | FAQ)
[4] 상세정보 탭 (기능 목록, 스펙 테이블, 배송/반품)
[5] 후기 섹션 (평점 분포, 필터, 이미지 후기)
[6] FAQ 아코디언
[7] 관련 제품 추천
[8] 최종 CTA (장바구니 + 바로구매)

Step 3: Write copy for each section

Apply the AIDA formula

• Attention (0-3 sec): Number/adjective + core benefit header
• Interest (3-15 sec): Empathize with customer pain points + present the solution
• Desire (15-40 sec): Five-senses scenario + lifestyle connection
• Action (40-60 sec): Urgency + social proof + CTA

Apply the FAB formula

• Convert every Feature into an Advantage
• Convert every Advantage into a customer Benefit
• Write benefit-focused copy (do not list features)

Psychological trigger checklist

• Scarcity (limitedness): Show quantity/time limits
• Social proof: Sales volume, ratings, expert recommendations
• Urgency: Countdown, stock warnings
• Authority: Certifications, awards, patents
• Price psychology: Anchoring, loss aversion

Step 4: Define the design system (based on shadcn tokens)

Colors (shadcn OKLCH variable mapping)

• --primary → CTA button, purchase-driving points
• --destructive → Discount rate/limited-quantity badge
• --muted-foreground → Secondary information
• --background / --card → Section background hierarchy
• When overriding brand colors, --primary, --accent, --ringreplace only

Font

• Body: Pretendard 400 (16px/1.6)
• Heading: Pretendard 700 (24-32px)
• Price: Pretendard 800 (28-36px, --primary color)
• Discounted price: line-through + text-muted-foreground

Layout

• Mobile: 1 column, 16px left/right padding
• Tablet (768px~): 2-column grid
• Desktop (1024px~): Max 860px content area

Step 5: Code generation

Select output format

• HTML package (SmartStore/Coupang): index.html + style.css + script.js
• React/Next.js (own mall/SaaS): Component separation + components.json + app/globals.css

Apply platform-specific specifications

• SmartStore: 860px width, image-based detail (HTML mode)
• Coupang: 780px width, up to 9 images (HTML mode)
• Kakao: Mobile optimized, 375px baseline
• Own mall: Free responsive design (Next.js + shadcn mode)

Step 6: QA checklist

Feature verification

• Image gallery swipe/zoom works properly
• Price changes reflected when options are selected
• Tab switching works properly
• FAQ accordion open/close
• CTA button click event connected

Responsive verification

• Mobile (375px) layout OK
• Tablet (768px) layout OK
• Desktop (1280px) layout OK
• CTA button visible at all resolutions

Usage examples

• "Create a SmartStore humidifier detail page"
• "Plan a cosmetics detail page to upload to Coupang"
• "Create a SaaS product detail page with React"
• "Design a product detail page for Kakao Gift"
• "Create the entire health supplement product detail page copy + design + code"
• "Improve the conversion rate of the existing product detail page"
• "Create a mobile-only product detail page in short-form style"

Output format

Copy JSON structure

{
  "page_type": "commerce-product-detail",
  "platform": "smartstore|coupang|kakao|custom",
  "theme": {
    "system": "shadcn/ui",
    "base": "neutral",
    "mode": "system+toggle",
    "radius": "0.5rem",
    "effects": ["fade-up"],
    "chart_lib": null
  },
  "sections": [
    {
      "id": "hero",
      "headline": "10시간 지속 가습으로 아침 피부 촉촉",
      "subheadline": "초음파식 4.5L 대용량 가습기",
      "visual_direction": "제품 정면 + 미스트 연출 이미지"
    },
    {
      "id": "product-info",
      "price": "89,900",
      "original_price": "129,000",
      "discount_rate": "30%",
      "rating": "4.8",
      "review_count": "3,241",
      "options": ["화이트", "그레이", "민트"],
      "badges": ["무료배송", "당일출고"]
    }
  ]
}

Precautions

Core rule: copy integrity

Do not modify the copy text during the design/development stage.

• Implement the original copy as is
• If text modification is needed, return it to the copywriting stage
• Only line breaks, emphasis, and order changes allowed (content changes prohibited)

AI-generated content precautions

For empirical claims such as sales volume, ratings, and customer reviews included in AI-generated product detail page copy, you must replace them with real data. Using false figures as is constitutes a violation of the Act on Consumer Protection in Electronic Commerce and the Act on Fair Labeling and Advertising.

Troubleshooting

Symptom	Cause	Solution
Image exceeds platform specifications	Resolution/file size not checked	Refer to platform-specific specifications, resize image
Layout breaks on mobile	Uses fixed width	Apply max-width + percentage-based layout
Conversion rate below industry average	CTA position/copy not optimized	Improve A/B test items in order
Exaggerated advertising warning	Expressions violating the Food Sanitation Act/Medical Service Act	Check the prohibited expressions checklist

Related skills

• moai-marketer:marketing-landing-page — Landing page (standalone conversion purpose)
• moai-marketer:content-sns-content — Social media content
• moai-marketer:content-copywriting — Advertising copy
• moai-coworker:ai-slop-reviewer — Final deliverable AI slop review (Post-review, required)
• moai-writer:korean-humanize — Korean AI-ness removal (required after slop review)

When not to use this skill

• Blog posts/reviews: moai-marketer:content-blog Use skill
• SNS posting: moai-marketer:content-sns-content Use skill
• Landing page: moai-marketer:marketing-landing-page Use skill
• Writing advertising copy alone: moai-marketer:content-copywriting Use skill
• Catalog/list page: Not within the scope of this skill

References

File	Loading condition
references/product-detail/structure-guide.md	When designing the product detail page layout and design system (desktop/mobile structure)
references/product-detail/section-templates.md	When HTML/React code templates for each section, such as the hero, are needed
references/product-detail/platform-specs.md	When checking Smartstore/Coupang/Kakao image and upload specifications
references/product-detail/conversion-formulas.md	When AIDA-based conversion rate maximization formulas, copy, and checklists are needed