Sketch Context MCP

**注意:**このプロジェクトは現在テスト段階であり、完全に安定していない可能性があります。

スケッチコンテキストMCP

Sketch デザインを Cursor、Cline、Windsurf などの IDE と統合するための Model Context Protocol (MCP) サーバー。

概要

このツールにより、Cursor IDE は Sketch のデザインファイルにアクセスして解釈できるようになり、AI を活用したデザインからコードまでのワークフローが可能になります。その仕組みは以下のとおりです。

1. Sketchファイル（.sketch）を解析するサーバーを提供する
2. カーソルや他のIDEがコンテキストに使用するMCPプロトコルを実装する
3. Sketchファイルから特定のコンポーネントとレイヤーを参照できるようにします
4. カーソルと通信するスケッチ用のUIインターフェースを提供する
5. スケッチとカーソル間のリアルタイム双方向通信を可能にする

コンポーネント

このプロジェクトは、次の 2 つの主要コンポーネントで構成されています。

1. MCP サーバー: モデル コンテキスト プロトコルを実装し、Sketch ファイル データを Cursor IDE に提供する Node.js サーバー
2. Sketch プラグイン: WebSocket 経由で MCP サーバーと通信する UI インターフェースを備えた Sketch プラグイン

利用可能なMCPツール

サーバーは、Cursor に次のツールを提供します。

• get_file : Sketchファイルまたはその中の特定のノードの内容を取得します。
• list_components : Sketch ファイル内のすべてのコンポーネント/シンボルを一覧表示します
• get_selection : 現在選択されている要素に関する情報を取得する
• create_rectangle : 指定された寸法とプロパティで新しい長方形を作成します
• create_text : カスタムコンテンツとスタイルで新しいテキスト要素を作成する

これらのツールにより、Cursor は次のことが可能になります。

• Sketch デザインファイルにアクセスして検査する
• 特定のコンポーネントとレイヤーをクエリする
• 自然言語コマンドを使用してデザイン要素を作成および変更します
• Sketchとのリアルタイム同期を維持する

サポートされている機能

• ローカルおよびクラウドの Sketch ファイルの解析
• コンポーネント/シンボル抽出
• 資産管理と自動ダウンロード
• Sketchプラグインによる選択リンクのサポート
• WebSocketとSSEによるリアルタイム更新
• スケッチをカーソルに接続するためのインタラクティブなUI
• ローカルファイルとSketch Cloudホストファイルの両方を解析する
• 文書構造とコンポーネント情報の抽出
• IDで特定のノードにアクセスする
• Sketchファイル内のすべてのコンポーネントをリストする
• カーソルからのコマンドを使用して長方形、テキスト、その他の要素を作成する

はじめる

前提条件

• Node.js (v14以降)
• Sketch（v70以降）
• カーソルIDE、VSコードまたは類似の
• Sketch アカウント (ローカル) または API アクセス (Sketch Cloud ファイル) を使用します

インストール

または、npx で直接実行します。

Sketchプラグインのインストール

1. リリースページからプラグインの最新リリースをダウンロードしてください。
2. .sketchpluginファイルをダブルクリックしてSketchにインストールします。
3. プラグインはSketchの「プラグイン > Sketch Context MCP」で利用可能になります。

カーソルとの統合

カーソルでこれを使用するには:

1. Sketch ファイルを使用して MCP サーバーを起動します。
   sketch-context-mcp --local-file=/path/to/your/file.sketch
2. Sketch でプラグインを開きます。
   • プラグイン > Sketch Context MCP > Open MCP Interface に移動します。
   • サーバーのポート番号を入力します（デフォルト: 3333）
   • 「接続」をクリック
3. カーソルで、MCP サーバーに接続します。
   • 設定 > 機能 > コンテキストに移動します
   • URL: http://localhost:3333/sseで新しい MCP サーバーを追加します。
   • 「接続」をクリック
4. カーソル コンポーザーでは、次のことが可能になりました。
   • ID でコンポーネントを参照する:「ID 12345 のコンポーネントを表示してください」
   • すべてのコンポーネントを一覧表示:「設計内のすべてのコンポーネントを一覧表示します」
   • 特定の要素の詳細を取得する:「ヘッダーのボタンについて説明します」
   • 新しい要素を作成します:「幅 200、高さ 100 の長方形を作成します」

構成

サーバーは、環境変数（ .envファイル経由）またはコマンドライン引数を使用して設定できます。コマンドライン引数は環境変数よりも優先されます。

環境変数

• SKETCH_API_KEY : Sketch API アクセス トークン (Sketch Cloud ファイルに必要)
• PORT : サーバーを実行するポート (デフォルト: 3333)
• LOCAL_SKETCH_PATH : ローカルの Sketch ファイルへのパス (--local-file 引数の代替)
• DEBUG_LEVEL : ログの詳細度を設定します (デフォルト: 'info')

コマンドライン引数

• --version : バージョン番号を表示
• --sketch-api-key : Sketch API アクセストークン
• --port : サーバーを実行するポート
• --stdio : デフォルトのHTTP/SSEではなく、コマンドモードでサーバーを実行します。
• --help : ヘルプメニューを表示する

Sketchプラグインの使用

接続タブ

[接続] タブでは、Sketch Context MCP サーバーに接続できます。

1. ポート番号を入力します（デフォルトは3333です）
2. 「接続」をクリックしてWebSocket接続を確立します
3. 接続すると、チャンネルIDが記載された確認メッセージが表示されます。
4. カーソルをサーバーに接続するための指示に従ってください

選択タブ

[選択] タブには、Sketch ドキュメントで選択したレイヤーに関する情報が表示されます。

1. Sketchドキュメントで1つまたは複数のレイヤーを選択します
2. 選択したレイヤーがリストに表示されます
3. 「選択IDをコピー」をクリックして、レイヤーIDをクリップボードにコピーします。
4. カーソルでこれらのIDを使用して特定のレイヤーを参照します

タブについて

「バージョン情報」タブには、プラグインとその使用方法に関する情報が表示されます。

カーソルの使用

Sketch と Cursor の両方が MCP サーバーに接続されたら、次の操作を行います。

1. スケッチで要素を選択する
2. Sketch Context MCPプラグインを使用してIDをコピーします
3. カーソルでは、これらの要素をIDで参照します。

カーソル内のコマンドの例:

• 「ID 12345 のレイヤーの詳細を表示」
• 「幅300、高さ200の青い長方形を作成します」
• 「「Hello World」というコンテンツを含むテキストレイヤーを追加します」

トラブルシューティング

よくある問題

• 接続エラー: サーバーが稼働しており、ポートにアクセスできることを確認してください
• 認証失敗: Sketch APIキーが正しいことを確認してください
• ファイル解析の問題: Sketch ファイルが有効であり、破損していないことを確認してください
• WebSocket接続に失敗しました: ポートがファイアウォールによってブロックされていないことを確認してください

ログ

詳細なログを有効にするには、DEBUG 環境変数を設定します。

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。