zanwei/design-dna

해결하는 문제

주관적인 시각적 디자인 요청(예: "이 웹사이트처럼 보이게 해주세요")을 정확하고 기계가 읽을 수 있는 사양인 "Design DNA"로 변환합니다. 이로 인해 AI 에이전트가 일반적인 디자인 기본값으로 흐르거나 브랜드의 시각적 정체성의 세부 사항을 제대로 포착하지 못하는 일반적인 문제를 방지할 수 있습니다.

작동 방식

이 프로젝트는 세 단계의 파이프라인을 따르는 에이전트 스킬을 제공합니다.

1. 구조: 디자인 토큰, 질적 스타일, 시각적 효과를 위한 포괄적인 스키마를 정의합니다.
2. 분석: 스크린샷, 이미지, 또는 URL에서 측정 가능한 토큰(색상, 타이포그래피), 질적 인식(분위기, 브랜드 목소리), 고급 시각적 효과(WebGL, 쉐이더, 글래스모포리즘)를 포함하는 수치화된 JSON 프로파일을 추출합니다.
3. 생성: 추출된 DNA JSON과 사용자 콘텐츠를 사용하여 충실한 UI를 구현하며, 일반적으로 자가 포함형 HTML/CSS/JS로 출력됩니다.

정확성을 보장하기 위해 선택적 결정론적 측정 스크립트도 포함되어 있습니다. 이 스크립트는 실제 픽셀에 대해 k-means 클러스터링을 사용하여 정확한 16진수 코드를 추출하고, 최종 구현이 원본 참조와 일치하는지 검증하여 LLM의 색상 인식 오차를 제거합니다.

대상 사용자

Cursor나 Claude Code와 같은 AI 에이전트를 사용하여 다양한 프로젝트 간에 특정 시각적 정체성을 일관되게 재현하거나 팀 간에 디자인 사양을 공유하고자 하는 개발자 및 디자이너입니다.

주요 특징

• 3차원 분석: 표준 CSS를 넘어서는 디자인 토큰, 질적 스타일, 복잡한 시각적 효과를 포착합니다.
• 결정론적 검증: 픽셀 수준의 측정을 통해 색상과 스타일이 LLM의 인식이 아닌 수학적으로 정확함을 보장합니다.
• 이동 가능한 사양: 버전 관리가 가능하고 다양한 에이전트 및 프로젝트에서 재사용 가능한 JSON "DNA" 파일을 출력합니다.
• 광범위한 에이전트 호환성: Agent Skills 사양과 호환되며, 다양한 AI 에디터 및 에이전트에서 skills CLI를 통해 설치 가능합니다.