Claude / Codex で作ったサイトを、Framer MCP で「Framerにコピーして」の1文でFramerに移し、細部はFramerで詰める
コードで作ったLPを、ノーコードのFramerで人が直接いじれる状態にする。クライアントとのやり取りやテンプレート化にも使える。
どんな問題を解決するか / いつ使うか
エージェントで作ったサイトは、細かい余白や文言の調整をするたびにプロンプトを書くことになり、デザイナーやクライアントが自分で直せない。Framerに移せば、キャンバス上で直接仕上げ、CMSやホスティングもFramerに任せられる。
やり方
- Framer公式のMCP（サーバーURL
https://mcp.framer.com/mcp）を、Claude Code・Codex・Cursor などに追加し、Framerアカウントで接続を許可する。Framerのエディタを開いておく必要はない。 - エージェントに次のように頼む（@MengTo の例）：
text
Create a copy of this site in Framer using the MCP: <サイトのURL> - Framer上で細部を詰める。逆に、Framerのプロジェクトに対してページ追加やCMSの更新をエージェントに頼むこともできる。
注意点
- エージェントの変更は、公開を明示的に頼むまでプロジェクトやブランチの中にとどまる。ブランチで作業させ、mainと比べてから公開すると安全。
- エージェントはキャンバス・コンポーネント・一部のプロジェクト設定・CMSに、接続したアカウントの権限で触れる。
- 似た往復の流れ：AIで作ったLP・実装をFigmaのデザインデータに戻し、Figma上で赤入れ・編集する。
出典
- @MengTo · 2026-10-23
- Framer MCP: framer.com/mcp/（内容を確認）