← ClaudeAtlas

detail-page-corelisted

커머스 상세페이지를 브랜드 프로파일 기반으로 Figma에 만들거나 수정하는 디자인 시스템 스킬. 색·조형·타이포·카���·섹션·이미지의 결정 규칙을 "값"이 아니라 "상대·조건 패턴"으로 정리했다. "상세페이지", "detail page", "상세페이지 만들어줘", "섹션 만들어줘", "리뷰 섹션", "개성 섹션", "장점 요약 섹션", "기능 설명 섹션", "FAQ 섹션", "성분표 섹션", "소개 메인페이지", "피그마로 상세", "피그마 상세페이지" 같은 요청에서 발동. Figma MCP(use_figma)로 실제 캔버스에 프레임을 생성·편집한다.
HarinJin/KEZ-ProductPage-skill · ★ 1 · AI & Automation · score 74
Install: claude install-skill HarinJin/KEZ-ProductPage-skill
# Detail Page Core (커머스 상세페이지 디자인 시스템) 이 스킬은 상세페이지 디자인을 **측정값이 아니라 원리**로 정리한 디자인 시스템이다. 두 층으로 나뉜다: - **브랜드 무관 패턴** (`design-dna/*`) — 색·조형·타이포·카피·페이지·이미지의 결정 규칙을 채도/명도/색조·위계·역할 같은 **상대·조건 규칙**으로. 어느 브랜드에도 적용된다. - **브랜드별 값** (`brands/<이름>.md`) — 그 패턴의 슬롯에 들어가는 실제 색 HEX·서체·규격 등. 브랜드마다 다르다. 이 값 묶음을 **브랜드 프로파일**이라 부른다. **작업은 항상 브랜드 프로파일을 지정해서 시작한다.** 유저가 어느 브랜드/제품인지 말하면 그 프로파일(`brands/<이름>.md`)을 연다. 색·서체를 정할 땐 `design-dna`(패턴) + `brands/<이름>`(값) 둘을 합친다. **이 SKILL.md는 라우터다.** 지금 하려는 일에 맞는 문서만 그때그때 연다. 전부 미리 읽지 않는다. ## 브랜드 프로파일 (작업 착수 시 반드시 확정) 작업할 브랜드의 프로파일이 `references/brands/`에 있으면 그것을 연다. **없으면 온보딩**: 1. `references/brands/_template.md`를 `references/brands/<브랜드이름>.md`로 복사한다. 2. 기존 상세페이지가 있으면 `design-dna/01-color.md` §5 절차로 실측해 슬롯을 채운다. 3. 실측만으로 안 정해지는 값(브랜드 대표색·톤·서체)은 **유저에게 확인**해 확정 후 기록한다. 4. **패턴만으로 HEX·폰트를 지어내지 않는다.** 값 미정 슬롯은 "미정"으로 표기하고 그 부분 제작을 보류한다. ## 라우팅 — 지금 하려는 일 → 열 문서 | 지금 하려는 일 | 열 문서 | |---|---| | **제작 착수 전** 확인/질문 (브랜드 프로파일 확정·레퍼런스 페이지 해독 포함, 필수 선행) | `references/00-interview.md` (레퍼런스 상세페이지 있으면 §1.5 실측 해독) | | **이 브랜드의 실제 색·서체 값** | `references/brands/<이름>.md` | | **색을 정하는 원리**(채도·명도·색조 패턴, 배경 대비, 강조) | `references/design-dna/01-color.md` (+ 값은 brands) | | **묶고 배치**(오토레이아웃·계층·그룹화, 왜 fill/stroke/round) | `references/design-dna/02-grouping-layout.md` | | **글자 크기·굵기·서체 역할** 위계 | `references/design-dna/03-typography.md` (+ 폰트 값은 brands) | | **카피의 길이·역할** | `references/design-dna/04-copy.md` | | **어떤 섹션을 왜** 넣을지·순서·구성 | `references/design-dna/05-page-purpo