| name | detail-page-core |
| description | 커머스 상세페이지를 브랜드 프로파일 기반으로 Figma에 만들거나 수정하는 디자인 시스템 스킬. 색·조형·타이포·카피·섹션·이미지의 결정 규칙을 "값"이 아니라 "상대·조건 패턴"으로 정리했다. "상세페이지", "detail page", "상세페이지 만들어줘", "섹션 만들어줘", "리뷰 섹션", "개성 섹션", "장점 요약 섹션", "기능 설명 섹션", "FAQ 섹션", "성분표 섹션", "소개 메인페이지", "피그마로 상세", "피그마 상세페이지" 같은 요청에서 발동. Figma MCP(use_figma)로 실제 캔버스에 프레임을 생성·편집한다. |
Detail Page Core (커머스 상세페이지 디자인 시스템)
이 스킬은 상세페이지 디자인을 측정값이 아니라 원리로 정리한 디자인 시스템이다. 두 층으로 나뉜다:
- 브랜드 무관 패턴 (
design-dna/*) — 색·조형·타이포·카피·페이지·이미지의 결정 규칙을 채도/명도/색조·위계·역할 같은 상대·조건 규칙으로. 어느 브랜드에도 적용된다.
- 브랜드별 값 (
brands/<이름>.md) — 그 패턴의 슬롯에 들어가는 실제 색 HEX·서체·규격 등. 브랜드마다 다르다. 이 값 묶음을 브랜드 프로파일이라 부른다.
작업은 항상 브랜드 프로파일을 지정해서 시작한다. 유저가 어느 브랜드/제품인지 말하면 그 프로파일(brands/<이름>.md)을 연다. 색·서체를 정할 땐 design-dna(패턴) + brands/<이름>(값) 둘을 합친다.
이 SKILL.md는 라우터다. 지금 하려는 일에 맞는 문서만 그때그때 연다. 전부 미리 읽지 않는다.
브랜드 프로파일 (작업 착수 시 반드시 확정)
작업할 브랜드의 프로파일이 references/brands/에 있으면 그것을 연다. 없으면 온보딩:
references/brands/_template.md를 references/brands/<브랜드이름>.md로 복사한다.- 기존 상세페이지가 있으면
design-dna/01-color.md §5 절차로 실측해 슬롯을 채운다.
- 실측만으로 안 정해지는 값(브랜드 대표색·톤·서체)은 유저에게 확인해 확정 후 기록한다.
- 패턴만으로 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-purpose.md |
| 사진(삽입방식·블렌드·거리·크기) | references/design-dna/06-image-treatment.md |
| 이미지 배치 의도(자료이미지 판독·모방요소 추출 / 자르기=대상 강조·전경 vs 채우기=배경 무드·후경) | references/design-dna/07-image-placement.md |
| 실제 제작 순서·재사용 코드(말풍선·강조·카드·블렌드) | references/build-recipes.md |
| use_figma API 규칙·읽기전략 | references/figma-mcp.md |
| 에러·이상 렌더 발생 시 증상→해법 색인 | references/troubleshooting.md |
| 서브에이전트 병렬 제작·감독(웨이브·프롬프트 템플릿·재배치) | references/orchestration.md |
| 새 브랜드 프로파일 만들기 | references/brands/_template.md (+ 도출 절차 design-dna/01 §5) |
design-dna(01~07)="무엇을/왜"(브랜드 무관 패턴), brands="값"(브랜드별), build-recipes·figma-mcp="어떻게"(제작·API). 색·서체는 패턴+값을 합쳐 결정한다.
이 스킬의 산출은 Figma 캔버스까지다 — export/슬라이싱/플랫폼 업로드는 스코프 밖(파생 채널 프레임 제작은 build-recipes.md §4c).
하드 게이트 — 완료 전 반드시 전수 확인하는 수치 규칙
오토레이아웃은 잘 지켜지는데 그 외 수치 규칙이 생성 중 자주 무시된다. 아래는 "그때 문서를 열면 나오는" 값이 아니라, 매 섹션 자가검증(절대규칙 4·작업흐름 3d)에서 get_metadata+get_screenshot으로 전수 대조하는 하드 게이트다. 하나라도 위반이면 완료가 아니다. 상세 근거는 괄호 안 ref. (면적·비율 기준이라 브랜드·아트보드가 바뀌어도 그대로 적용.)
이 표가 수치 상수의 정본(SSOT)이다. design-dna 본문은 같은 수치의 근거(왜)를 설명하며, 값이 바뀌면 이 표와 함께 바꾼다(불일치 시 이 표 우선). 각 문서의 체크리스트류는 값을 재서술하지 말고 이 표를 참조한다. (예외: orchestration.md §2 빌더 프롬프트 템플릿은 복붙용 자기완결 블록이라 값을 인라인한다.)
절대 지킬 규칙
1. 브랜드 프로파일 확정 + 인터뷰 선행 — 추측 금지
착수 전 반드시 어느 브랜드인지 확정하고 그 brands/<이름>.md를 연다. 프로파일이 없거나 값이 미정이면 유저에게 색·서체를 받아 프로파일을 먼저 채운다. 이어 00-interview.md로 나머지 입력을 확인한다. 이 시스템의 규칙은 전부 상대 규칙이라 입력(브랜드 값, 제품 대표색, 카피 확정본, 섹션 범위, 리뷰 자산)이 없으면 값이 정해지지 않는다. 불확실하면 유저에게 질문한다. 절대 추측 금지 3종: 법정 고지문, 리뷰 콘텐츠, 미확정 카피. 브랜드 색·폰트도 패턴만으로 지어내지 않는다.
2. 낯선 조형은 분석 후 구현 — 눈대중 치환 금지
레퍼런스에 이 시스템에 없는 조형(말풍선·배지 등)이 있으면 익숙한 패턴으로 때우지 않는다. 고해상도로 재조회해 도형 구성을 분석하고, 애매하면 유저에게 의도를 확인한 뒤 만든다(→ build-recipes.md §2, 00-interview.md §3). 색만 바꾼 게 아니라 형태 자체가 같은 조형 문법인지 대조한다.
3. 한 번에 한 구간만 (순차 기본)
제작은 한 섹션(또는 한 페이지)씩. 완료하면 get_metadata+스크린샷으로 검증 → 유저 확인 → 다음. 여러 섹션 몰아 만들지 않는다(독립 섹션 병렬 use_figma는 성능상 허용). 전체 신규를 병렬 제작할 땐 이 규칙 대신 orchestration.md 웨이브 절차를 따른다 — 그 모드의 유저 확인 게이트는 섹션마다가 아니라 (i) 스켈레톤 승인(규칙 5)과 (ii) 최종 전체 스트립 검수 시점이다.
4. 구조 정돈 없이 완료 보고 금지
의미단위(이미지+캡션, 강조어+배경 등)는 서브프레임/그룹으로 묶어 중첩 오토레이아웃으로(→ 02 §2). 네이밍·흰배경·오토레이아웃 규칙은 위 하드 게이트 참조. 완료 전 get_metadata+스크린샷 자가 검증(→ build-recipes.md §1).
5. 전체 신규는 스켈레톤 우선 (+ 이미지 주인공 판정 선행)
전체 신규 제작이면 세부 전에 섹션별 빈 placeholder로 전체 구성을 그려 승인받는다(→ design-dna/05 + build-recipes.md §5). 부분 수정이면 생략.
스켈레톤 착수 前에 반드시 design-dna/05 §0.5로 페이지 아키타입(감각 설득형=이미지 주인공 / 정보 설득형=텍스트 주도)을 판정한다. 감각형이면 시각 히어로 구간(§1-15)의 세로 공간을 텍스트보다 먼저 예약한 뒤 그 사이에 텍스트 섹션을 채운다 — 텍스트를 먼저 다 채우고 이미지를 남는 자리에 끼우면 세로가 텍스트로만 차고 템포가 죽는다.
작업 흐름
0. 브랜드 프로파일 확정 → brands/<이름>.md 로드(없으면 _template 복사·채움, 값 미정이면 유저에게 받음)
1. 인터뷰(00-interview) → 나머지 입력 확보, 불확실하면 질문. 낯선 조형은 의도 확인.
2. [전체 신규만] 스켈레톤(05 + build-recipes §5) → 승인
3. 섹션별로:
a. 05-page-purpose에서 이 섹션의 역할·필수요소 확인
b. 결정: 색(01 패턴 + brands 값) / 조형·배치(02) / 타이포(03 + brands 폰트) / 카피(04) / 사진(06)
c. build-recipes 절차·코드로 use_figma 제작 (figma-mcp API 규칙 준수)
d. get_metadata + screenshot 검증(수치·네이밍·계층·흰배경·블렌드·겹침 **+ 하드 게이트 전수**)
e. 유저 확인 → (승인) 다음 섹션
(반려) 피드백을 결정 슬롯(색/조형·배치/타이포/카피/사진)으로 분류 → 3b 재결정 → 3c 재제작
→ 3d 재검증. 입력 자체(브랜드 값·카피·섹션 범위)가 바뀌면 1(인터뷰)로 돌아가 갱신.
4. 전체 조립 검증(모든 섹션 완료·수정 후 — 순차·병렬 공통):
최종 재배치 → 전체 스트립 스크린샷(troubleshooting T12)으로 밴드 리듬(색·높이 교대)·
액센트 반복 빈도·인접 섹션 템포·배경 톤 연속성 확인. 부분 수정은 고친 섹션 ± 앞뒤 1섹션 스트립만.
한 줄 원칙
- 브랜드마다 색·서체 "값"이 다르고, 패턴은 고정이다. 색은
01(패턴)+brands(값)로 정한다.
- 색은 배경이 결정한다(밝은 배경=채도로, 사진·어두운 배경=명도/고명도로) (→ 01·06).
- 조형은 역할의 신호다(강조 CTA=박스 없음, 정보=테두리+구분선, 격리 샘플=면+테두리+라운딩, 말풍선=꼬리) (→ 02).
- 위계는 크기+굵기 점프로(같은 색 안에서), 서체 역할 전환은 톤 전환 신호 (→ 03).
- 사진은 깡으로 넣지 않는다 — 역할 판정 후 블렌드/거리/삽입방식 결정 (→ 06).
- 모든 수치·판단은 실측/확정 근거가 있어야 한다. 없으면 만들지 말고 유저에게 묻는다.
