mcp-sketch

English | 中文

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

機能

• SketchからエクスポートされたHTML zip圧縮ファイルを解析し、デザイン構造を抽出

  • ページ、アートボードごとのフィルタリングをサポート

  • 指定した矩形領域の解析をサポート

  • AIが参照するためのデザイン構造JSONとプレビュー画像を出力

• MCPサービスとCLIの2通りの使用方法を提供

使用方法

方法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ファイルを解析できます