Design Extract (MCP server) — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

3단계 DTCG 토큰 출력 (프리미티브 → 시맨틱 → 컴포지트)
멀티 플랫폼 이미터: SwiftUI, Compose, Flutter, Tailwind v4, Figma
WCAG 수정 패스 — 실패 색상 쌍을 플래그하고 수정안 제안
CSS 상태 감사 (명시도, 사용하지 않는 규칙, 중복 토큰)
Chrome 익스텐션 companion으로 원클릭 캡처
Playwright 기반, Node 20+, MIT 라이선스

라이브 데모

실제 사용 모습

design-extract-mcp.replay ▶ 준비됨

0/0

설치

클라이언트 선택

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

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

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

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

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

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

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

사용 사례

실전 활용법: Design Extract

브랜드의 시각 시스템을 DTCG 토큰으로 복제하는 방법

👤 디자인 엔지니어, 에이전시 팀, 브랜드 일치 제품 팀 ⏱ ~25 min intermediate

언제 쓸까: 참조 사이트를 기반으로 마케팅 사이트나 앱을 재구축하는데 Figma 리핑 없이 10분 만에 토큰이 필요할 때.

사전 조건

참조 사이트의 공개 URL — 예: https://stripe.com — 공개적으로 접근 가능해야 함

흐름

추출

Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ 복사됨

→ tokens.json + tokens.swift + tailwind.css 저장됨; 커버리지 보고서
감사

Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ 복사됨

→ 실패 색상 쌍과 제안이 담긴 감사 보고서
적용

Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ 복사됨

→ 페이지가 브랜드 시각 아이덴티티로 렌더링됨

결과: URL 하나로 토큰 세트 + 감사 + 스타터 페이지.

함정

사이트가 SSR 게이트나 로그인 뒤에 있음 — 익스텐션이나 커스텀 Playwright 사전 단계로 로그인 쿠키를 전달하세요

함께 쓰기: filesystem

자체 사이트의 디자인 시스템 드리프트 감사

👤 내부 디자인 시스템 관리자 ⏱ ~30 min intermediate

언제 쓸까: 47가지 비공식 색상이 프로덕션에 몰래 들어온 것 같을 때. 확인해보세요.

흐름

인벤토리

Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ 복사됨

→ 카테고리별 고유 값 수
소스와 비교

Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ 복사됨

→ 파일/컴포넌트 참조가 포함된 드리프트 표
정리 계획

Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ 복사됨

→ PR 계획 작성됨

결과: "불일치가 있다"는 느낌이 아닌 엔지니어링에 전달할 수 있는 구체적인 드리프트 보고서.

함정

런타임에 resolve되는 CSS 변수 때문에 과다 보고됨 — --resolve-vars를 전달하여 var(--x) 체인을 추적한 후 계산하세요

함께 쓰기: filesystem

라이브 사이트에서 Figma variables 생성

👤 코드에 맞게 Figma를 동기화해야 하는 디자이너 ⏱ ~15 min beginner

언제 쓸까: 코드가 먼저 배포된 경우; 디자인이 Figma에서 따라잡아야 할 때.

흐름

Figma JSON 생성

Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ 복사됨

→ Figma variables JSON 가져오기 가능한 파일
가져오기

Walk me through importing this with the Figma Variables Import plugin.✓ 복사됨

→ 플러그인 단계별 안내

결과: 수동 eyedropping 없이 배포된 코드와 동기화된 Figma 파일.

함정

토큰 이름이 기존 Figma variables와 충돌 — --prefix 플래그를 사용하여 예: site/color.bg.primary 같은 네임스페이스 적용

조합

다른 MCP와 조합해 10배 효율

design-extract-mcp + filesystem

이후 실행에서 비교할 수 있도록 토큰 출력을 저장소에 유지

design-extract-mcp + Figma-Context-MCP

양방향 동기화 — 라이브에서 추출하고 Figma로 푸시

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	기본 진입점	1 Playwright crawl
audit_css_health	url	복제가 아닌 상태 확인이 목표일 때 extract 대신 또는 이후에 사용	1 crawl
wcag_remediate	tokens	extract 이후, 토큰 배포 전에 사용	free (post-process)
diff_tokens	url, source_tokens_path	자체 사이트의 드리프트 감사	1 crawl

비용 및 제한

운영 비용

API 쿼터: 로컬 — 사용 컴퓨터 성능에 따라 달라짐
호출당 토큰: 추출 요약당 1500~6000
금액: 무료 (MIT)
팁: 매 PR마다 추출하지 마세요 — 결과를 캐시하고 변경 시에만 실행하세요

보안

권한, 시크릿, 파급범위

자격 증명 저장: 대상 인증이 필요하면 쿠키 파일로 처리; 기본적으로 없음

데이터 외부 송신: 지정한 URL에만 전송됩니다. Playwright는 로컬에서 실행됩니다.

robots.txt와 대상 사이트 ToS를 준수하세요 — 브라우저처럼 가져오지만 대규모로는 여전히 스크래핑입니다.

문제 해결

자주 발생하는 오류와 해결

Playwright Chromium 실행 실패

npx playwright install chromium을 한 번 실행하세요

확인: `npx playwright --version`이 버전을 출력함

사이트가 헤드리스 브라우저를 차단

--headed를 전달하거나 레지던셜 프록시/쿠키 파일을 제공하세요

출력 토큰이 불완전해 보임

사이트가 CSS-in-JS를 사용하는 경우 — --wait-for-selector main을 시도하여 SPA 렌더링이 완료될 때까지 기다리세요

대안

Design Extract 다른 것과 비교

대안	언제 쓰나	단점/장점
Figma-Context-MCP (GLips)	소스 오브 트루스가 라이브 사이트가 아닌 Figma일 때	Figma MCP는 Figma 파일이 필요하지만 design-extract는 모든 URL에서 작동합니다
Tokens Studio 플러그인	이미 Figma 내부에서 작업하고 있고 토큰 관리 UI가 필요할 때	수동 작업이 필요하지만 design-extract는 초기 추출을 자동화합니다

Design Extract