참고: 이 프로젝트는 현재 테스트 단계에 있으며 완전히 안정적이지 않을 수 있습니다.

스케치 컨텍스트 MCP

Cursor, Cline, Windsurf 등의 IDE와 Sketch 디자인을 통합하기 위한 MCP(Model Context Protocol) 서버입니다.

개요

이 도구를 사용하면 Cursor IDE가 Sketch 디자인 파일에 액세스하고 해석하여 AI 기반 디자인-코드 워크플로를 구현할 수 있습니다. 작동 방식은 다음과 같습니다.

Sketch 파일(.sketch)을 구문 분석하는 서버 제공
커서 또는 다른 IDE가 컨텍스트에 사용하는 MCP 프로토콜 구현
Sketch 파일에서 특정 구성 요소와 레이어를 참조할 수 있습니다.

구성 요소

이 프로젝트는 두 가지 주요 구성 요소로 구성됩니다.

MCP 서버 : Cursor IDE에 Sketch 파일 데이터를 제공하기 위해 모델 컨텍스트 프로토콜을 구현하는 Node.js 서버
스케치 선택 도우미 플러그인 : MCP 서버에서 사용할 선택 ID를 복사하는 데 도움이 되는 스케치 플러그인

지원되는 기능

로컬 및 클라우드 스케치 파일 구문 분석
구성 요소/기호 추출
자산 관리 및 자동 다운로드
Sketch Selection Helper 플러그인을 통한 선택 링크 지원
SSE를 통한 실시간 업데이트
로컬 및 Sketch Cloud 호스팅 파일 모두 구문 분석
문서 구조 및 구성 요소 정보 추출
ID로 특정 노드에 접근하기
Sketch 파일에 모든 구성 요소 나열

시작하기

필수 조건

Node.js(v14 이상)
API 액세스가 가능한 Sketch 계정(Sketch Cloud 파일에만 필요)

설치

지엑스피1

또는 npx로 직접 실행하세요.

npx sketch-context-mcp --local-file=/path/to/your/file.sketch

커서와의 통합

커서와 함께 사용하려면:

Sketch 파일로 MCP 서버를 시작합니다.
sketch-context-mcp --local-file=/path/to/your/file.sketch
커서에서 MCP 서버에 연결합니다.
- 설정 > 기능 > 컨텍스트로 이동하세요.
- URL을 입력하세요: http://localhost:3333
- "연결"을 클릭하세요
커서 작성기에서 이제 다음을 수행할 수 있습니다.
- ID로 참조 구성 요소: "ID 12345인 구성 요소를 보여주세요"
- 모든 구성 요소 나열: "디자인의 모든 구성 요소 나열"
- 특정 요소에 대한 세부 정보 얻기: "헤더의 버튼 설명"

스케치 파일 작업

Sketch에는 Figma와 같은 "선택 영역에 링크 복사" 기능이 내장되어 있지 않으므로 다음을 수행할 수 있습니다.

list_components 도구를 사용하여 사용 가능한 모든 구성 요소를 확인하세요.
ID로 특정 구성요소 참조
Sketch 플러그인 API를 사용하여 선택 ID를 내보냅니다(아래 Sketch 플러그인 섹션 참조)

구성

서버는 환경 변수( .env 파일을 통해) 또는 명령줄 인수를 사용하여 구성할 수 있습니다. 명령줄 인수는 환경 변수보다 우선합니다.

환경 변수

SKETCH_API_KEY : Sketch API 액세스 토큰(Sketch Cloud 파일에 필요)
PORT : 서버를 실행할 포트(기본값: 3333)
LOCAL_SKETCH_PATH : 로컬 Sketch 파일 경로(--local-file 인수의 대안)
DEBUG_LEVEL : 로깅 세부 정보 설정(기본값: 'info')

명령줄 인수

--version : 버전 번호를 표시합니다
--sketch-api-key : Sketch API 액세스 토큰
--port : 서버를 실행할 포트
--stdio : 기본 HTTP/SSE 대신 명령 모드에서 서버를 실행합니다.
--help : 도움말 메뉴를 표시합니다

커서에 연결

서버 시작

npx sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

다음과 유사한 출력이 표시됩니다.

Initializing Sketch MCP Server in HTTP mode on port 3333...
HTTP server listening on port 3333
SSE endpoint available at http://localhost:3333/sse
Message endpoint available at http://localhost:3333/messages

커서를 MCP 서버에 연결

커서 IDE 열기
설정(⚙️)으로 이동하세요
기능 탭으로 이동
"컨텍스트" 섹션을 찾으세요
MCP 서버의 URL을 입력하세요: http://localhost:3333
"연결"을 클릭하세요

서버가 연결되면 커서 설정에 녹색 상태 표시기가 표시됩니다.

커서와 함께 사용

MCP 서버가 연결되면 Cursor를 사용하여 사용할 수 있습니다.

에이전트 모드에서 커서를 사용하고 있는지 확인하세요.
커서 작성기에서 스케치 파일에 대한 링크를 놓습니다.
커서에게 디자인 분석이나 작업을 요청하세요

예를 들어, "이 스케치 디자인을 분석하고 레이아웃과 일치하는 React 구성 요소를 만드세요"라고 말할 수 있습니다.

선택 링크 작업

Sketch 파일에서 특정 요소를 참조하려면:

Sketch Selection Helper 플러그인을 설치하세요(아래 참조)
스케치에서 요소 선택
플러그인 메뉴에서 플러그인을 실행하세요(또는 키보드 단축키를 사용하세요)
ID가 클립보드에 복사됩니다.
특정 요소에 대해 Cursor와 통신할 때 이러한 ID를 사용하세요.

스케치 선택 도우미 플러그인 설치

이 플러그인은 Sketch에서 선택한 요소의 ID를 가져와 MCP 서버와 함께 사용하는 데 도움이 됩니다.

자동 설치

설치 스크립트를 실행합니다.

./install-plugin.sh

수동 설치

sketch-selection-helper.sketchplugin 폴더를 Sketch 플러그인 디렉토리에 복사합니다.
~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/
이미 실행 중이면 Sketch를 다시 시작하세요.

플러그인 사용

스케치 문서 열기
하나 이상의 레이어를 선택하세요
플러그인 > 스케치 선택 도우미 > 선택 ID 복사로 이동하세요.
ID가 클립보드에 복사됩니다.
이러한 ID를 MCP 서버와 함께 사용하여 특정 요소를 참조합니다.

예를 들어, ID를 복사한 후 Cursor에 "Sketch 디자인에서 ID 12345가 있는 버튼을 분석해 주세요"라고 요청할 수 있습니다.

구성 요소 작업

Sketch 파일에서 특정 구성 요소를 참조하려면 다음을 수행합니다.

Sketch 파일을 엽니다
참조하려는 구성 요소를 선택하세요
ID를 복사하거나 링크를 만드세요
커서와 대화할 때 이 ID/링크를 사용하세요.

자산 관리

자산은 다음과 같은 경우 자동으로 처리됩니다.

이미지를 사용하여 구성 요소에 액세스
기호 작업
수출된 자산 처리

서버는 자동으로 다음을 수행합니다.

필요한 자산을 다운로드하세요
자산 버전 관리
구성 요소에서 자산 참조 처리

문제 해결

일반적인 문제

연결 오류 : 서버가 실행 중이고 포트에 액세스할 수 있는지 확인하세요.
인증 실패 : Sketch API 키가 올바른지 확인하세요
파일 구문 분석 문제 : Sketch 파일이 유효하고 손상되지 않았는지 확인하세요.

로그

자세한 로깅을 활성화하려면 DEBUG 환경 변수를 설정하세요.

DEBUG=sketch-mcp:* npx sketch-context-mcp

기여하다

기여를 환영합니다! 풀 리퀘스트를 제출해 주세요.

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.

Sketch Context MCP

Integrations