ブラウザでMaterial 3 Expressiveの部品を並べて画面と遷移を作り、AIコーディング用の指示文として書き出す（M3E Canvas）

どんな問題を解決するか / いつ使うか

アプリを作らせるとき、「上にタブ、下にカード一覧、タップで詳細へ」と文章で伝えると、構造や遷移が抜け落ちやすい。M3E Canvas はブラウザ上でMaterial 3 Expressiveのコンポーネントを置いて画面を組み、画面遷移を付けてプレビューまででき、完成したデザインをエージェント向けのプロンプトとして出力する。Androidアプリや、Material系のWebアプリの最初の叩き台に向く。

使い方の流れ

1. M3E Canvas のリポジトリから使う（紹介ではアカウント登録・インストール不要、MITライセンス）。
2. Material 3 Expressiveの部品で各画面を組み、画面同士の遷移を付けてプレビューで確かめる。
3. 出力先（Android / Web）と言語（日・英・中・韓）を選び、対象のエージェント向けにプロンプトを書き出す。
4. 書き出したプロンプトをエージェントに渡して実装させる。自分のDESIGN.mdやトークンがあるなら、一緒に渡して色や書体を上書きさせる。

注意点

• 部品はMaterial 3 Expressive前提なので、見た目もMaterialに寄る。独自ブランドの見た目にしたいなら、構造と遷移だけ借りて、色・書体・余白は別に指定する。
• 紹介投稿では「スター9.5k」とあったが、取得したGitHubページではスター数を確認できなかった。使う前にリポジトリの状態（更新日、ライセンス）を確かめる。

関連

• AIへのUI指示は「App Bar + Drawer + Card Grid + Tabs」のようにUIパターン名で構造を伝える

出典

• @nagasawatsubasa post