Framer MCP Server
Framer MCPサーバーでClaude連携・Webデザインとプロトタイプ作成を自動化
node /path/to/framer-mcp/server/dist/index.js概要
Framer MCP Serverの設定方法と使い方。
Webデザイン・プロトタイピングツール「Framer」をClaudeから操作できるMCPサーバー。
Framerキャンバス上のノード作成・更新・削除、コンポーネントの操作、コードファイルの管理が可能。
ClaudeとFramerのMCPサーバー連携により、ページの自動生成・コンテンツ更新・デザインの自動操作を実現できる。
プログラムからFramerのキャンバスを制御するためのWebSocket経由のブリッジアーキテクチャを採用している。
設定方法はGitHubリポジトリをクローンしてローカルサーバーを起動するだけでシンプルに完結する。
料金・APIキー情報
料金
無料プランありAPIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
ClaudeにFramerキャンバス上のテキストや画像などのノードを作成・編集させられる
コンポーネントの一覧取得や挿入をClaudeに指示してデザイン作業を自動化できる
コードファイルの作成・読み取り・更新をClaudeから操作してFramerプロジェクト管理を効率化できる
エディタのビューポート制御やページ生成をClaudeに自動実行させられる
Claudeを通じてFramerプロジェクトのメタデータを取得・管理できる
セットアップ手順
- 1
GitHubからリポジトリをクローンする：git clone https://github.com/tmcpro/framer-mcp
- 2
cloneしたディレクトリに移動し npm install && npm run build を実行する
- 3
claude mcp add framer -- node /path/to/framer-mcp/server/dist/index.js
設定ファイル
コピー前に確認
Framerアカウント必須（無料プランあり）。Node.jsおよびnpmが必要。FramerのMarketplaceでMCP AIプラグインをインストールしてローカルサーバーと接続する。
claude mcp add framer -e AUTH_MODE=none -- node /path/to/framer-mcp/server/dist/index.js