mcp-sketch

English | 한국어

**Sketch-Meaxure**에서 내보낸 HTML zip 압축 파일을 파싱하고 디자인 구조 정보를 추출하기 위해 MCP 서비스 및 CLI 방식을 모두 제공하는 로컬 도구입니다.

기능

• Sketch에서 내보낸 HTML zip 압축 파일을 파싱하여 디자인 구조 추출

  • 페이지, 아트보드별 필터링 지원

  • 특정 사각형 영역 파싱 지정 지원

  • AI 참조를 위한 디자인 구조 JSON 및 미리보기 이미지 출력

• MCP 서비스 및 CLI 두 가지 사용 방식 제공

사용 방법

방식 1: CLI 직접 사용

npx와 함께 사용:

npx -y mcp-sketch analyze -p /path/to/export.zip

명령 옵션

CLI 예시

인수에 공백이 포함된 경우 따옴표로 묶어야 합니다

# 分析 zip 中第一个页面第一个画板
npx -y mcp-sketch analyze -p "/path/to/export .zip"

# 分析指定页面
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页

# 分析指定页面指定画板
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页 --an 用户管理

# 分析指定区域
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页 --an 用户管理 -r "[0,0,1920,64]"

방식 2: MCP 서비스

MCP 서비스를 활성화하려면 환경 변수 MCP_MODE=1을 설정해야 합니다. 로컬 MCP 서비스로 구성하여 AI 도구가 직접 호출할 수 있도록 합니다.

• opencode:

{
  "mcp": {
    "mcp-sketch": {
      "type": "local",
      "command": ["npx", "-y", "mcp-sketch"],
      "enabled": true,
      "environment": {
        "MCP_MODE": "1",
        "LOG_LEVEL": "debug"
      }
    }
  }
}

• Trae:

{
  "mcpServers": {
    "mcp-sketch": {
      "command": "npx",
      "args": ["-y", "mcp-sketch"],
      "env": {
        "MCP_MODE": "1"
      }
    }
  }
}

MCP 매개변수

sketch_html_analyze 도구를 사용하여 Sketch에서 내보낸 HTML zip 압축 파일을 분석합니다:

MCP 호출 예시

• Sketch HTML zip 압축 파일 내 첫 번째 페이지의 첫 번째 아트보드 분석:

sketch_html_analyze({ file_path: "/path/to/export.zip" })

• 지정된 페이지의 첫 번째 아트보드 분석:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页" })

• 지정된 페이지의 지정된 아트보드 분석:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页", artboard_name: "用户管理" })

• 지정된 페이지의 지정된 아트보드 내 특정 영역 분석 (예: 사용자 관리 아트보드의 상단 내비게이션 바):

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页", artboard_name: "用户管理", rect: [0, 0, 1920, 64] })

매개변수 우선순위

• page: page_id > page_name > 첫 번째 page

• artboard: artboard_id > artboard_name > 첫 번째 artboard

• rect: 파싱할 사각형 영역을 지정하며, 필터링 규칙은 요소의 x,y,x+width,y+height가 사각형 내에 포함되면 파싱됩니다.

반환 결과

도구는 다음 텍스트를 반환합니다: {artboard: {분석 결과}, previewPath: "미리보기 이미지 경로"}

• artboard

  • 레이어, 스타일, 이미지 등의 정보를 포함한 아트보드 데이터

• previewPath

  • sharp를 이미지 처리용 optionalDependencies로 사용

  • 설치에 실패할 경우(극단적인 경우, sharp가 libvips에 의존하기 때문), 원본 전체 아트보드 이미지가 반환됩니다.

  • 설치에 성공할 경우, 크기가 조정되고 rect 영역(지정된 경우)이 잘린 webp 형식으로 반환됩니다.

  • 미리보기 이미지만 처리하며, sketch 에셋 추출은 직접 처리하지 않습니다.

출력 파일 위치

• 추출된 에셋은 기본적으로 src/assets/sketch/ 디렉토리에 저장됩니다 (assets_path를 통해 사용자 지정 가능)

• 분석된 디자인 내용은 로컬 JSON 파일로 기본 저장되며(수동 검토용), 저장 폴더는 기본적으로 zip 파일과 동일한 이름 및 경로에 위치합니다.

사용 제안

• 멀티모달 모델을 사용하여 미리보기 이미지를 읽고 디자인 구조를 수정하십시오.

• AI 분석 정확도를 높이기 위해 AI에 전달하는 데이터 양을 50KB 이하로 유지하십시오 (로컬에 저장된 JSON 파일은 포맷팅된 상태이며, AI에 전달되는 데이터는 압축된 형식입니다).

• rect 매개변수를 사용하여 아트보드 내 특정 영역을 분석하고 모듈식 개발을 통해 세분성을 높이는 것을 권장합니다.

SKILL

제공된 sketch-html 스킬을 사용하여 sketch meaxure에서 내보낸 zip 파일을 분석할 수 있습니다.