lnkiai/m3e-canvas

解決する課題

アプリのインターフェースを設計し、そのデザインをAIコーディングアシスタントに伝えることは、困難で不正確になりがちです。M3E Canvasは、Material 3 Expressiveの画面をスケッチするためのビジュアルワークスペースを提供し、それらのデザインをAIコーディングツールが解釈して機能的なアプリケーションを構築できるような、構造化された詳細なプロンプトに自動変換します。

仕組み

ユーザーは、事前に構築されたMaterial 3コンポーネント（ボタン、カード、ナビゲーションバーなど）をキャンバスにドラッグ＆ドロップして画面レイアウトを作成します。このツールでは、画面同士をリンクさせてナビゲーションフローや遷移を定義できます。デザインが完成すると、レイアウト、コンポーネント、ユーザーフローを記述した簡潔なテキストベースのブリーフが生成され、それをClaude Code、Cursor、Gemini CLIなどのAIコーディングエージェントに貼り付けることで、実際のコードを生成できます。

対象ユーザー

AIコーディングアシスタントを活用して、明確な「ビジュアルからテキストへ」のデザイン仕様を提供することで、Material 3ベースのアプリケーション開発を加速させたい開発者、デザイナー、プロダクトビルダー向けに設計されています。

ハイライト

• ビジュアルデザインからプロンプトへ： ビジュアル画面レイアウトとナビゲーションフローを、AIコーディングエージェント向けの構造化されたテキストプロンプトに変換します。
• Material 3 Expressiveライブラリ： 4dpグリッドにスナップする、すぐに使える包括的なUIコンポーネントセットが含まれています。
• インタラクティブプレビュー： ブラウザ内で直接、アプリのフロー、スワイプ、遷移をテストできます。
• テーマエンジン： カラーパレット、タイポグラフィ、角のスタイル、モーション設定の完全なカスタマイズをサポートしています。
• ブラウザベース： アカウントやサーバーのインストールを必要とせず、ブラウザ上で完全に動作します。