lnkiai/m3e-canvas

これは何？

主な機能

• 01実際のMaterial 3 Expressiveのパーツをスマートフォンやデスクトップの画面にドラッグして配置できます。4dpグリッドにスナップします。
• 02パーツをスライド、フェード、展開のトランジションで別の画面につなぎ、フローをプレビューできます。
• 03AIコーディングツール向けのデザインブリーフを、AndroidまたはWebを対象に4言語で生成できます。
• 041つのパネルからテーマカラー、形状、タイポグラフィ、ライト／ダークモードを調整できます。
• 05OpenAI、Claude、Gemini、DeepSeekのAPIキーを使って、オプションのAI支援機能を利用できます。
• 06ブラウザー内で自動保存されるデザインを、リンクで共有できます。

ユースケース

• アプリ画面のフローをスケッチしてから、実装をAIコーディングエージェントに依頼する。
• デザインツールのライセンスなしで、モバイルまたはWebプロジェクト向けのMaterial 3レイアウトを試作する。
• クリックして操作できるフローと文章のブリーフで、UIのアイデアを開発者に伝える。
• Material 3のインターフェースで、テーマのカラーパレットやライト／ダークのバリエーションを試す。

クイックスタート

1. 1

   依存関係をインストールする

   npm install
2. 2

   localhost:3000 で開発サーバーを起動する

   npm run dev
3. 3

   ./out に静的エクスポートをビルドする（任意）

   npm run build

使う前に知っておきたいこと

• !ローカルで実行するには、Next.js アプリのインストールとビルドに Node.js と npm が必要です。
• !AI ヘルパー機能を使うには、OpenAI、Claude、Gemini、または DeepSeek の API キーが必要です。

トピック

よくある質問

m3e-canvas とは？

Material 3 Expressiveのアプリ画面をブラウザーでスケッチし、AIコーディングツール向けのプロンプトに変換 M3E Canvasは、Material 3 Expressiveのコンポーネントでアプリ画面を作るブラウザーベースのスケッチツールです。ボタン、カード、バー、タブ、ピッカーなどのパーツをスマートフォンやデスクトップの画面にドラッグして配置し、画面同士をトランジションでつないで、タップしながらフローをプレビューできます。アカウントもサーバーも不要で、すべてブラウザー内で動作し、編集内容はローカルに自動保存されます。

m3e-canvas は無料で使えますか？ライセンスは？

m3e-canvas は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

m3e-canvas は今もメンテナンスされていますか？

活発にメンテナンス中。m3e-canvas の最終コミットは 2026年10月16日 です。

m3e-canvas は何に使えますか？

アプリ画面のフローをスケッチしてから、実装をAIコーディングエージェントに依頼する。 デザインツールのライセンスなしで、モバイルまたはWebプロジェクト向けのMaterial 3レイアウトを試作する。 クリックして操作できるフローと文章のブリーフで、UIのアイデアを開発者に伝える。 Material 3のインターフェースで、テーマのカラーパレットやライト／ダークのバリエーションを試す。

m3e-canvas のインストール方法は？

依存関係をインストールする: npm install localhost:3000 で開発サーバーを起動する: npm run dev ./out に静的エクスポートをビルドする（任意）: npm run build

m3e-canvas はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/lnkiai/m3e-canvas