Design DNA — 디자인 DNA 추출·적용기

무엇을 해주나

• 레퍼런스 이미지·스크린샷·URL을 분석해 디자인 시스템(컬러/타이포/스페이싱/레이아웃/그림자/모션), 디자인 스타일(무드·성격·구성 전략), 비주얼 이펙트(Canvas, WebGL, 파티클, 셰이더, 스크롤 효과) 세 축의 JSON 프로필을 만들어 줍니다.
• 색상은 눈대중 추정이 아니라 동봉된 scripts/measure-colors.mjs로 실제 픽셀을 클러스터링해 측정합니다.
• 만들어진 DNA JSON과 콘텐츠를 주면 CSS 변수 기반의 자체 완결형 HTML을 생성하고, scripts/verify.mjs로 결과 스크린샷과 원본 팔레트의 ΔE·커버리지 차이를 채점해 실패 시 스스로 수정합니다.

이런 분께 추천

• 마음에 드는 사이트의 톤앤매너를 정량적으로 재현하고 싶은 프론트엔드 개발자
• 디자인 토큰/스타일 가이드를 문서화해야 하는 디자인 시스템 담당자
• 레퍼런스만 있고 시안을 빠르게 뽑아야 하는 1인 개발자·창업자

활용 예시

1. "이 스크린샷 분석해서 design DNA JSON 만들어줘" → 3차원 필드가 모두 채워진 프로필 출력
2. "이 랜딩 페이지랑 같은 스타일로 우리 제품 소개 페이지 만들어줘" → Phase 2→3 자동 연결, 색상 검증까지 수행
3. "디자인 DNA 스키마 구조 보여줘" → 필드 설명이 붙은 전체 스키마 안내

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/zanwei/design-dna/HEAD/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 zanwei/design-dna 의 SKILL.m 폴더를 내 ~/.claude/skills/design-dna/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.