Sketch Context MCP

🚀 Sketch Context MCP

Sketch Context MCPは、SketchデザインをCursor、Cline、WindsurfなどのIDEと統合するためのModel Context Protocol (MCP)サーバーです。このツールを使用することで、AIを活用したデザインからコードへのワークフローを実現できます。

🚀 クイックスタート

前提条件

• Node.js (v14以降)
• Sketch (v70以降)
• Cursor IDE、VS Codeまたは同様のIDE
• Sketchアカウント（ローカル）またはAPIアクセス（Sketch Cloudファイル）

インストール

# グローバルにインストール
npm install -g sketch-context-mcp

# ローカルのSketchファイルで実行
sketch-context-mcp --local-file=/path/to/your/file.sketch

# Sketch Cloudアクセスで実行
sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

または、npxで直接実行することもできます。

npx sketch-context-mcp --local-file=/path/to/your/file.sketch

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

1. リリースページから最新のプラグインをダウンロードします。
2. .sketchpluginファイルをダブルクリックしてSketchにインストールします。
3. プラグインはSketchの「Plugins > Sketch Context MCP」に表示されます。

Cursorとの統合

1. SketchファイルでMCPサーバーを起動します。

   sketch-context-mcp --local-file=/path/to/your/file.sketch
   

2. Sketchでプラグインを開きます。
   • 「Plugins > Sketch Context MCP > Open MCP Interface」を選択します。
   • サーバーポート（デフォルト: 3333）を入力します。
   • 「Connect」をクリックしてWebSocket接続を確立します。
3. CursorでMCPサーバーに接続します。
   • 「Settings > Features > Context」を選択します。
   • 新しいMCPサーバーを追加し、URLをhttp://localhost:3333/sseに設定します。
   • 「Connect」をクリックします。
4. Cursorのコンポーザーで、以下のようなコマンドを使用できます。
   • 「Show me the component with ID 12345」
   • 「List all components in the design」
   • 「Describe the button in the header」
   • 「Create a rectangle with width 200 and height 100」

✨ 主な機能

• ローカルおよびSketch CloudのSketchファイルの解析
• コンポーネント/シンボルの抽出
• アセット管理と自動ダウンロード
• Sketchプラグインを介した選択リンクのサポート
• WebSocketsとSSEを介したリアルタイム更新
• SketchをCursorに接続するためのインタラクティブなUI
• ローカルおよびSketch Cloudにホストされたファイルの解析
• ドキュメント構造とコンポーネント情報の抽出
• IDで特定のノードにアクセス
• Sketchファイル内のすべてのコンポーネントをリストする
• Cursorからのコマンドで矩形、テキストなどの要素を作成する

📦 インストール

前提条件

• Node.js (v14以降)
• Sketch (v70以降)
• Cursor IDE、VS Codeまたは同様のIDE
• Sketchアカウント（ローカル）またはAPIアクセス（Sketch Cloudファイル）

インストール手順

# グローバルにインストール
npm install -g sketch-context-mcp

# ローカルのSketchファイルで実行
sketch-context-mcp --local-file=/path/to/your/file.sketch

# Sketch Cloudアクセスで実行
sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

または、npxで直接実行することもできます。

npx sketch-context-mcp --local-file=/path/to/your/file.sketch

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

1. リリースページから最新のプラグインをダウンロードします。
2. .sketchpluginファイルをダブルクリックしてSketchにインストールします。
3. プラグインはSketchの「Plugins > Sketch Context MCP」に表示されます。

💻 使用例

基本的な使用法

Cursorで以下のようなコマンドを使用することで、Sketchファイルの情報にアクセスできます。

# コマンド例
"Show me the details of the layer with ID 12345"
"Create a blue rectangle with width 300 and height 200"
"Add a text layer with the content 'Hello World'"

📚 ドキュメント

概要

このツールは、Cursor IDEがSketchデザインファイルにアクセスし、解釈することを可能にします。以下のように動作します。

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

コンポーネント

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

1. MCP Server：Model Context Protocolを実装し、SketchファイルデータをCursor IDEに提供するNode.jsサーバーです。
2. Sketch Plugin：WebSocketを介してMCPサーバーと通信するUIインターフェース付きのSketchプラグインです。

利用可能なMCPツール

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

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

これらのツールにより、Cursorは以下のことができます。

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

Sketch APIキーの取得

Sketch APIキーは、Sketch Cloudにホストされたファイルにアクセスするために必要なOAuthアクセストークンです。以下の手順で取得および使用します。

ステップ1: Sketch Cloudで認証する

Sketch Cloudの資格情報（メールアドレスとパスワード）を使用して、認証エンドポイントにPOSTリクエストを送信してアクセストークンを生成します。

curl -X "POST" "https://auth.sketch.cloud/oauth/token" \
  -H 'Content-Type: application/json' \
  -d '{
    "email": "YOUR_EMAIL",
    "password": "YOUR_PASSWORD",
    "grant_type": "password"
  }'

YOUR_EMAILとYOUR_PASSWORDをSketch Cloudアカウントの資格情報に置き換えます。

ステップ2: アクセストークン

レスポンスにはaccess_tokenが含まれています。このトークンは、Sketch CloudにホストされたファイルにアクセスするためのAPIキーとして機能します。

ステップ3: トークンの使用

セキュリティ上の理由から、トークンを環境変数として渡すことをお勧めします。

export SKETCH_API_KEY=<your-access-token>

または、コマンドライン引数として含めることもできます。

sketch-context-mcp --sketch-api-key=<your-access-token>

ステップ4: トークンの更新

トークンが期限切れになった場合は、最初のレスポンスで提供されたrefresh_tokenを使用して新しいアクセストークンを取得します。

セキュリティのベストプラクティス

APIキーのセキュリティを確保するために、以下のガイドラインに従ってください。

• キーをハードコードしない：APIキーをアプリケーションやソースコードにハードコードしないでください。代わりに、環境変数またはシークレット管理ツールを使用してください。
• ローカル開発で.envファイルを使用する：APIキーを.envファイルに保存し、dotenvのようなライブラリを使用して読み込みます。

  SKETCH_API_KEY=<your-access-token>
  

  .envファイルが.gitignoreに追加されていることを確認し、誤って公開されないようにしてください。
• 定期的にトークンをローテーションする：トークンが漏洩または侵害された場合は、すぐに取り消して新しいトークンを生成してください。
• 監視と監査を行う：リポジトリを公開された資格情報についてスキャンするツール（例: GitHubのシークレットスキャニング機能）を使用してください。
• 短期間のトークンを使用する：可能な場合は、短期間のトークンを使用し、必要に応じて更新して、トークン漏洩の影響を最小限に抑えます。

設定

サーバーは、環境変数（.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. 「Connect」をクリックしてWebSocket接続を確立します。
3. 接続が成功すると、チャネルIDとともに確認メッセージが表示されます。
4. Cursorをサーバーに接続するための指示に従います。

選択タブ

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

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

概要タブ

概要タブでは、プラグインに関する情報と使用方法が提供されます。

Cursorでの使用

SketchとCursorの両方がMCPサーバーに接続されたら、以下のように操作できます。

1. Sketchで要素を選択します。
2. Sketch Context MCPプラグインを使用して、それらのIDをコピーします。
3. Cursorで、これらの要素をIDで参照します。

Cursorでのコマンド例：

• "Show me the details of the layer with ID 12345"
• "Create a blue rectangle with width 300 and height 200"
• "Add a text layer with the content 'Hello World'"

トラブルシューティング

一般的な問題

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

ログ

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

DEBUG=sketch-mcp:* npx sketch-context-mcp

🔧 技術詳細

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

1. MCP Server：Model Context Protocolを実装し、SketchファイルデータをCursor IDEに提供するNode.jsサーバーです。
2. Sketch Plugin：WebSocketを介してMCPサーバーと通信するUIインターフェース付きのSketchプラグインです。

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

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

📄 ライセンス

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

⚠️ 重要提示

このプロジェクトは現在テスト段階であり、完全に安定しているとは限りません。