ClaudeとSketchのMCP連携 — Macのデザインを会話で読み書きする手順
SketchのMac版には、Claudeから書類を読み書きできるMCPサーバーが内蔵されています。起動と接続の手順、8つのツール、ローカル限定の安全面、つまずいたときの切り分けをまとめます。
SketchをClaudeにつなぐと、開いているデザイン書類の構造を読ませたり、アイコンを書き出させたり、レイヤーを書き換えさせたりできます。接続先はクラウドのサービスではありません。SketchのMacアプリに内蔵されたMCPサーバーで、自分のMac上だけで動きます。
この記事では、起動から接続、使えるツール、頼み方、動かないときの切り分けまでを順に扱います。
Sketch MCPサーバーは何で、どこで動くか
Sketch MCPサーバーとは、Sketchアプリが自分の中で立ち上げる軽量なローカル専用のウェブサーバーです。ClaudeなどのAIクライアントは、これを通じて書類のデータを読んだり変更したりします。
使う前に押さえる条件は3つです。
- Sketch 2025.2.4以降が必要です
- Mac App Store版には入っていません。sketch.comからMacアプリをダウンロードします
- サーバーは初期状態でオフです。自分で起動したときだけ動きます
セキュリティの扱いは明快です。サーバーはローカル専用で、リモートからはアクセスできません。各呼び出しはSketch自身が手元で処理し、結果だけがAIクライアントに返ります。
Claudeのコネクタ紹介ページにも「Sketch」が載っています。提供元はSketch B.V.で、Anthropic verifiedの表示があり、追加時期は2026年3月です。紹介ページの説明も、Sketchの内蔵MCPサーバーにつなぐという内容で、Macアプリと書類を開いておく前提は同じです。
Claudeからの接続口は2つ
Claude Code
claude mcp add でローカルのURLを登録します。権限ルールも自分で書けます。
Claude Desktop
Extensionsから「Sketch」を選んでInstallします。確認の出し方はConfigureで切り替えます。
Sketch側でMCPサーバーを起動する
先にSketch側を動かしておきます。AIクライアントを設定する前にサーバーが起動していないと、つなぎ先が存在しません。
サーバーを起動するまで
- 1
書類を開く
Sketchを起動して、読み書きさせたい書類を開きます。
- 2
コマンドバーを開く
⌘Kでコマンドバーを開き、「MCP」と入力します。
- 3
Start MCP Serverを選ぶ
候補から「Start MCP Server」を選びます。
- 4
ローカルネットワークを許可する
macOSのダイアログがSketchのローカルネットワークへのアクセスを尋ねたら「許可」を選びます。サーバーの動作に必要です。
- 5
アドレスを確かめる
書類の下部に、サーバーのアドレスとポートを知らせるメッセージが出ます。
設定画面からも切り替えられます。Settings > GeneralのMCP Serverで、起動と停止ができます。
コマンドバーを開くキーは、Sketchのドキュメントでは⌘Kです。Claudeのコネクタ紹介ページの手順は「Sを押してコマンドバーを開く」と書かれています。開かないときは、Settings > GeneralのMCP Serverから起動する方法もあります。
Claudeに接続する
Claude Codeの場合
次のコマンドでローカルのMCPサーバーを登録します。ポートの既定値は31126です。
claude mcp add --transport http sketch http://localhost:31126/mcp
claude mcp get sketch2行目で、Claude Codeが接続できているかを確かめます。サーバー名は sketch にしておくと、後で書く権限ルールの名前とそろいます。
登録の範囲は --scope で変えられます。何も付けなければ、そのプロジェクトだけのローカル範囲に保存されます。Sketchは自分のMac専用のサーバーなので、チームで共有するプロジェクト範囲(--scope project)に入れると、Sketchを使わない同僚の環境で接続失敗の表示が出ることがあります。個人で使うなら、既定のローカル範囲かユーザー範囲(--scope user)が向いています。
Claude Desktopの場合
Claudeのデスクトップアプリで、Claude > Settings > Extensionsを開き、Browse Extensionsを押します。「Sketch」を検索し、Sketchのコネクタを選んでInstallします。インストールすると、Extensionsの「Installed on your computer」にSketchが並びます。
Configureを開くと、ツールの権限を選べます。Claudeが毎回確認する設定と、常に許可する設定です。後述のrun_codeがあるので、最初は毎回確認にしておくと安心です。
使える8つのツール
Claudeはどのツールを呼ぶかを自分で選ぶので、ツール名を指定する必要は基本的にありません。つなぐと、使えるツールとその使い方がサーバーから渡され、モデルの文脈に入ります。ただし、プロンプトでツール名を挙げて方針を誘導することもできます。
| ツール | 返す、または行うこと |
|---|---|
run_code | 返す、または行うことSketchAPI全体を使うスクリプトを実行する |
get_document_info | 返す、または行うこと書類のID、ファイル名、ページごとのレイヤー数、最上位フレームの名前・位置・寸法 |
get_layer_tree_summary | 返す、または行うことレイヤー構造を、種類・ID・位置・寸法・スタック設定・文字・オーバーライド数つきのテキスト階層で返す |
get_design_assets | 返す、または行うことシンボル、テキストスタイル、レイヤースタイル、カラースウォッチ、フレームテンプレート、グラフィックテンプレート |
get_screenshot | 返す、または行うこと指定レイヤーまたは現在のキャンバスのスクリーンショット |
get_libraries | 返す、または行うこと書類にリンクされたライブラリの名前とID |
get_symbol_overrides | 返す、または行うことシンボルインスタンスで、シンボルを切り離さずに変えられるプロパティ |
get_guide | 返す、または行うことSketch組み込みの参照ガイド |
中心になるのは run_code です。AIモデルはコードを書くのが得意なので、プラグインと同じようにSketchAPI全体を呼べます。複数手順、分岐、エラー処理を含むスクリプトで自動化できます。コードがエラーになれば、モデルがエラーを読んで直し、意図した結果になるまで自動でやり直します。経過を見守ることも、途中で止めることもできます。
残りの7つは、書類の様子を知るための道具です。get_layer_tree_summary はスクリーンショットを撮らずに構造を地図のように渡せます。get_screenshot は、書き換えた結果をモデル自身が見て確かめるときに役立ちます。
頼み方の例と、Claude側で整えておくこと
Sketchのドキュメントは、次のような依頼を例に挙げています。
- 選択中のフレームの見た目の構成を説明させる
- インスタンスが1つもないシンボルマスターを探させる
- 選択範囲で使われているデザイントークンを一覧にさせる
icon/で始まるシンボルを、現在のページからSVGとしてデスクトップに書き出させる- 選択中のフレームの誤字や文法を直させる
- 選択中のフレームをReactのコードにさせる
例は基本形で、良い依頼は手順を細かく分け、守るルールを添え、結果の確かめ方まで示すものだとされています。
特定のレイヤーを指すときは、レイヤーIDをプロンプトに貼ります。レイヤーを選び、コマンドバーの「Copy Layer ID」を使います。メニューバーのPlugins > Developerにもあり、MCPサーバーの起動中はキャンバスやレイヤーリストの右クリックメニューのCopyにも出ます。
Claude Codeで繰り返し使うなら、依頼の型をCLAUDE.mdに書いておく方法があります。次は一例です。
## Sketchでの作業ルール
- 書き換える前に get_layer_tree_summary で対象の構造を読む
- 変更後は get_screenshot で結果を確かめ、崩れていれば直してから報告する
- 書き出しは `icon/` で始まるシンボルだけを対象にする
- 元のシンボルは切り離さず、get_symbol_overrides で変えられる項目だけ変えるこれはSketchのドキュメントにある「ルールを与える」「確かめ方を示す」という助言を、Claude Codeの設定ファイルに落とした例です。この内容がそのまま動くと保証するものではないので、自分の書類で試してから残してください。
権限ルールで読み取りと書き込みを分ける
Claude Codeでは、MCPツールの名前は mcp__<サーバー名>__<ツール名> の形になります。サーバー名を sketch にしておけば、get_ で始まるツールをまとめて許可し、run_code だけ毎回確認にできます。
{
"permissions": {
"allow": ["mcp__sketch__get_*"],
"ask": ["mcp__sketch__run_code"]
}
}許可ルールのワイルドカードは、mcp__<サーバー名>__ を文字どおり書いた後ろにだけ使えます。サーバー名の部分にワイルドカードは置けません。get_ で始まる7つのツールは、Sketchのドキュメント上は情報を返す説明になっています。一方 run_code はSketchAPI全体を呼べるので、書類を書き換えられます。この線引きで、閲覧だけを自動化し、変更は毎回目で見ることになります。
動かないときの切り分け
接続できないとき、上から確かめる
- QSketchは公式サイトからダウンロードしたMac版で、2025.2.4以降ですか?答えがいいえのとき答えがはい
Mac App Store版にはMCPサーバーがありません。sketch.comから入れ直し、バージョンを確かめます。
- QStart MCP Serverを実行して、書類の下に確認メッセージが出ましたか?答えがいいえのとき答えがはい
サーバーが起動していません。Settings > GeneralのMCP Serverからも切り替えられます。
- QSystem Settings > Privacy & Security > Local NetworkでSketchが有効ですか?答えがいいえのとき答えがはい
有効にします。すでに有効なら、スイッチを一度オフにして入れ直し、Sketchを再起動して試します。
- Qポートがほかのローカルサービスと衝突していませんか?答えがいいえのとき
ポート番号を変えます。次の項に手順があります。
別のポート番号を試すか、Macを再起動してからSketchを開き直します。Sketchのドキュメントは、起動時のエラーを知らせるよう案内しています。
ポート番号を変える
Sketchを終了してから、ターミナルで次を実行します。ポート番号は1024から49151の範囲で選びます。
defaults write com.bohemiancoding.sketch3 mcpServerPortNumber -int 1234Sketchを開き直してサーバーを起動します。既定に戻すには、次のコマンドを実行してSketchを再起動します。
defaults delete com.bohemiancoding.sketch3 mcpServerPortNumber接続URLにはポート番号が含まれるので、変更したら登録済みのURLも合わせ直します。Claude Codeなら claude mcp remove sketch で削除してから、新しいポートで claude mcp add をやり直します。
MCPの機能を画面から隠す
SketchのMacアプリからMCPサーバーの機能自体を表示させたくないときは、次を実行します。使わない人の画面にスイッチを出さない用途です。
defaults write com.bohemiancoding.sketch3 mcpServerEnabled -bool NO似た連携との違い
同じデザイン系でも、つなぎ方が違います。
- Figma MCPサーバーは、クラウドのリモートサーバーとデスクトップ版の両方があります。SketchのMCPサーバーはMacアプリの内側で動くローカル専用で、リモート接続の口がありません
- ClaudeのSketchUpコネクタは3Dモデリングのツールにつなぐ別の製品です。名前は似ていますが、Sketchとは関係なく、扱うのは
.skpファイルです - Claude Canva連携は、Canvaのデザインを対象にするコネクタです
Sketchの場合、書類はMacのローカルで開いたままです。クラウドに上げずに済む一方、Sketchが起動して書類が開いていなければ、ClaudeからはSketchが見えません。作業は、デザイナーが自分のMacで書類を開いた状態から始まります。
まとめ
Sketch MCPサーバーは、アプリ内蔵・ローカル限定・初期オフの3点がそろった連携です。Mac版のSketch 2025.2.4以降でStart MCP Serverを実行し、Claude Codeなら claude mcp add --transport http sketch http://localhost:31126/mcp の1行で接続できます。
導入後に最初に決めるのは、run_code の扱いです。読み取り系のツールを自動許可して、スクリプト実行だけ確認を残す構成なら、書類の構造把握から試せます。書き換えは、複製した書類で結果を見てから本番の書類に広げると、取り返しのつかない変更を避けられます。