DesignLayer MCP を公開しました。Cursor・Claude Code から直接コンポーネントを取り込めます
2026年9月30日 · リリース
エディタのチャットで頼むだけで、DesignLayer のカタログ検索とコンポーネントの取り込みができるようになりました。接続はブラウザで許可するだけで、API キーのコピーは要りません。Plus / Pro プラン向けです。
サイトとエディタの往復がなくなります
これまでは、DesignLayer のサイトでコンポーネントを探し、Copy for Cursor を押して、エディタのエージェントに貼り付ける流れでした。
DesignLayer MCP をエディタにつなぐと、この往復がなくなります。Cursor や Claude Code のチャットで「DesignLayer でヒーローセクションを探して」「album-calendar をトップページに入れて」と頼むだけで、エージェントがカタログを検索し、コンポーネントを取り込みます。
取り込む内容はサイトの Copy for Cursor と同じです。ファイルを書き、ライブプレビューの動きや余白に合わせて組み込むのは、これまでどおりエージェントです。
接続はブラウザで許可するだけ
API キーを発行して設定ファイルに貼る必要はありません。エディタに DesignLayer を追加すると、ブラウザで DesignLayer の同意画面が開きます。ログイン中のアカウントを確認して「接続を許可」を押せば完了です。
・Cursor — アカウント設定の「DesignLayer MCP」にある「Cursor に追加」ボタンから追加できます。
・Claude Code — ターミナルで claude mcp add --transport http DesignLayer https://design-layer.com/mcp を実行し、/mcp から Authenticate を選びます。
・そのほかの MCP クライアント — https://design-layer.com/mcp を追加してください。手元で動かしたい場合は npx -y designlayer-mcp も使えます。
対象のプラン
DesignLayer MCP は Plus / Pro プランでご利用いただけます。どちらもコンポーネントのコピーが無制限なので、MCP からも回数を気にせず取り込めます。
完成1ページの Templates は現在準備中のため、MCP ではまだ取得できません。提供開始時にサイト上でお知らせします。
接続の管理
接続中のエディタは、アカウント設定の「DesignLayer MCP」にある「接続中のアプリ」に並びます。「解除」を押すと、そのエディタは接続し直すまで DesignLayer を使えなくなります。
はじめ方
手順はスクリーンショット付きのガイド「DesignLayer MCP を Cursor・Claude Code に接続する」（/docs/cursor-mcp）にまとめています。