Skip to main content
Glama
deenesjakoruzh
YamadaAoi

mcp-sketch

by YamadaAoi
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

mcp-sketch

English | 中文

**Sketch-Meaxure**からエクスポートされたHTML zip圧縮ファイルを解析し、デザイン構造情報を抽出するための、MCPサービスおよびCLIとして利用可能なローカルツールです。

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の2通りの使用方法を提供

使用方法

方法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

    • 画像処理のoptionalDependenciesとしてsharpを採用

    • インストールに失敗した場合（sharpがlibvipsに依存するため、極端なケース）、元の完全なアートボード画像が返されます。

    • インストールに成功した場合、サイズが調整され、rect領域が切り取られ（指定されている場合）、webp形式に圧縮されて返されます。

    • プレビュー画像のみを処理し、sketchの切り出し画像を勝手に処理することはありません。

出力ファイルの場所

  • 解析された切り出し画像はデフォルトで src/assets/sketch/ ディレクトリに保存されます（assets_pathでカスタマイズ可能）

  • 解析されたデザイン内容はデフォルトでローカルのJSONファイルに保存されます（人間による確認用）。保存先フォルダはデフォルトでzipファイルと同名・同階層になります。

使用上のアドバイス

  • マルチモーダルモデルを使用すると、プレビュー画像を読み取ってデザイン構造を修正できます。

  • AIに渡すデータ量は50KB以下に抑えることで、AIの分析精度を向上させます（ローカルに保存される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