design-ref
참조: $ARGUMENTS
1. 참조 캡처
URL: 공유된 도구 키트로 1440과 375에서 스크린샷을 찍은 후 시트를 읽습니다.
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
--inject를 사용하거나 ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs(launch() → navigate() → evaluate())를 가져오는 일회성 CDP 스크립트를 사용하여 계산된 스타일을 가져옵니다. body, h1–h3, p, a, button, 기본 CTA, 카드, 아이브로우/킥커, 입력 필드, 푸터의 getComputedStyle을 샘플링합니다. font-family/size/weight/line-height/letter-spacing, color, background, border-radius, box-shadow, padding 및 gap을 수집합니다.
붙여넣은 HTML / 이메일: /tmp/design-ref/ref.html에 저장하고 render-html.mjs로 렌더링한 후 인라인 스타일을 직접 읽습니다.
2. 시스템 추출
- 색상 역할: 캔버스, 표면, 잉크, 희미한 잉크, 강조, 강조-잉크, 테두리, 성공/경고. 각각의 16진수 값과 사용 위치를 제공합니다.
- 타이포그래피: 글꼴 패밀리(라이선스가 필요한 글꼴의 경우 가장 가까운 무료 대체 글꼴 포함), px/line-height/weight/tracking 단위의 스케일 단계, 대소문자(아이브로우는 대문자 + tracking?).
- 간격: 실제 사용된 리듬(예: 8/16/24/40/64), 섹션 패딩, 카드 패딩.
- 형태: 요소 클래스별 둥근 모서리 값, 그림자 레시피, 테두리 두께.
- 구조: 버튼(높이, 패딩, 둥근 모서리, 두께, 아이콘), 카드, 아이브로우, 히어로 구성.
- 톤: 3개의 형용사 + 카피의 특징(짧은 문장? 2인칭? 숫자 사용?).
3. 프로젝트에 매핑 (포크하지 않음)
프로젝트의 토큰(app/globals.css @theme/:root, tailwind.config 또는 테마 파일)과 기존 컴포넌트를 읽습니다. 다음을 생성합니다:
| 역할 | 참조 | 현재 프로젝트 토큰 | 제안 |
|---|---|---|---|
| 강조 | #FF5A1F | --color-brand #… | 유지 / 값 조정 / 신규 (이유 포함) |
규칙:
- 새 토큰을 추가하기 전에 기존 토큰의 값을 조정합니다. 모든 새 토큰에는 한 줄짜리 이유가 필요합니다.
- 브랜드 고정 항목은 건드리지 않음: 로고, 프로젝트에 이미 있는 브랜드 색상, 이미 라이선스가 있거나 사용 중인 글꼴.
- 모든 제안에 대해 강조-캔버스 및 잉크-표면 대비를 확인합니다(텍스트 ≥ 4.5:1, UI ≥ 3:1).
- 프로젝트가 코드와 동기화되는 Figma 파일을 유지하는 경우, 토큰 변경 사항은 동일한 작업에서 Figma에도 반영합니다.
종료 조건
- 각 행이 '유지', '값 조정' 또는 '신규'로 표시된 토큰 테이블 완료.
- 제안된 쌍에 대한 대비 확인 완료.
- 아직 코드 변경 없음. 코드 변경은 사용자가 테이블에 동의한 후
design-pass에서 수행. - 사용자에게 한 문장 요약과 함께 아래에 테이블 제시.