M3E Canvas｜UIスケッチをAIコーディング用プロンプトに変換

ポイント

• 画面と遷移をプロンプト化：4言語対応、Android/Web向けを選択
• M3 Expressive部品で組める：形が変わるローディングも移植済み
• バックエンド無し：データもAI補助のキーもブラウザ内に保存

概要・解決する課題

AIコーディングツールに複数画面のアプリを頼むとき、画面の配置や「どのボタンでどの画面へ移るか」を文章だけで伝えるのは手間がかかります。

M3E Canvasでは、部品を置いた画面をタップ・スワイプで遷移させて動きを確かめ、その設計を簡潔な自然言語のプロンプトとしてコピーできます。部品ごとに書いた「振る舞い」メモもプロンプトに入り、実装先はAndroid（既定）かWebを選べます。あとはClaude Code、Codex、Gemini CLI、Cursorなどに貼り付けてアプリを作るよう頼む流れです。

ただし、本ツール自体がコードを直接エクスポートするわけではなく、実際のアプリコード構築は外部のAIコーディングツールに依存する点に留意が必要です。

なぜ注目されているか

画面のスケッチと「このボタンを押したらこの画面へ」という遷移・挙動メモを、そのままAIへの指示として渡せる点が特徴です。READMEのデモでは、レシピアプリを組んでテーマを変え、プロンプトをAIコーディングツールに渡し、できたアプリをAndroidで動かすまでを見せています。

テーマ（配色・形状・タイポグラフィ・モーション）の4軸をまとめて変えられるほか、同じ名前のスマホ画面とデスクトップ画面を「1つの画面の2つの幅」としてプロンプトに書き出せます。

主なユースケース

• プロトタイプからアプリ実装への移行： ブラウザ上で必要な画面（スマホサイズ：412×892、デスクトップサイズ：1280×800）を配置し、ボタンに遷移先とトランジション（4方向のスライド、フェード、拡大など）を設定します。その後プロンプトをコピーし、AIエディタに貼り付けてアプリの作成を依頼します。
• エージェントとの協調設計（ベータ機能）： Claude CodeやCodexなどのコーディングエージェント向けの指示をコピーできます。エージェントがagent.mdを読んでスケッチを作り、設計を開ける共有リンクで返してきます。

npm install
npm run dev

実際に使ってみて

2026年9月14日にローカルで起動し、曜日ごとのルーチンを管理するタスクアプリのホーム画面を組んでみました。BETA表示の付いた「AI で作る」は、手持ちの無料枠のGeminiやLM Studioのgemma 4だと、モデルが部品の必須項目（label・icon・variant）を省きがちで、1つでも欠けると下書き全体が読み込めませんでした。gemma 4では、cloneしたM3E Canvasの lib/ai.ts（下書きを作る draftDesign 関数）を手元で書き換え、欠けた項目を既定値（空文字・null・filled）で埋めてから読み込むようにして動かしています。

組んだ画面からWeb向けのプロンプトを出してClaude Codeに渡すと、詳細・追加・編集・削除まで備えたアプリがビルドまで通りました。ただ、出力されるプロンプト自体に「ブラウザでの動作検証は不要」という一文が入っているため、エージェントは画面を確かめずに作業を終えます。実際に触ると、アイコンを選んだだけで保存されてしまうなどの不具合が残っていました。

要件を文章でClaude Codeに伝えて任せる方法とどちらが良いかは、作るもの次第です。それでも、先に画面のイメージを作ってから、それをコーディング用のプロンプトにできるのは便利でした。下書きが安定し、修正もAIへの指示で進められるようになれば、もっと使いやすくなりそうです。

こんな人におすすめ

• AIコーディングツール（Cursor、Claude Code、Gemini CLI等）を使って迅速にアプリを試作したい開発者
• Material 3 Expressiveのデザインガイドラインに沿ったUI設計を、直感的に組み立てて検証したいデザイナー
• 仕様のプロンプト化や画面遷移の言語化に時間をかけたくないエンジニア