Tricholomaaurantiumknottiness355/design-dna

design-dna은(는) 무엇을 하나요?

시각적 디자인 아이덴티티를 기계가 읽을 수 있는 Design DNA로 추출, 구조화하여 토큰, 스타일, 효과 전반에 걸쳐 적용합니다.

설명

이 스킬은 디자인 정보(이미지, 스크린샷, 디자인 파일)를 분석하여 일관된 디자인 시스템을 나타내는 구조화된 데이터(Design DNA)로 변환합니다. Design DNA는 다음과 같은 요소를 포함합니다:

• 색상 토큰: 기본 색상, 강조 색상, 배경 색상, 텍스트 색상 등
• 타이포그래피 토큰: 글꼴, 크기, 두께, 줄 간격 등
• 간격 토큰: 여백, 패딩, 그리드 간격 등
• 효과 토큰: 그림자, 블러, 둥근 모서리 등

사용 방법

1. 입력: 디자인 샘플(이미지 URL, 파일 경로, 또는 설명)을 제공합니다.
2. 처리: 스킬이 디자인을 분석하여 구조화된 DNA를 추출합니다.
3. 출력: JSON/YAML 형식의 Design DNA를 반환합니다.

예시

{
  "colorTokens": {
    "primary": "#3B82F6",
    "background": "#FFFFFF",
    "text": "#1F2937"
  },
  "typographyTokens": {
    "heading": {
      "fontFamily": "Inter",
      "fontSize": "2rem",
      "fontWeight": 700
    },
    "body": {
      "fontFamily": "Inter",
      "fontSize": "1rem",
      "fontWeight": 400
    }
  },
  "spacingTokens": {
    "small": "0.5rem",
    "medium": "1rem",
    "large": "2rem"
  },
  "effectTokens": {
    "shadow": "0 1px 3px rgba(0,0,0,0.1)"
  }
}

플랫폼 지원

• Claude Code
• Cursor
• Codex
• 기타 AI 에이전트 플랫폼

참고

• 모든 코드, 명령어, 파일 경로, 환경 변수 이름, URL은 원래 형태를 유지합니다.
• 디자인 분석은 제공된 샘플에 기반하며, 추가 컨텍스트가 필요한 경우 사용자에게 질문합니다.