Skip to main content
Glama
deenesjakoruzh
YamadaAoi

mcp-sketch

by YamadaAoi
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

mcp-sketch

English | Chinese

A local tool providing both MCP server and CLI modes to parse HTML zip archives exported from Sketch-Meaxure and extract design structure information.

SKILL

  • It is recommended to download the sketch-html skill and customize your own version to analyze zip files exported from Sketch-Meaxure.

  • You can also use the skills tool to download it.

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

Related MCP server: codesign-mcp

Disclaimer

  • To avoid confusing the AI, this tool filters out some meaningless layers, but it does not rule out the possibility of filtering out some valid layers.

  • It is recommended to communicate with UI designers; for complex effects, try to use sliced images; for simple effects, set a radius for emphasis, even if it is just 1.

Features

  • Parse Sketch exported HTML zip archives and extract design structure

    • Supports filtering by page and artboard

    • Supports parsing specified rectangular areas

    • Outputs design structure JSON and preview images for AI reference

  • Provides both MCP server and CLI usage modes

Usage

Method 1: Direct CLI Usage

Use with npx:

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

Command Options

Option

Abbreviation

Description

-p, --file_path <PATH>

-p

Path to the Sketch HTML zip archive (Required)

--pid, --page_id

Page ID

--pn, --page_name

Page name

--aid, --artboard_id

Artboard ID

--an, --artboard_name

Artboard name

-r, --rect

-r

Specify the rectangular area to parse, format: [x,y,width,height]

--ap, --assets_path

Path to store sliced images, default src/assets/sketch

--sr, --save_result

Whether to save analysis results to a local file, default false

CLI Example

If parameters contain spaces, they must be enclosed in quotes

# 分析 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]"

Method 2: MCP Server

You must set the environment variable MCP_MODE=1 to enable the MCP server. Configure it as a local MCP server to allow AI tools to call it directly.

  • 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 Parameters

Use the sketch_html_analyze tool to analyze the HTML zip archive exported from Sketch:

Parameter

Type

Required

Description

file_path

string

Yes

Path to the Sketch HTML zip archive

page_id

string

No

Page ID

page_name

string

No

Page name

artboard_id

string

No

Artboard ID

artboard_name

string

No

Artboard name

rect

number[]

No

Specify the rectangular area to parse, format: [x, y, width, height] (x, y are top-left coordinates, width and height are dimensions)

assets_path

string

No

Path to store sliced images, default src/assets/sketch

save_result

boolean

No

Whether to save analysis results to a local file, default false

MCP Call Examples

  • Analyze the first artboard of the first page in the Sketch HTML zip archive:

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

  • Analyze the first artboard of a specified page:

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

  • Analyze a specified artboard on a specified page:

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

  • Analyze a specified area of a specified artboard on a specified page, e.g., parsing the top navigation bar of a user management artboard:

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

Parameter Priority

  • page: page_id > page_name > first page

  • artboard: artboard_id > artboard_name > first artboard

  • rect: Specifies the rectangular area to parse. The filtering rule is that as long as the element's x, y, x+width, y+height are within the rectangle, it will be parsed.

Return Results

The tool returns text: {artboard: {analysis_result}, previewPath: "preview_image_path"}

  • artboard

    • Artboard data, including layers, styles, images, and other information

  • previewPath

    • Uses sharp as an optionalDependencies for image processing.

    • If installation fails (extreme case, as sharp depends on libvips), the original full artboard image will be returned.

    • If installation succeeds, it will resize, crop the rect area (if specified), and compress it into webp format.

    • Only processes preview images; does not handle sketch slices.

Output File Location

  • Parsed sliced images are saved in the src/assets/sketch/ directory by default (can be customized via assets_path)

  • Parsed design content is saved to a local JSON file by default (for manual review), stored in a folder with the same name as the zip file at the same level

Usage Suggestions

  • Use models that support multi-modality to read preview images and correct the design structure

  • Keep the data volume provided to the AI under 50KB to improve AI analysis accuracy (the locally stored JSON file is formatted, while the data passed to the AI is in a compact format)

  • It is recommended to use the rect parameter to parse specific areas within an artboard for modular development and improved granularity.

Guide

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. Dates show when Glama detected each change.

  1. 1 tool updatev1.0.4
    • First observedsketch_html_analyze
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

B3/5.0
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

ActivityActive
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
    224
    11
    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.
    326
    MIT

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/YamadaAoi/mcp-sketch'

If you have feedback or need assistance with the MCP directory API, please join our Discord server