/ 디렉터리 / 플레이그라운드 / Design Extract
● 커뮤니티 Manavarya09 ⚡ 바로 사용

Design Extract

제작: Manavarya09 · Manavarya09/design-extract

Claude에게 웹사이트 URL을 알려주면 사용 가능한 디자인 시스템을 반환합니다 — DTCG 토큰, 프리미티브, 시맨틱, iOS/Android/Tailwind/Figma용 플랫폼 익스포트까지.

Design Extract는 Playwright로 대상 사이트를 크롤링하고, 렌더링된 CSS를 분석하며, DTCG 준수 토큰 계층(프리미티브/시맨틱/컴포지트)으로 정제한 뒤 즉시 사용 가능한 코드를 생성합니다: SwiftUI, Jetpack Compose, Flutter, Tailwind v4, WordPress theme.json, Figma variables, shadcn/ui 매핑. 기존 시각적 아이덴티티를 스프린트가 아닌 몇 분 만에 복제하거나 감사해야 하는 디자이너와 엔지니어를 위해 만들어졌습니다.

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

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 — 공개적으로 접근 가능해야 함
흐름
  1. 추출
    Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ 복사됨
    → tokens.json + tokens.swift + tailwind.css 저장됨; 커버리지 보고서
  2. 감사
    Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ 복사됨
    → 실패 색상 쌍과 제안이 담긴 감사 보고서
  3. 적용
    Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ 복사됨
    → 페이지가 브랜드 시각 아이덴티티로 렌더링됨

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

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

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

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

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

흐름
  1. 인벤토리
    Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ 복사됨
    → 카테고리별 고유 값 수
  2. 소스와 비교
    Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ 복사됨
    → 파일/컴포넌트 참조가 포함된 드리프트 표
  3. 정리 계획
    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에서 따라잡아야 할 때.

흐름
  1. Figma JSON 생성
    Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ 복사됨
    → Figma variables JSON 가져오기 가능한 파일
  2. 가져오기
    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는 로컬에서 실행됩니다.

문제 해결

자주 발생하는 오류와 해결

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는 초기 추출을 자동화합니다

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기