Design DNA — 디자인 유전자 추출기

무엇을 해주나

Design DNA는 디자인 정체성을 세 가지 차원으로 나눠 다룹니다.

1. design_system — 측정 가능한 토큰: 컬러 팔레트, 타이포 스케일, 여백 리듬, 그리드/레이아웃, 라운딩, 그림자, 모션
2. design_style — 느껌으로만 표현되는 부분: 무드, 성격, 구성 전략, 장식 수준, 화이트스페이스 철학, 브랜드 보이스
3. visual_effects — CSS만으로 설명 못 하는 렌더링: Canvas, WebGL/Three.js, 파티클, 셰이더, 스크롤·커서 이펙트, SVG 애니메이션, 글래스모피즘

동작은 3단계로 나뉩니다. 스키마 구조를 보여주는 1단계, 레퍼런스를 분석해 모든 필드가 채워진 JSON을 만드는 2단계, 그 JSON과 콘텐츠를 받아 실제 HTML/CSS/JS를 생성하는 3단계입니다. 필요한 단계만 골라 쓰거나 전체 파이프라인을 한 번에 돌릴 수 있습니다.

이런 분께 추천

• 마음에 드는 사이트의 분위기를 자기 프로젝트에 옮기고 싶은 프론트엔드 개발자
• 디자인 시스템 토큰을 문서화해야 하는 디자이너·디자인 엔지니어
• 랜딩페이지를 빠르게 여러 스타일로 시안 뽑아야 하는 1인 개발자/마케터
• WebGL·파티클 같은 인터랙티브 이펙트를 어떤 기술로 구현할지 판단이 필요한 분

활용 예시

• 레퍼런스 분석: Linear 랜딩페이지 스크린샷 3장을 던지고 "이 디자인 DNA를 추출해줘" → 컬러/타이포/이펙트가 모두 채워진 JSON 프로필을 받습니다.
• 스타일 이식: "이 URL 스타일로 내 SaaS 소개 페이지 만들어줘" → 2단계 분석 후 곧바로 단일 HTML 파일 결과물이 생성됩니다.
• 이펙트 재현: 파티클 배경이 있는 히어로 섹션을 보여주고 "어떤 기술로 구현됐고 비슷하게 만들어줘" → 강도에 따라 CSS/Canvas/Three.js 중 적절한 구현을 선택해 코드로 만들어 줍니다.

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

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

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