AI と MCP

Figma MCP の先へ：キャンバスが HTML のデザイン MCP サーバー

デザインツールは今、MCP を通じて AI エージェントを受け入れています。エージェントに何ができるかは、キャンバスが何でできているかで決まります。それが HTML なら、エージェントはページそのものを書けます。

Baurice Ley · 6分で読めます · 2026年10月9日に事実確認済み

MCP サーバーがデザインツールにもたらすもの

MCP（Model Context Protocol）は、AI エージェントがほかのアプリのツールを使うための標準的な仕組みです。MCP サーバーを動かすデザインツールなら、コードエディターやチャットアプリから、エージェントがファイルを読み取り、変更し、コードに変換できます。

Figma の MCP サーバーの仕組み

Figma のヘルプセンターによると、Figma の MCP サーバーはエージェントにデザインのコンテキスト、変数、コンポーネント、レイアウトのデータを渡し、選択したフレームからコードを生成できます。リモートサーバーを通じて、エージェントが Figma ネイティブのコンテンツを作成・変更することも可能です。この書き込み機能はベータ期間中は無料で、Figma は今後従量課金の有料機能になるとしています。

リモートサーバーはすべてのプランで利用できます。デスクトップサーバーには、有料プランの Dev シートまたは Full シートが必要です。

重要なのは、エージェントが扱うのはベクターのデザインだという点です。そこから Web ページを得るには、依然として変換の工程が必要です。

キャンバスが HTML だと何が変わるか

Kalka では、すべてのレイヤーが HTML 要素で、すべてのスタイルが CSS です。だからエージェントは、誰かが作り直すためのデザインを説明するのではありません。ページそのものを書き、それがキャンバス上に、手で選択して編集できるレイヤーとして現れます。

// Kalka MCP サーバーで予定しているツール
get_tree ページのレイヤーを HTML として読み取る
write_html ページのセクションを追加・置換する
update_styles 任意のレイヤーの CSS を変更する
get_screenshot デザイナーのように結果を目で確認する
export ファイルを書き出して返す

3つの違い

  • ローカルで、利用上限なし。サーバーはあなたのマシン上でデスクトップアプリと一緒に動きます。ツール呼び出しの上限も、アカウント登録も不要です。
  • どんなエージェントでも。MCP に対応していれば、そのエージェントは Kalka で作業できます。特定のモデルに縛られません。
  • 変換は不要。エージェントが書いたものがそのまま公開されます。あなたのフォルダにある HTML と CSS です。

具体例

あなたが頼みます：「ヒーローと同じスタイルで、3つのプランがある料金セクションを追加して」。エージェントは get_tree でページを読み取り、write_html で section.pricing を書き、get_screenshot で確認します。あとはあなたがデザインパネルで角の半径と色を手で調整するだけ。書き出しも引き渡しもありません。

Kalka は開発中のオープンソースプロジェクトです。上記のツール一覧はプロダクト仕様に基づくもので、リリースまでに変更される可能性があります。