design-dna (Claude Skill) — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

레퍼런스에서 token(색상, 타입, 간격, 반경) 추출
정성적 스타일 캡처 (editorial / brutalist / glassy)
효과 캡처 (shadow, blur, grain, 그라디언트) 및 파라미터
이식 가능한 JSON 출력 — 모든 코드 생성 LLM에 전달 가능
이미지, 스크린샷, 라이브 URL에서 작동

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-dna-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "design-dna-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zanwei/design-dna",
          "~/.claude/skills/design-dna"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add design-dna-skill -- git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: design-dna

마음에 드는 스크린샷과 일치하는 컴포넌트 구축

👤 디자이너 없이 세련된 UI를 만드는 개발자 ⏱ ~25 min intermediate

언제 쓸까: 트위터에서 멋진 UI 스크린샷을 보고 그 느낌을 캡처하고 싶을 때.

사전 조건

Skill 설치 — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

흐름

DNA 추출

Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ 복사됨

→ token + 스타일 + 효과가 있는 JSON
컴포넌트 생성

Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ 복사됨

→ 일치하는 미학의 TSX
시각적 비교

Render side-by-side; tweak any drift in shadow strength.✓ 복사됨

→ 허용 오차 내의 시각적 일치

결과: 원본 코드를 복사하지 않고 브랜드에 맞는 컴포넌트.

함정

DNA가 미묘한 효과를 놓침 (grain 텍스처) — 더 느리지만 풍부한 추출을 위해 --high-fidelity 전달

함께 쓰기: filesystem

기존 제품 디자인과 일치하는 새 컴포넌트 생성

👤 디자인된 제품에 기능을 추가하는 개발자 ⏱ ~30 min intermediate

언제 쓸까: 기존 앱에 화면을 추가하면서 네이티브처럼 느껴지게 하고 싶을 때.

흐름

라이브 URL에서 DNA

Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ 복사됨

→ 실제 제품을 반영하는 DNA
token diff 감사

Compare DNA to our existing tailwind.config — flag drift.✓ 복사됨

→ 드리프트 목록 (예: 'shadow-md가 페이지마다 불일치')
새 화면 생성

Generate the new 'Settings' screen using our reconciled DNA.✓ 복사됨

→ 나머지 앱과 구분되지 않는 화면

결과: 몇 달 후에 화면을 추가해도 일관된 제품.

함정

라이브 URL이 인증 뒤에 있음 — 공개 랜딩 페이지의 DNA가 잘못 유도 — 마케팅 페이지가 아닌 인증된 스크린샷 사용

레퍼런스에서 디자인 시스템 부트스트랩

👤 디자이너 없는 솔로 창업자 / 소규모 팀 ⏱ ~60 min advanced

언제 쓸까: 앱을 시작하면서 일관된 디자인 시스템을 빠르게 원할 때.

흐름

레퍼런스 3개 선택

Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ 복사됨

→ 3개의 별도 DNA 객체
합성

Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ 복사됨

→ 병합된 DNA
스타터 시스템 출력

Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ 복사됨

→ 저장소에 스타터 디자인 시스템

결과: 기본 Tailwind에서 시작하는 대신 반복할 수 있는 일관된 기준선.

함정

완전히 다른 미학을 합성하면 혼돈 발생 — '가족' 관계의 레퍼런스 선택 — 반대가 아닌 한 스타일 내의 변형

함께 쓰기: frontend-slides-skill

조합

다른 MCP와 조합해 10배 효율

design-dna-skill + filesystem

저장소에 DNA + 생성된 컴포넌트 영속화

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ 복사됨

design-dna-skill + frontend-slides-skill

제품 미학에 맞는 슬라이드 덱 생성

Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
extract_dna	image_path or url, fidelity?	모든 레퍼런스에서 첫 번째 단계	Vision LLM tokens
synthesize_dna	dna[]	여러 레퍼런스 결합	LLM tokens
generate_component	dna, component_spec	브랜드 일치 컴포넌트 생성	LLM tokens
diff_dna	dna_a, dna_b	레퍼런스와 현재 제품 간 드리프트 감사	0

비용 및 제한

운영 비용

API 쿼터: Vision LLM에 의존
호출당 토큰: 추출 약 3000–8000 token (이미지 입력 + JSON 출력)
금액: 무료; LLM 제공자에게 비용 지불
팁: 프로젝트당 DNA 캐시; 실제 브랜드 갱신 시에만 재추출

보안

권한, 시크릿, 파급범위

최소 스코프: filesystem-read (images) Outbound HTTPS (URL refs)

자격 증명 저장: 없음 (vision LLM 인증은 환경 변수로)

데이터 외부 송신: Vision LLM 제공자; URL 페처 (사용 시)

문제 해결

자주 발생하는 오류와 해결

추출이 그라디언트를 놓침

--fidelity high 사용; 기본값은 token 절약을 위해 미묘한 그라디언트를 건너뜀

DNA token이 실행마다 다름

Vision 모델은 확률적임 — 지원되면 seed 설정; 또는 두 번 추출하고 중앙값 선택

생성된 코드가 design token 대신 인라인 스타일 사용

--token-mode strict 전달; skill이 token으로 존재하는 값을 인라인하기를 거부

라이브 URL 추출이 비어 있음

사이트가 JS 필요; URL 페치 대신 완전히 렌더링된 스크린샷 사용

대안

design-dna 다른 것과 비교

대안	언제 쓰나	단점/장점
design-extract (Manavarya09)	DTCG + 멀티 플랫폼 이미터가 포함된 완전한 design-token 내보내기를 원할 때	더 무거움; 경량 DNA 대신 완전한 디자인 시스템 파이프라인
Manual style guide curation	디자이너와 패턴 라이브러리가 있을 때	더 느림; 더 권위 있음

design-dna