ClaudeとMagic Patternsを連携する方法 — 接続手順と読み取り専用の使い分け

Magic PatternsをClaudeにつなぐと何ができるか

Magic Patternsは、フロントエンドのデザインに特化したAIエージェントです。そのMCPサーバーをClaudeにつなぐと、Magic Patternsで作ったデザインをClaudeの会話やClaude Codeに持ち込めます。逆に、手元のコードベースにある画面をMagic Patternsへ取り込む使い方もできます。

Claudeのコネクタディレクトリでは「Anthropic verified」と表示され、2026年2月に追加されました。説明文は「Discuss and iterate on Magic Patterns designs」で、カテゴリはProductivityです。サインインが必須で、コネクタのURLは https://mcp.magicpatterns.com/mcp です。

ここで先に押さえておきたい点が1つあります。ディレクトリのページに載っているツールは get_design・read_files・update_design の3つだけです。一方でMagic Patterns側のドキュメントは、デザイン・成果物・デザインシステム・インスピレーション用に合計23のツールを説明しています。両者の差は、後半の「ツール名の違いをどう読むか」で見ていきます。

使い始める前の条件

Magic Patterns側に有料プランが要ります。MCP連携は無料プランに含まれません。

プランは、アカウントではなくワークスペース単位で適用されます。複数のワークスペースに入っている人は、無料のワークスペースと有料のワークスペースが混在します。つなぐ前に、サイドバーのワークスペース切り替えで、有料側を選んでいるかを見ておくと安全です。

もう1つの条件はクレジットです。次のツールは実行にクレジットを消費します。

• create_design(プロンプトを付けて呼ぶとき)
• create_slide_deck
• send_prompt

Starterには毎月1,000クレジット、Businessには5,000クレジットが、無料枠に加えて付与されます。ドキュメントには、大半のプロンプトは100クレジット未満という記載があります。また、APIキー認証でも利用分は通常のクレジットから引かれます。

claude.aiで接続する手順

接続はClaudeのディレクトリからの1クリック導入が最短です。設定ファイルを書く必要はありません。

Team・Enterpriseプランで、組織の管理者側の有効化が必要かどうかは、Magic Patternsのドキュメントに記載がありません。接続画面が出ないときは、Claudeの組織設定でコネクタが許可されているかを、管理者に確かめてもらいます。コネクタ全般の仕組みはClaude Connectorsとはにまとまっています。

Claude Codeで追加するコマンド

Magic Patternsのドキュメントによると、ディレクトリからの導入はClaude Codeにも効きます。自分で設定したいときは、HTTPトランスポートで追加します。

claude mcp add --transport http magic-patterns \
  https://mcp.magicpatterns.com/mcp

追加したら、Claude Codeの中で /mcp を実行します。OAuthの認証が始まり、完了するとMagic PatternsのリモートMCPサーバーが有効になります。JSONで登録したい場合はclaude mcp add-jsonの手順が使えます。その場合の本体は、url に https://mcp.magicpatterns.com/mcp を入れるだけの1エントリです。

接続後は、デザインのURLを渡して指示します。ドキュメントが示す指示の例は次のとおりです。

Integrate this design: https://www.magicpatterns.com/c/abcd into my project

読み取り専用エンドポイントで書き込みを止める

Magic Patternsには、デザインの作成・変更・公開を許さない読み取り専用のエンドポイントがあります。URLが違うだけで、OAuthもAPIキーも同じものが使えます。

読み取り専用側に登録されるツールは、次の10個だけです。

• list_design_systems
• get_editor_id_from_url
• get_inspiration_document
• get_design_status
• read_recent_message_history
• list_version_history
• get_artifact
• read_artifact_files
• get_design_system
• read_design_system_files

残りの13個、つまり create_design・create_slide_deck・send_prompt・create_new_artifact・write_artifact_files・publish_artifact・create_design_system・write_design_system_files・publish_design_system・create_inspiration_document・inspiration_add_variant・inspiration_update_variant・inspiration_clear_variants は、このエンドポイントでは登録されません。クライアントは一覧にも出せず、呼び出すこともできません。

Claude Codeに読み取り専用で入れる場合は、URLだけを差し替えます。

claude mcp add --transport http magic-patterns \
  https://mcp.magicpatterns.com/mcp/readonly

ここが運用上の分かれ目です。デザインをコードに取り込むだけなら、書き込み系のツールは要りません。読み取り専用で入れておけば、プロンプトの指示が曖昧でも、クレジットを消費する生成や公開は起こりません。

ディレクトリのワンクリック導入が、読み取り専用の側に切り替えられるかは、ドキュメントに記載がありません。読み取り専用で使いたい場合は、上のコマンドでの手動登録が確実な道です。

ツール名の違いをどう読むか

ディレクトリには3個、ドキュメントには23個のツールが載っています。ディレクトリの表示は get_design・read_files・update_design ですが、ドキュメントの一覧にこの3つの名前はありません。

ドキュメントで説明されている主なツールは、用途で4つの流れに分かれています。

ディレクトリの説明とドキュメントのツール名が一致しない理由は、どちらにも書かれていません。実際に自分の環境で何が見えるかは、接続後にClaudeへ「使えるMagic Patternsのツールを一覧にして」と頼むか、Claude Codeの /mcp で確かめるのが確実です。ツール名の取り違えは、権限の許可リストや指示文に書く名前がずれる原因になります。

生成を待つときの作法と、共同編集の落とし穴

Magic Patternsで生成を伴うツールは、すぐには終わりません。AIによる生成は通常2〜10分かかり、get_design_status を60秒より短い間隔で呼ばないよう案内されています。遅いのは正常で、エラーとして扱わないことも明記されています。

もう1つは共同編集の性質です。Magic Patternsは共同編集のエディタで、ユーザーがUIから変更を加えていることがあります。新しい作業の前には必ず get_design_status を呼んで、最新の有効な成果物を確かめます。前回の呼び出しの結果を、今も有効だと決めつけない扱いです。

デザインシステムの書き込みにも癖があります。write_design_system_files は検証エラーを返しても保存を止めない寛容な動作です。publish_design_system は検証エラーが残る間は公開を拒みます。書き込みでは、get_design_system で得た artifactId を baseArtifactId に渡します。他の編集と衝突すると409が返るので、読み直してやり直します。

Claude Codeに「コードベースが優先」を教える

デザインをそのままコードに貼ると、既存のコンポーネントやトークンと食い違います。Magic Patternsのドキュメントは、生成コードを本番コードではなく高精度のプロトタイプと位置づけています。コードがコードベースと食い違うときは、コードベースを優先するという考え方です。

この考え方は、Claude Codeの CLAUDE.md に書いておくと毎回効きます。次は、ドキュメントの趣旨に沿った規約の断片の例です。

## Magic Patternsのデザインを取り込むとき
 
- Magic Patternsのコードはプロトタイプとして扱い、そのまま貼らない
- 見た目(デザイン)を再現し、実装は既存のコンポーネント・トークン・規約に合わせる
- Magic Patternsのコードとコードベースが食い違ったら、コードベースを優先する
- 取り込み前に、対象デザインのURLからget_editor_id_from_urlで編集IDを引く

ドキュメントは、これをまとめた「Integration Skill」を配布しています。Claude Codeでは、プロジェクトの .claude/skills/integrate-magic-patterns-design/SKILL.md に保存すると、Magic PatternsのデザインやURLを渡したときに自動で有効になります。全体に効かせたいときは ~/.claude/skills/ 以下に置きます。

APIキーで認証する場合

OAuthの対話的な認証が使えない環境では、APIキーが代わりになります。CIや、ヘッドレスで動かすクライアントが当てはまります。

手順は2つです。Magic Patternsの設定画面でAPIキーを作成し、表示された値をすぐにコピーします。キーは一度しか見られません。次にMCPサーバーを同じ構成で登録し、Authorization: Bearer ヘッダーを足します。キーがあるとOAuthは完全に省かれます。

claude mcp add --transport http magic-patterns \
  https://mcp.magicpatterns.com/mcp \
  --header "Authorization: Bearer mp_your_api_key_here"

キーはチームの共有リポジトリや設定ファイルに直書きしません。ドキュメントはCodex向けの案内で、キーを環境変数に入れてBearerトークンの環境変数欄から参照する方法に触れています。Claude Codeでも、キーそのものをコマンド履歴や設定に残さない運用が無難です。

任意で x-mp-agent-name ヘッダーも付けられます。Magic PatternsのUI上で、どのエージェントや連携からの操作かを見分ける名前になります。

接続がうまくいかないときの切り分け

接続の手前で止まる原因は、多くが次のどれかです。上から順に確かめます。

Magic PatternsのドキュメントはCursorについて、ツールを使わずにWebを調べ始めたらMCPが動いていない合図だと注意しています。Claudeで同じ症状が出たときも、まずツール一覧を確かめます。

読み取り専用で使うか、書き込みも許すか

選び方は、Claudeに何を任せたいかで決まります。

プロンプトからの生成は、クレジットを使い、数分かかります。取り込みだけの用途なら、読み取り専用の方が事故がありません。

まとめ

Magic Patternsのコネクタは、ディレクトリからの1クリックで入ります。ただしMCP連携は有料プラン限定で、生成系のツールはクレジットを消費します。取り込みだけなら読み取り専用のURLを使い、書き込み系の13ツールを最初から外しておく構成が、いちばん手戻りの少ない入り方です。