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

スケッチコンテキストMCP

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

概要

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

1. Sketchファイル（.sketch）を解析するサーバーを提供する
2. カーソルや他のIDEがコンテキストに使用するMCPプロトコルを実装する
3. Sketchファイルから特定のコンポーネントとレイヤーを参照できるようにします

コンポーネント

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

1. MCP サーバー: モデル コンテキスト プロトコルを実装し、Sketch ファイル データを Cursor IDE に提供する Node.js サーバー
2. Sketch 選択ヘルパー プラグイン: MCP サーバーで使用する選択 ID をコピーするのに役立つ Sketch プラグイン

サポートされている機能

• ローカルおよびクラウドの Sketch ファイルの解析
• コンポーネント/シンボル抽出
• 資産管理と自動ダウンロード
• Sketch Selection Helperプラグインによる選択リンクのサポート
• SSEによるリアルタイム更新
• ローカルファイルとSketch Cloudホストファイルの両方を解析する
• 文書構造とコンポーネント情報の抽出
• IDで特定のノードにアクセスする
• Sketchファイル内のすべてのコンポーネントをリストする

はじめる

前提条件

• Node.js (v14以降)
• API アクセスを持つ Sketch アカウント (Sketch Cloud ファイルのみ必要)

インストール

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

カーソルとの統合

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

1. Sketch ファイルを使用して MCP サーバーを起動します。
   sketch-context-mcp --local-file=/path/to/your/file.sketch
2. カーソルで、MCP サーバーに接続します。
   • 設定 > 機能 > コンテキストに移動します
   • URLを入力してください: http://localhost:3333
   • 「接続」をクリック
3. カーソル コンポーザーでは、次のことが可能になりました。
   • ID でコンポーネントを参照する:「ID 12345 のコンポーネントを表示してください」
   • すべてのコンポーネントを一覧表示:「設計内のすべてのコンポーネントを一覧表示します」
   • 特定の要素の詳細を取得する:「ヘッダーのボタンについて説明します」

Sketchファイルの操作

Sketch には Figma のような「選択範囲へのリンクをコピー」機能が組み込まれていないため、次の操作が可能です。

1. 利用可能なすべてのコンポーネントを確認するには、 list_componentsツールを使用します。
2. 特定のコンポーネントをIDで参照する
3. SketchプラグインAPIを使用して選択IDをエクスポートします（以下のSketchプラグインのセクションを参照）

構成

サーバーは、環境変数（ .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 : ヘルプメニューを表示する

カーソルに接続

サーバーを起動する

次のような出力が表示されます。

カーソルをMCPサーバーに接続する

1. オープンカーソルIDE
2. 設定に移動 (⚙️)
3. 機能タブに移動します
4. 「コンテキスト」セクションを見つけます
5. MCP サーバーの URL を入力します: http://localhost:3333
6. 「接続」をクリック

サーバーに接続すると、Cursor の設定に緑色のステータス インジケーターが表示されます。

カーソルの使用

MCP サーバーに接続すると、Cursor を使用して使用を開始できます。

1. エージェントモードでカーソルを使用していることを確認してください
2. カーソルコンポーザーでSketchファイルへのリンクをドロップする
3. カーソルにデザインを分析または操作するよう依頼する

たとえば、「この Sketch デザインを分析し、レイアウトに一致する React コンポーネントを作成します」と言うことができます。

選択リンクの操作

Sketch ファイル内の特定の要素を参照するには:

1. スケッチ選択ヘルパープラグインをインストールする（下記参照）
2. スケッチで要素を選択する
3. プラグインメニューからプラグインを実行します（またはキーボードショートカットを使用します）
4. IDはクリップボードにコピーされます
5. 特定の要素についてカーソルと対話するときにこれらのIDを使用します

スケッチ選択ヘルパープラグインのインストール

このプラグインは、MCP サーバーで使用するために Sketch で選択した要素の ID を取得するのに役立ちます。

自動インストール

インストール スクリプトを実行します。

手動インストール

1. sketch-selection-helper.sketchpluginフォルダを Sketch プラグイン ディレクトリにコピーします。
   ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/
2. すでに実行されている場合はSketchを再起動します

プラグインの使用

1. Sketchドキュメントを開く
2. 1つまたは複数のレイヤーを選択
3. プラグイン > スケッチ選択ヘルパー > 選択IDのコピーに移動します。
4. IDはクリップボードにコピーされます
5. これらのIDをMCPサーバーで使用して特定の要素を参照します

たとえば、IDをコピーした後、カーソルに「スケッチデザインからID 12345のボタンを分析してください」と要求することができます。

コンポーネントの操作

Sketch ファイル内の特定のコンポーネントを参照するには:

1. Sketchファイルを開く
2. 参照したいコンポーネントを選択してください
3. IDをコピーするかリンクを作成してください
4. カーソルと会話するときにこのID/リンクを使用してください

資産運用管理

資産は次の場合に自動的に処理されます。

• 画像を使用してコンポーネントにアクセスする
• シンボルの操作
• エクスポートされたアセットの取り扱い

サーバーは自動的に次の処理を実行します。

• 必要なアセットをダウンロードする
• 資産バージョンの管理
• コンポーネント内のアセット参照を処理する

トラブルシューティング

よくある問題

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

ログ

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

貢献

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

ライセンス

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