KEZ-ProductPage-skill
커머스 상세페이지를 Figma 캔버스에 직접 제작·수정하는 Claude Code 스킬. "리뷰 섹션 만들어줘"라고 말하면 Figma 공식 MCP로 실제 파일에 오토레이아웃 프레임을 그립니다. 디자인 규칙을 측정값이 아니라 원리로 정리해 어느 브랜드에든 색·서체만 꽂아 재사용합니다.
🔍 에디터 리뷰
cmore가 저장소를 직접 열어보고 써본 뒤 남긴 사용기입니다. 광고·협찬이 아닙니다. 검증일: 2026-07-29 기준의 기록이며, 도구는 계속 바뀝니다.
클론해서 ~/.claude/skills/에 설치하고 문서 13개 1,867줄을 전부 읽었습니다. 실행 코드가 0줄인 순수 마크다운인데 밀도가 상당해요. 구조가 두 층입니다 — design-dna에는 HEX·px이 아예 없고 채도·명도·색조 관계와 위계 규칙만 있고, brands/<이름>.md가 그 슬롯에 실제 값을 꽂습니다. 그래서 브랜드가 바뀌어도 패턴이 그대로 재사용돼요. 압권은 하드 게이트 13개입니다. 본문 폰트 ≥ 캔버스폭 4.5%, 텍스트 컨테이너 ≤ 84%, 히어로 세로 ≤ 3000px에 텍스트 점유는 면적 12~20%, 그림자 기본 0, 임의색 0 — 전부 절대 px이 아니라 비율·면적 기준이라 아트보드가 바뀌어도 성립하고, 매 섹션 완료 전에 get_metadata+스크린샷으로 전수 대조하게 만듭니다. 트러블슈팅 T1~T15는 Figma Plugin API를 에이전트로 두들기다 실제로 터진 함정(textAutoResize 순서, 한글 셀렉터 미지원, layoutAlign silent 리셋, 부모 resize가 자식을 8.6배로 키운 사고)을 증상→해법으로 축적한 거라 이것만 따로 읽어도 값어치가 있어요.솔직히: 코드가 없다는 건 규칙을 강제할 런타임도 없다는 뜻이라, 게이트를 실제로 전수 대조하는지는 모델 성실성에 달렸습니다. Figma 공식 MCP의 use_figma가 베타라 결과를 매번 스크린샷으로 재검증해야 하고, 860px 세로 캔버스·폭 대비 4.5% 같은 값은 한국 커머스 상세페이지 관습에 맞춰진 거라 데스크톱 랜딩엔 그대로 안 맞습니다. 저희 환경엔 Figma MCP가 없어 캔버스 제작까지는 검증하지 못했고, 문서·구조까지가 확인 범위입니다.
🔬 소스를 열어 뜯어봤어요
설치법 너머로, 이 도구가 무엇을 근거로 판단하고 어떻게 검증하는지 소스를 직접 열어 정리한 분석 기록입니다.
설치하기
아직 개발환경(터미널·Git·Node 등)이 없다면 lazy-starter-kit으로 먼저 준비하고 오세요.
Claude Code + Figma 계정 + 공식 원격 MCP 등록(claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp)이 전제입니다. 첫 사용 시 브라우저 OAuth가 필요하고, use_figma는 베타라 결과 검증 절차가 스킬에 내장돼 있습니다.
git clone https://github.com/HarinJin/KEZ-ProductPage-skill.git
cp -r KEZ-ProductPage-skill/detail-page-core ~/.claude/skills/
함께 볼 도구
beautify-github-readme
저장소 README를 그 프로젝트다운 한 장으로 다시 짜주는 에이전트 스킬. 시각은 SVG, 내용은 마크다운으로 층을 나눠서, 페이지 전체를 이미지로 굽지 않고도 디자인된 첫 화면을 만듭니다. 전체 개편·에셋만 제작·읽기 전용 감사 세 모드로 나뉘어 있고 커밋·푸시는 승인 없이는 하지 않습니다.
리뷰·설치법 보기 → 디자인hallmark
AI가 만든 티가 나는 디자인(AI 슬롭)을 거부하도록 설계된 Claude Code·Cursor·Codex용 디자인 스킬. 매크로구조 21종과 테마 20종을 로테이션시키고, 57개 슬롭 테스트 게이트로 '어디서 본 듯한 AI 랜딩페이지' 패턴을 걸러냅니다. Together AI가 만들었어요.
리뷰·설치법 보기 → 디자인Skills
Codex·Claude·Cursor 같은 AI 코딩 에이전트에 붙여 쓰는 디자인·프론트엔드 스킬 모음. 레퍼런스를 프롬프트로 바꾸고, 랜딩페이지·인터랙션·프론트엔드 워크플로를 만들 때 에이전트가 따를 절차서(SKILL.md)를 제공합니다. Design+Code 창립자 MengTo가 정리한 75개 스킬.
리뷰·설치법 보기 →
HarinJin