KEZ ProductPage Skill — Design skill for Claude Code

KEZ-ProductPage-skill

**커머스 상세페이지를 Figma 캔버스에 직접 제작·수정하는 Claude Code 스킬** (`detail-page-core`)

말로 요청하면("리뷰 섹션 만들어줘") Claude Code가 Figma 공식 MCP를 통해 실제 Figma 파일에 오토레이아웃 프레임을 생성·편집합니다. 디자인 규칙을 **측정값이 아니라 원리**로 정리한 디자인 시스템이 내장되어 있어, 어느 브랜드에든 그 브랜드의 색·서체를 꽂아 재사용할 수 있습니다.

▲ 이 히어로를 포함한 데모 페이지 전체를 **본 스킬 자신이 Figma에 제작**했습니다 (브랜드 프로파일: [`demo-browser-ui`](detail-page-core/references/brands/demo-browser-ui.md)). 섹션별 해설은 아래 [데모](#데모--이-스킬로-만든-페이지) 참조.

---

최근 업데이트

텍스트로 보기 (2026-09-03)

• 글자를 담는 그릇은 세로로 잠그지 않습니다 — 텍스트 컨테이너는 hug만 허용, 내용이 늘면 그릇이 따라 늘어납니다. 정본 실측에서 나온 잘림 사고 전부가 "세로 고정 그릇"에서 났습니다. (design-dna/08 §0·§7)
• 완료 전에 기계가 전수 검사합니다 — 세로·가로 넘침을 수치로 잡아내는 판정 함수가 생겼습니다. 스크린샷만으로는 잘린 글이 "원래 짧은 글"처럼 보이는 함정을 막습니다. (design-dna/08 §4)
• 역할 22종 사전 + 블록 33종 카탈로그 — 소구·캡션·마커·배지를 상대 관계로 판정하고, 크기 사다리와 색 배타성(회색은 각주 전용)으로 등급을 지킵니다. (design-dna/09 §1·§2·§4)
• 불릿이 첫 줄에 딱 붙습니다 — 마커를 본문과 같은 글자로 만들거나, 공식(래퍼높이 = 글자크기 × 행간)으로 정렬합니다. (SKILL 하드게이트)
• 그림자가 경계에 깎이면 무조건 반려 — 섀도는 그룹 래퍼에 한 번만, 마스크에 잘린 장식도 금지입니다. (SKILL 하드게이트)
• 카피를 두 등급으로 나눕니다 — 대충 봐도 읽혀야 할 문장과 집중해서 읽는 문장(카드 안 본문)을 구분해 크기를 정합니다. (03 §0)

이전 업데이트 (2026-08-06) 텍스트로 보기 (2026-08-06)

• 줄 넘김 스킬 업데이트 — 2줄이 넘어가는 제목일 경우 단어 단위로 줄을 넘겨줘요! 피그마의 한글 자동 줄바꿈은 단어 중간("…업데이트 했 / 습니다")을 잘라내는데, 이제 어절 경계에서만 넘깁니다.
• 어떻게 넘기나요 — ① 띄어쓰기 경계마다 위·아래 줄 폭을 피그마 안에서 실측 → ② 두 줄 다 폭 안에 들어가는 지점만 후보로 → ③ 폭 차이가 최소라도 말 덩어리를 가르면 반려 — "수확 시기" 같은 복합어, "몇 px인지"·"(가열·농축 없음)" 같은 따옴표·괄호 묶음은 함께 넘깁니