design-dna은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

design-dna은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

design-dna은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. design-dna의 마지막 커밋은 2026년 8월 28일입니다.

design-dna은(는) 어디에 사용할 수 있나요?

값을 추측하지 않고 참고 사이트의 분위기를 새 프로젝트에서 재현합니다. 팀의 시각 언어를 버전 관리 가능한 JSON 사양으로 저장해 여러 프로젝트에서 공유합니다. 생성된 UI가 브랜드 색상 팔레트와 측정된 허용 오차 범위 내에서 일치하는지 확인합니다. 영감을 주는 스크린샷 모음을 에이전트가 활용할 일관된 디자인 브리프로 바꿉니다.

design-dna는 어떻게 설치하나요?

skills CLI로 skill을 설치합니다(Node.js 필요): npx skills add zanwei/design-dna 또는 Cursor 같은 특정 agent용으로 대화형 입력 없이 설치합니다: npx skills add zanwei/design-dna -a cursor -g -y agent에게 참조 스크린샷이나 URL을 분석해 Design DNA JSON으로 정리한 다음, 이를 바탕으로 UI를 생성하도록 요청합니다

design-dna은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/zanwei/design-dna

zanwei/design-dna

참고 UI에서 시각적 디자인 정체성을 추출해 구조화된 Design DNA JSON으로 만들고, 이를 바탕으로 어울리는 UI를 생성하는 에이전트 스킬입니다.

GitHub에서 보기

스타: 2,006
포크: 109
열린 이슈: 1
마지막 커밋: 2개월 전

어떤 프로젝트인가요?

design-dna는 기존 디자인의 시각적 정체성을 기계가 읽을 수 있는 JSON으로 기록하는 에이전트 스킬입니다. 스크린샷, 이미지 또는 URL을 입력하면 디자인 토큰(색상, 타이포그래피, 간격, 레이아웃, 형태, 입체감, 모션, 컴포넌트), 정성적 스타일(분위기, 시각 언어, 구성, 이미지, 인터랙션 감각), Canvas, WebGL, 파티클, 셰이더, 스크롤 기반 모션, 글래스모피즘 같은 시각 효과의 세 가지 측면을 담은 프로필을 생성합니다.

스킬은 세 단계로 동작합니다. 스키마를 구성하고, 참고 자료를 분석해 완전한 프로필을 만든 뒤, 해당 프로필과 사용자의 콘텐츠를 바탕으로 새로운 UI를 생성합니다. 기본 출력 형식은 단일 파일로 구성된 HTML/CSS/JS입니다. 결과 JSON은 저장하고 버전 관리하며 여러 프로젝트에서 재사용할 수 있습니다.

선택적 결정론적 측정 단계에서는 이미지 픽셀에 k-means 클러스터링을 적용해 정확한 HEX 색상과 각 색상의 비율을 보고합니다. 그런 다음 생성된 스크린샷과 비교해 색상별 ΔE 점수를 계산하므로, 에이전트가 지각에만 의존하지 않고 자체 색상 결과를 확인할 수 있습니다.

핵심 기능

01참고 자료에서 색상, 타이포그래피, 간격, 레이아웃, 모션 등의 디자인 토큰을 추출합니다.
02분위기, 구성, 인터랙션 감각 등의 정성적 스타일을 설명합니다.
03WebGL, 파티클, 셰이더, 스크롤 기반 모션 등의 시각 효과를 정리합니다.
04저장된 DNA JSON과 사용자의 콘텐츠를 바탕으로 새로운 UI를 생성합니다.
05픽셀 기반 색상 측정 기능을 선택적으로 제공하며, 생성된 결과를 ΔE로 검증합니다.
06skills CLI를 통해 Cursor, Claude Code, Codex 및 기타 에이전트에 설치할 수 있습니다.

활용 사례

값을 추측하지 않고 참고 사이트의 분위기를 새 프로젝트에서 재현합니다.
팀의 시각 언어를 버전 관리 가능한 JSON 사양으로 저장해 여러 프로젝트에서 공유합니다.
생성된 UI가 브랜드 색상 팔레트와 측정된 허용 오차 범위 내에서 일치하는지 확인합니다.
영감을 주는 스크린샷 모음을 에이전트가 활용할 일관된 디자인 브리프로 바꿉니다.

빠른 시작

1
skills CLI로 skill을 설치합니다(Node.js 필요)
npx skills add zanwei/design-dna
2
또는 Cursor 같은 특정 agent용으로 대화형 입력 없이 설치합니다
npx skills add zanwei/design-dna -a cursor -g -y
3
agent에게 참조 스크린샷이나 URL을 분석해 Design DNA JSON으로 정리한 다음, 이를 바탕으로 UI를 생성하도록 요청합니다

사용 전 알아둘 점

이것은 agent skill이므로 실행하려면 호환되는 AI 코딩 agent가 필요합니다.
선택 사항인 결정론적 color script를 사용하려면 저장소를 로컬에 clone하고 npm install을 실행해야 합니다.

토픽

#agent-skills #design-tokens #design-system #ui-design #visual-design #css #color-palette #claude-skills #codex-skills #cursor-skills

자주 묻는 질문

design-dna은(는) 무엇인가요?: 참고 UI에서 시각적 디자인 정체성을 추출해 구조화된 Design DNA JSON으로 만들고, 이를 바탕으로 어울리는 UI를 생성하는 에이전트 스킬입니다. design-dna는 기존 디자인의 시각적 정체성을 기계가 읽을 수 있는 JSON으로 기록하는 에이전트 스킬입니다. 스크린샷, 이미지 또는 URL을 입력하면 디자인 토큰(색상, 타이포그래피, 간격, 레이아웃, 형태, 입체감, 모션, 컴포넌트), 정성적 스타일(분위기, 시각 언어, 구성, 이미지, 인터랙션 감각), Canvas, WebGL, 파티클, 셰이더, 스크롤 기반 모션, 글래스모피즘 같은 시각 효과의 세 가지 측면을 담은 프로필을 생성합니다.
design-dna은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: design-dna은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
design-dna은(는) 아직 유지보수되고 있나요?: 6개월 이내 업데이트. design-dna의 마지막 커밋은 2026년 8월 28일입니다.
design-dna은(는) 어디에 사용할 수 있나요?: 값을 추측하지 않고 참고 사이트의 분위기를 새 프로젝트에서 재현합니다. 팀의 시각 언어를 버전 관리 가능한 JSON 사양으로 저장해 여러 프로젝트에서 공유합니다. 생성된 UI가 브랜드 색상 팔레트와 측정된 허용 오차 범위 내에서 일치하는지 확인합니다. 영감을 주는 스크린샷 모음을 에이전트가 활용할 일관된 디자인 브리프로 바꿉니다.
design-dna는 어떻게 설치하나요?: skills CLI로 skill을 설치합니다(Node.js 필요): npx skills add zanwei/design-dna 또는 Cursor 같은 특정 agent용으로 대화형 입력 없이 설치합니다: npx skills add zanwei/design-dna -a cursor -g -y agent에게 참조 스크린샷이나 URL을 분석해 Design DNA JSON으로 정리한 다음, 이를 바탕으로 UI를 생성하도록 요청합니다
design-dna은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/zanwei/design-dna

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.