← 도구 생태계 디자인 · AI 워크플로

KEZ-ProductPage-skill

커머스 상세페이지를 Figma 캔버스에 직접 제작·수정하는 Claude Code 스킬. "리뷰 섹션 만들어줘"라고 말하면 Figma 공식 MCP로 실제 파일에 오토레이아웃 프레임을 그립니다. 디자인 규칙을 측정값이 아니라 원리로 정리해 어느 브랜드에든 색·서체만 꽂아 재사용합니다.

HarinJin MIT · 오픈소스 🇰🇷 한국 Claude Code 스킬 · Figma MCP ★ 23 ⭐ 별 주기
디자인AI 워크플로

🔍 에디터 리뷰

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/
KEZ-ProductPage-skill은(는) cmore.dev와 무관한 외부 프로젝트입니다. 소개와 리뷰는 "이런 게 있어요" 안내이지 보증이 아니며, 설치·사용에 대한 판단과 책임은 사용자에게 있습니다.