Claude Code Design Skills MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

구성 요소 재사용 우선 순위가 있는 Figma-to-Next.js 기술
Figma 변형 → 소품 매핑
즉시 사용 가능한 엄격한 TypeScript 유형
내장된 접근성 기본값
프런트엔드/백엔드 경계 위생을 위한 모의 데이터 패턴

라이브 데모

실제 사용 모습

claude-code-design-skills.replay ▶ 준비됨

0/0

설치

클라이언트 선택

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

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

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

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

~/.continue/config.json

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

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

~/.config/zed/settings.json

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

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

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

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

사용 사례

실전 활용법: Claude Code Design Skills

Figma 프레임에서 새 페이지를 스캐폴드합니다.

👤 디자인을 코드로 변환하는 프런트엔드 엔지니어 ⏱ ~45 min intermediate

언제 쓸까: 준비된 Figma 프레임이 있고 코드베이스에 맞는 React/Next.js 코드가 필요합니다.

사전 조건

Figma MCP 설정 — Figma MCP 설치 및 PAT 제공
스킬 장착 — ~/.claude-code/skills/에 git 복제

흐름

프레임을 가리킨다

이 Figma 프레임을 Next.js 페이지(<figma URL>)로 변환하세요. src/comComponents/의 구성 요소를 재사용합니다.✓ 복사됨

→ 에이전트는 새 구성 요소를 작성하기 전에 기존 구성 요소의 목록을 작성합니다.
소품 맵 변형

Figma 변형을 입력된 소품(크기, 의도, 비활성화)에 매핑합니다.✓ 복사됨

→ 생성된 TS 유형; 아니 아무것도
모의 데이터

모의 데이터를 사용하세요. API 호출을 만들어내지 마세요. 백엔드를 유지하세요.✓ 복사됨

→ 모의 파일을 사용하여 가져오지 않는 구성 요소 정리

결과: 실제 Next.js 페이지가 하나의 PR로 병합되었습니다. 리뷰어가 다시 작성하지 않습니다.

함정

기존 라이브러리 옆에 병렬 구성 요소 라이브러리 생성 — 에이전트가 거기에 있는 것을 재사용할 수 있도록 '기존 구성 요소 나열'부터 시작하세요.

함께 쓰기: figma · magic-ui-mcp

구성 요소의 소품을 Figma 변형에 동기화

👤 디자인 시스템을 유지하는 팀 ⏱ ~25 min intermediate

언제 쓸까: 디자이너는 Figma에 새로운 변형을 추가했으며 코드가 이를 따라잡아야 합니다.

흐름

구성 요소에 대한 Figma 비교

src/comComponents/Button.tsx props와 Button(Figma) 변형을 비교하세요.✓ 복사됨

→ 델타 목록 지우기: 새 변형, 이름이 변경된 변형 등
차이점을 적용하세요

새로운 '고스트' 변형을 포함하도록 Button.tsx를 업데이트하세요. API를 보존하세요.✓ 복사됨

→ 호출자를 중단하지 않는 기본값으로 입력된 업데이트

결과: 소비자를 방해하지 않고 디자인 시스템 드리프트가 종료되었습니다.

조합

다른 MCP와 조합해 10배 효율

claude-code-design-skills + figma

MCP를 통해 Figma 프레임을 가져옵니다. 이 스킬로 변환

Figma 프레임 X를 가져옵니다. 기존 컴포넌트 재사용으로 변환하는 스킬을 사용합니다.✓ 복사됨

claude-code-design-skills + magic-ui-mcp

Figma 패턴을 존재하는 Magic UI 구성 요소에 매핑

Figma가 블러인 히어로를 사용하는 경우, 작성하는 대신 Magic UI의 블러페이드를 사용하세요.✓ 복사됨

claude-code-design-skills + claude-design-auditor-skill

생성된 코드가 18가지 규칙 감사를 통과했는지 확인하세요.

변환 후 설계 감사를 실행하고 HIGH 결과를 수정합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
figma-to-code (SKILL)	Figma frame URL + repo conventions	디자인을 코드베이스에 맞는 코드로 전환	0

비용 및 제한

운영 비용

API 쿼터: 기술은 없습니다. Figma MCP에는 자체 할당량이 있습니다.
호출당 토큰: Figma 프레임 + 기존 코드 + 출력 — 크기가 클 수 있습니다. 프레임의 범위를 정확하게 지정하세요.
금액: 무료
팁: 한 번에 하나의 프레임을 변환합니다. 거대한 선택은 맥락과 검토 에너지를 모두 낭비합니다.

보안

권한, 시크릿, 파급범위

자격 증명 저장: Figma PAT는 Figma MCP에 속하며 이 스킬은 아닙니다.

데이터 외부 송신: 기술에는 없습니다. Figma MCP에서 네트워크 호출이 발생합니다.

생성된 코드는 아직 검토가 필요합니다. '패스 유형'은 '런타임에 올바르게 작동함'을 의미하지 않습니다.
허용 목록에 없는 구성요소로부터의 가져오기를 맹목적으로 수락하지 마십시오. 스킬은 재사용을 선호하지만 여전히 검토 권한이 있습니다.

문제 해결

자주 발생하는 오류와 해결

에이전트가 기존 버튼을 재사용하는 대신 새 버튼을 작성합니다.

프롬프트에 저장소의 구성 요소 디렉터리를 명시적으로 나열합니다.

확인: Include 'check src/components/ first' in the request

최신 Figma 변형에 대한 소품이 누락되었습니다.

변환하기 전에 변형 diff를 요청하세요. 포크하는 대신 구성요소를 업데이트하세요.

확인: Agent output includes a 'variants' section

유형이 너무 느슨함(어디서나 가능)

'아무것도 필요하지 않습니다. 변형을 입력할 수 없으면 큰 소리로 실패합니다'.

확인: Search the diff for ': any'

대안

Claude Code Design Skills 다른 것과 비교

대안	언제 쓰나	단점/장점
magic-ui-mcp	Figma 변환기가 아닌 사전 제작된 애니메이션 구성 요소를 원합니다.	디자인 우선이 아닌 라이브러리 우선
claude-design-auditor-skill	코드 생성이 아닌 디자인 품질을 평가하고 싶습니다.	생산이 아닌 감사
hue-brand-skill	프레임 변환이 아닌 디자인 언어가 필요하다	프레임 우선이 아닌 시스템 우선

Claude Code Design Skills