Claude Code 레퍼런스→시안 스킬 — "레퍼런스 사이트로 디자인 라이브러리 만들고 레이아웃 만들어줘" (ref-to-layout)

스킬 파일 제공

구매하시면 SKILL.md, 레퍼런스 캡처 도구(capture/), 디자인 시스템·프로토타입 골격(scaffold/), 골격 생성·검수 스크립트, 실전 노트, 설치 안내 README 가 담긴 압축 파일을 받으실 수 있습니다. ~/.claude/skills/ 에 폴더째 두면 자동으로 인식됩니다.

ref-to-layout.zip 다운로드

Claude Code 레퍼런스→시안 스킬 —

왜 만들었나

고객이 "이 사이트처럼 해 주세요"라며 참고 사이트 두세 곳과 기획안을 보내면, 보통은 스크린샷을 옆에 띄워 놓고 눈대중으로 비슷하게 만듭니다. 그러면 색·간격·라운드가 화면마다 조금씩 어긋나고, 수정 요청이 올 때마다 페이지를 하나씩 고쳐야 합니다. A안·B안을 같이 보여 주려면 일이 두 배가 됩니다.

이 스킬은 순서를 바꿉니다. 참고 사이트를 먼저 실측 토큰과 컴포넌트 라이브러리로 뜯고, 고객 브랜드로 토큰만 바꾼 뒤, 컴포넌트만으로 화면을 조립합니다. 실제 커머스 리뉴얼 시안 프로젝트에서 이 순서로 작업해 고객에게 A/B 두 안을 보여 주고 바로 피드백을 받았습니다.

무엇을 하나

계획서 — 의뢰 자료·기획안·고객 시안을 읽고 레퍼런스별 역할 표, 두 안 표, 진행 상태 표를 만듭니다.
레퍼런스 확보 — 브라우저 창 없이 오프라인 미러, PC 1440·모바일 390 풀페이지 스크린샷, 클래스·색·라운드·그림자 빈도 통계를 뽑습니다. 빈도 상위 값이 곧 토큰이 됩니다.
고객 디자인 시스템 — prefix 하나로 토큰 CSS·컴포넌트 CSS·쇼케이스·문서를 만듭니다. 값마다 출처(레퍼런스 실측/기획안)를 주석으로 남깁니다.
A/B 시안 — 셸 생성기가 페이지 × 두 안의 HTML을 만들고, 공용 JS가 헤더·사이드바·모바일 드로어·하단 탭·푸터를 넣습니다. 페이지 렌더러는 본문만 그립니다. A안은 고객이 그린 그대로, B안은 제안안입니다.
핵심 흐름 시연 — "비로그인으로 상품 고르기 → 로그인 → 결제 화면에 고른 값 복원 → 30분 지나면 만료 안내" 같은 흐름을 정적 파일만으로 실제 동작시킵니다. 미팅용 시연 바(다른 안 보기·로그아웃·만료·초기화)가 들어 있습니다.
검수 — 전 페이지를 1440·390으로 열어 가로 넘침과 레이아웃 주입을 확인하고, 핵심 흐름을 E2E로 시험합니다.

실측

골격 생성 한 줄로 6페이지 × A/B = HTML 12개, 디자인 시스템 시작본, 선택 화면이 만들어집니다.
검수 스크립트 한 번에 24회 렌더(12페이지 × PC·모바일) + 흐름 E2E 3단계를 확인합니다.
판매본은 빈 홈 폴더에 새로 설치해 골격 생성 → 검수 → 레퍼런스 미러 → 스크린샷까지 실행해 확인했습니다.

만들어지는 것

구매 후 전체 프롬프트 확인 가능

유료 프롬프트의 전문과 복사용 프롬프트는 구매자에게만 제공됩니다. 공개 본문에서는 구성, 활용 범위, 업데이트 내역만 확인할 수 있습니다.

구성

파일	내용
SKILL.md	계획서 → 레퍼런스 → 디자인 시스템 → A/B 시안 → 검수 → 공유 → 피드백 루프
capture/	mirror.py · shot.mjs · analyze.py, 미러 함정 모음, 디자인 시스템 산출물 뼈대
scaffold/	디자인 시스템 시작본 + 프로토타입 골격(모바일 드로어·하단 탭·가로 스크롤·시연 바 포함)
scripts/new.sh	새 프로젝트에 골격 깔기(prefix·브랜드명 치환, 기존 파일은 덮어쓰지 않음)
scripts/qa.mjs	전 페이지 1440·390 검수 + 핵심 흐름 E2E
references/lessons.md	실전에서 받은 고객 피드백과 CSS·캐시 함정

설치

mkdir -p ~/.claude/skills
unzip ref-to-layout.zip -d ~/.claude/skills/
# Claude Code 에서: "이 사이트 참고해서 디자인 라이브러리 만들고 우리 브랜드로 시안 만들어줘"

요구 사항

Claude Code
Google Chrome(헤드리스로만 씀, 창이 뜨지 않음), Node.js 22 이상, Python 3, curl — 추가 패키지 설치 없음
macOS 기준 경로. Linux·Windows는 스크립트 안 Chrome 경로만 바꾸면 됩니다.

참고 사이트의 카피·이미지·로고는 원 사이트 저작물입니다. 이 스킬은 구조와 수치만 가져오고 콘텐츠는 고객 것으로 바꾸도록 안내합니다.