「M3E Canvas」で描いた画面、コピペしたらAIがアプリにしてくれた | M3E Canvas

どんなアプリか

Material 3 Expressive の画面をブラウザで組み立てて、画面同士をつなぎ、タップして確かめ、そのまま AI コーディング用のプロンプトにするツールです。

lnkiai さん、GitHub の README（日本語）

ボタンやカード、ナビゲーションバー、ダイアログなどの部品をドラッグ＆ドロップで画面に置いていきます。部品やアプリバーのアイコンに移動先の画面と遷移を設定すると、プレビューで実際にタップして画面の流れを確かめられます。

組んだデザインは、全体または1画面ずつ、日本語・英語・中国語・韓国語の文章のプロンプトになります。実装先は Android（既定）と Web から選べます。Claude Code、Codex、Gemini CLI、Cursor など、プロンプトを受け取れるツールに貼って使う仕組みです。

画面は 412×892 のスマホと 1280×800 のデスクトップを切り替えられます。テーマのパネルでは、色・角の形・書体・動きの4つをまとめて調整できます。

自分の API キー（OpenAI、Claude、Gemini、DeepSeek）を入れると、部品の動作や画面の説明を AI に書いてもらう補助機能も使えます。この機能は任意です。

無料で、MIT ライセンスで公開されています。GitHub Sponsors での支援を受け付けていますが、支援の有無で使える機能は変わらないと README に書かれています。

作業内容はブラウザの localStorage に自動で保存されます。AI 補助に使うキーもブラウザ内にだけ保存され、リクエストは間にサーバーを挟まずに各プロバイダへ直接送られます。

名前	型	仕掛け	対応	料金
M3E Canvas	画面スケッチ→プロンプト	Material 3 Expressive の画面と遷移をブラウザで組み、AI コーディング用のプロンプトにする	Web	無料（OSS, MIT）
pre-design-md	デザインの土台づくり	フォントサイズ・余白・角丸・影・色などの土台を決め、AI に渡せる形にする	Web	無料
melta UI	AI 向けデザインシステム	トークン・禁止ルール・仕様・検証器のセットで、AI コーディングエージェントに「守らせる」	Web（HTML + Tailwind 参照実装、React Native、MCP / lint）	無料（OSS, MIT）

スマホのブラウザでは、1画面固定のボタン専用エディタになります。複数の画面を扱うフル機能は PC のブラウザ向けです。

設計を相手のキャンバスで開ける共有リンクと、コーディングエージェントにスケッチを作らせる機能は、2026-10-06時点の README ではベータと書かれています。

バグ報告や部品のリクエストを受け付けていて、質問は GitHub の Discussions で受けています。