Sketch Context MCP

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

스케치 컨텍스트 MCP

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

개요

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

1. Sketch 파일(.sketch)을 구문 분석하는 서버 제공
2. 커서 또는 다른 IDE가 컨텍스트에 사용하는 MCP 프로토콜 구현
3. Sketch 파일에서 특정 구성 요소와 레이어를 참조할 수 있습니다.
4. 커서와 통신하는 Sketch용 UI 인터페이스 제공
5. Sketch와 Cursor 간 실시간 양방향 통신 활성화

구성 요소

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

1. MCP 서버 : Cursor IDE에 Sketch 파일 데이터를 제공하기 위해 모델 컨텍스트 프로토콜을 구현하는 Node.js 서버
2. Sketch 플러그인 : WebSockets를 통해 MCP 서버와 통신하는 UI 인터페이스가 있는 Sketch 플러그인

사용 가능한 MCP 도구

서버는 커서에 다음과 같은 도구를 제공합니다.

• get_file : Sketch 파일 또는 그 안의 특정 노드의 내용을 검색합니다.
• list_components : Sketch 파일에 있는 모든 구성 요소/심볼을 나열합니다.
• get_selection : 현재 선택된 요소에 대한 정보를 가져옵니다.
• create_rectangle : 지정된 크기와 속성을 가진 새로운 사각형을 만듭니다.
• create_text : 사용자 정의 콘텐츠와 스타일을 사용하여 새로운 텍스트 요소를 만듭니다.

이러한 도구를 사용하면 Cursor에서 다음을 수행할 수 있습니다.

• Sketch 디자인 파일에 액세스하고 검사합니다.
• 특정 구성 요소 및 레이어 쿼리
• 자연어 명령을 통해 디자인 요소를 만들고 수정합니다.
• Sketch와 실시간 동기화 유지

지원되는 기능

• 로컬 및 클라우드 스케치 파일 구문 분석
• 구성 요소/기호 추출
• 자산 관리 및 자동 다운로드
• Sketch 플러그인을 통한 선택 링크 지원
• WebSockets 및 SSE를 통한 실시간 업데이트
• Sketch를 Cursor에 연결하기 위한 대화형 UI
• 로컬 및 Sketch Cloud 호스팅 파일 모두 구문 분석
• 문서 구조 및 구성 요소 정보 추출
• ID로 특정 노드에 접근하기
• Sketch 파일에 모든 구성 요소 나열
• Cursor의 명령을 통해 사각형, 텍스트 및 기타 요소 만들기

시작하기

필수 조건

• Node.js(v14 이상)
• 스케치(v70 이상)
• 커서 IDE, VS Code 또는 이와 유사한 도구
• Sketch 계정(로컬) 또는 API 액세스 사용(Sketch Cloud 파일)

설치

지엑스피1

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

스케치 플러그인 설치

1. 릴리스 페이지 에서 플러그인의 최신 릴리스를 다운로드하세요.
2. Sketch에 설치하려면 .sketchplugin 파일을 두 번 클릭하세요.
3. 플러그인은 Sketch의 플러그인 > Sketch Context MCP에서 사용할 수 있습니다.

커서와의 통합

커서와 함께 사용하려면:

1. Sketch 파일로 MCP 서버를 시작합니다.
   sketch-context-mcp --local-file=/path/to/your/file.sketch
2. Sketch에서 플러그인을 엽니다.
   • 플러그인 > 스케치 컨텍스트 MCP > MCP 인터페이스 열기로 이동하세요.
   • 서버 포트를 입력하세요(기본값: 3333)
   • "연결"을 클릭하세요
3. 커서에서 MCP 서버에 연결합니다.
   • 설정 > 기능 > 컨텍스트로 이동하세요.
   • URL: http://localhost:3333/sse 로 새로운 MCP 서버를 추가합니다.
   • "연결"을 클릭하세요
4. 커서 작성기에서 이제 다음을 수행할 수 있습니다.
   • ID로 참조 구성 요소: "ID 12345인 구성 요소를 보여주세요"
   • 모든 구성 요소 나열: "디자인의 모든 구성 요소 나열"
   • 특정 요소에 대한 세부 정보 얻기: "헤더의 버튼 설명"
   • 새로운 요소 만들기: "너비 200, 높이 100의 사각형 만들기"

구성

서버는 환경 변수( .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 : 도움말 메뉴를 표시합니다

스케치 플러그인 사용하기

연결 탭

연결 탭을 사용하면 Sketch Context MCP 서버에 연결할 수 있습니다.

1. 포트 번호를 입력하세요(기본값은 3333)
2. "연결"을 클릭하여 WebSocket 연결을 설정합니다.
3. 연결되면 채널 ID가 포함된 확인 메시지가 표시됩니다.
4. Cursor를 서버에 연결하기 위한 지침을 따르세요.

선택 탭

선택 탭에는 Sketch 문서에서 선택한 레이어에 대한 정보가 표시됩니다.

1. Sketch 문서에서 하나 이상의 레이어를 선택하세요
2. 선택된 레이어가 목록에 표시됩니다.
3. "선택 ID 복사"를 클릭하여 레이어 ID를 클립보드에 복사합니다.
4. 커서에서 이러한 ID를 사용하여 특정 레이어를 참조합니다.

탭 정보

정보 탭은 플러그인에 대한 정보와 사용 방법을 제공합니다.

커서와 함께 사용

Sketch와 Cursor가 모두 MCP 서버에 연결되면:

1. 스케치에서 요소 선택
2. Sketch Context MCP 플러그인을 사용하여 ID를 복사합니다.
3. 커서에서 이러한 요소를 ID로 참조합니다.

Cursor의 명령 예:

• "ID 12345의 레이어 세부 정보를 보여주세요"
• "너비 300, 높이 200의 파란색 사각형을 만드세요"
• "'Hello World'라는 내용이 있는 텍스트 레이어를 추가합니다."

문제 해결

일반적인 문제

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

로그

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

기여하다

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

특허

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