Skip to main content
Glama
deenesjakoruzh
YamadaAoi

mcp-sketch

by YamadaAoi
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

mcp-sketch

English | 한국어

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

SKILL

  • sketch-html skill을 다운로드하여 자신만의 버전을 커스터마이징하고 **Sketch-Meaxure**에서 내보낸 zip 파일을 분석하는 것을 권장합니다.

  • skills 도구를 사용하여 다운로드할 수도 있습니다.

npx skills@latest add YamadaAoi/mcp-sketch -s sketch-html

Related MCP server: codesign-mcp

주의사항

  • AI의 혼동을 방지하기 위해 본 도구는 의미 없는 레이어 일부를 필터링하지만, 유효한 레이어가 필터링될 가능성을 배제할 수 없습니다.

  • UI 디자이너와 소통하여 복잡한 효과는 가급적 이미지로 잘라내고(切图), 간단한 효과는 강조를 위해 둥근 모서리(radius)를 최소 1이라도 설정하는 것을 권장합니다.

기능

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

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

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

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

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

사용 방법

방식 1: CLI 직접 사용

npx와 함께 사용:

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

명령 옵션

옵션

약어

설명

-p, --file_path <PATH>

-p

Sketch HTML zip 압축 파일 경로 (필수)

--pid, --page_id

페이지 ID

--pn, --page_name

페이지 이름

--aid, --artboard_id

아트보드 ID

--an, --artboard_name

아트보드 이름

-r, --rect

-r

파싱할 사각형 영역 지정, 형식: [x,y,width,height]

--ap, --assets_path

이미지 저장 경로, 기본값 src/assets/sketch

--sr, --save_result

분석 결과를 로컬 파일로 저장할지 여부, 기본값 false

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 압축 파일을 분석합니다:

매개변수

타입

필수

설명

file_path

string

예

Sketch HTML zip 압축 파일 경로

page_id

string

아니오

페이지 ID

page_name

string

아니오

페이지 이름

artboard_id

string

아니오

아트보드 ID

artboard_name

string

아니오

아트보드 이름

rect

number[]

아니오

파싱할 사각형 영역 지정, 형식은 [x, y, width, height] (x, y는 좌측 상단 좌표, width, height는 사각형 너비와 높이)

assets_path

string

아니오

이미지 저장 경로, 기본값 src/assets/sketch

save_result

boolean

아니오

분석 결과를 로컬 파일로 저장할지 여부, 기본값 false

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로 사용합니다.

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

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

    • 미리보기 이미지만 처리하며, sketch 이미지 추출을 대신하지 않습니다.

출력 파일 위치

  • 추출된 이미지는 기본적으로 src/assets/sketch/ 디렉토리에 저장됩니다 (assets_path로 변경 가능).

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

사용 제안

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

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

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

가이드

Available Tools

1 tool
sketch_html_analyzesketch_html_analyzeC

Analyze sketch html files and return the design structure of corresponding pages or drawing boards

ParametersJSON Schema
NameRequiredDescriptionDefault
file_pathYessketch html zip file path(required)
page_idNopage id (optional)
page_nameNopage name (optional)
artboard_idNoartboard id (optional)
artboard_nameNoartboard name (optional)
rectNorect [x, y, width, height] (optional)
assets_pathNoassets path (optional), default src/assets/sketch
saveResultNosave analysis result (optional), default true

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure but fails to specify critical traits: it doesn't clarify that the tool likely extracts/reads zip files (implied by 'sketch html zip file path'), doesn't explain what the saveResult parameter actually saves or where, and doesn't disclose whether this is a read-only operation or has side effects.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence with no redundant words. It is appropriately front-loaded with the verb 'Analyze'. However, the density means it sacrifices clarity on parameter relationships and behavioral details that would require additional sentences.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For an 8-parameter tool handling file processing with multiple optional filters (page, artboard, rect) and persistence options (saveResult), the description is inadequate. With no output schema provided, the description should explain the return format and structure, but it omits this entirely, leaving the agent uncertain about what data structure it will receive.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, establishing a baseline of 3. The description adds marginal semantic value by referencing 'pages or drawing boards' which contextualizes the page_id and artboard_id parameters, but doesn't explain the rect parameter's purpose (cropping vs selection) or the assets_path behavior.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly identifies the action ('Analyze') and resource ('sketch html files'), and mentions the return value ('design structure'). However, 'design structure' remains somewhat vague—it doesn't specify whether this returns layer hierarchies, CSS properties, or component trees, which would help the agent understand the utility of the output.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description mentions 'pages or drawing boards' which implicitly maps to the page_id/artboard_id parameters, but provides no explicit guidance on when to use this tool versus alternatives, or how to use the filtering options (e.g., whether page_id and page_name are mutually exclusive or complementary).

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 1 tool updatev1.0.4
    • First observedsketch_html_analyze
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3/5.0

Scored across 1 tool

Disambiguation5/5

With only one tool in the set, there is no possibility of confusion or overlap with other tools within this server.

Naming Consistency4/5

The single tool uses clear snake_case with a descriptive verb suffix, but with only one data point, a broader naming pattern cannot be established.

Tool Count2/5

A single analysis tool is too few for the apparent scope implied by the server name 'mcp-sketch', suggesting a severely limited integration surface.

Completeness2/5

The server only supports analyzing HTML exports, lacking any functionality for creating, editing, or exporting native Sketch files, representing significant gaps for design workflow automation.

Maintenance

ActivitySlowing
ResponsivenessResponsive

Resources

Related MCP Connectors

Related MCP Servers

  • codesign-mcp

    ccpopy
    A
    license
    A
    quality
    B
    maintenance
    Local MCP server for Tencent CoDesign sharing links, exposing artboards, layer specs, preview images, and exported slices to support design-to-code workflows.
    8
    51 npm
    14
    MIT

  • miromiro-mcp

    SoraiaBarroso
    A
    license
    Not graded
    quality
    B
    maintenance
    MCP server for the MiroMiro design-extraction API. It extracts real design data from live websites—including brand colors, fonts, tokens, SVGs, images, and component code—so AI agents can build from actual values.
    95 npm
    MIT

Appeared in Searches