product-detail

Product Detail

Overview

A specialized skill for designing and generating product/service detail pages based on shadcn/ui. With a conversion rate maximization strategy, it designs detail pages that conform to 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 (simultaneous Light/Dark output)

Default stack

Layer	Default value	Notes
Own mall/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 code/design specifications.

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

When Chart is selected, choose 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 compared to 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: 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 conversion point
• --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: Generate code

Select output format

• HTML package (SmartStore/Coupang): index.html + style.css + script.js
• React/Next.js (own store/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 store: 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 is correct
• Tablet (768px) layout is correct
• Desktop (1280px) layout is correct
• 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 health supplement detail page copy + design + code all together"
• "Improve the conversion rate of the existing detail page"
• "Create a mobile-only detail page in short-form style"

Output format

Copy JSON structure

{
  "page_type": "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

Sales volume, ratings, customer reviews, etc. included in AI-generated detail page copy Empirical claims must be replaced with actual data. Using false figures as is constitutes a violation of the E-commerce Act and the Act on Fair Labeling and Advertising.

Troubleshooting

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

Related skills

• moai-content:landing-page — Landing page (standalone conversion purpose)
• moai-marketing:sns-content — Social media content
• moai-content:copywriting — Ad copy

When not to use this skill

• Blog posts/reviews: moai-content:blog skill use
• SNS posting: moai-marketing:sns-content skill use
• Landing page: moai-content:landing-page skill use
• Ad copy standalone writing: moai-content:copywriting skill use
• Catalog/list page: not within the scope of this skill