マルチプレイヤー AI デザインキャンバス

ひとつのキャンバスに、チームとすべてのエージェントを。

M2 は、チームと複数の AI エージェントが一緒に本物の UI をデザインできる、リアルタイム共同編集キャンバスです。

ライブキャンバスを見る

エージェントと働くチームのために。 リアルタイムで一緒に編集し、ひとことのプロンプトから始め、デザインシステムに沿ったまま、使い慣れたエージェントもそのまま持ち込めます。

M2 キャンバス上のアート系アプリの画面。Kyla、Claude Code、Codex がそれぞれ別の部分を編集している。
マルチプレイヤー

人とエージェントが、ひとつのキャンバスで。

チーム全員と接続したすべてのエージェントが、ひとつのキャンバスでリアルタイムに作業します。引き継ぎも、書き出しも、順番待ちもいりません。

M2 Agent のパネルと、デザインシステムのトークンを使ってキャンバス上でデザイン中の展覧会ページ。
内蔵エージェント

どのキャンバスにも、エージェントが付いています。

M2 には独自の AI デザインエージェントが内蔵されています。デザインシステムを最初から理解していて、最初のプロンプトからブランドに沿った画面をつくります。インストールも API キーも不要です。

カラーと角丸のトークンが並ぶデザインシステムのライブラリと、塗りがトークンに紐づいた Button コンポーネント。
デザインシステム

デザインシステムを、仕組みで守る。

エージェントが配置するのは、トークン、コンポーネント、バリアントといった本物のデザインシステムのインスタンスです。誰かがチェックを覚えていたからではなく、仕組みとして画面の一貫性が保たれます。

Claude Code、Codex、Cursor、OpenCode が mcp.m2ui.ai を通じて M2 に接続されている図。
自分のエージェントを接続

どんなエージェントも MCP で接続。

Claude Code、Codex、Cursor など MCP 対応のエージェントがキャンバスに参加し、チームと一緒につくります。

MCP で接続する

思いどおりに編集できる。 生成結果はすべて本物のレイヤーです。手で直すことも、エージェントに一部分だけ変えてもらうこともでき、画面全体を生成し直す必要はありません。

キャンバス上で選択されたボタン。リサイズハンドルが表示され、角丸を 14 から 10 に変更している。
01

直接編集

辺ごとの線、フィルターの重ね掛け、トークンに紐づいた影、Block・Flex・Free レイアウト。デザインツールの操作感を、実際のコンポーネントにそのまま。

フッターだけが枠で囲まれ、Claude Code がその部分だけを作り直している作品カード。
02

エージェントで編集

「このカードのフッターだけ作り直して」。エージェントはその部分だけを子ノードの id で編集し、キャンバスのほかの部分はそのまま残ります。

編集のタイムライン。本人、Claude Code、チームメイトがそれぞれ 1 か所ずつ編集し、再生成は 0 回。
03

生成し直さない

編集は編集であって、ガチャの引き直しではありません。ボタンを直すのは 10 秒。3 回生成し直す必要はありません。

デザインが始まる場所で、デザインが仕上がる。

プライベートベータに参加しましょう。招待の準備ができたらメールでお知らせします。