lnkiai/m3e-canvas

何を解決するか

M3E Canvasは、視覚的なスケッチとAI駆動のコード生成の間のギャップを埋めるブラウザベースのデザインツールです。ユーザーは、Material 3 Expressiveの画面を素早くプロトタイプ化し、それらの視覚的なデザインを、AIコーディングツール（Cursor、Claude Code、またはGemini CLIなど）が実際のアプリケーションを構築するために使用できる構造化された自然言語プロンプトに変換できます。

仕組み

このツールは、ドラッグ＆ドロップ式のキャンバスを提供し、ユーザーはMaterial 3 Expressiveコンポーネントの包括的なライブラリを使用して画面を組み立てることができます。ユーザーは、画面をトランジション（スライド、フェード、展開）でリンクさせたり、トグルボタンやスワイプナビゲーションなどのインタラクションを定義したりできます。その後、アプリは、z-order、グルーピング、テーマ設定を含む視覚的なレイアウト全体を、英語、日本語、または中国語の簡潔な自然言語プロンプトに変換します。ユーザーはこれをAIコーダーにコピー＆ペーストできます。

対象者

モバイルインターフェースを迅速にプロトタイプ化し、AIを使用してデザインスケッチから機能的なアプリへの移行を加速させたい開発者やデザイナー向けに設計されています。

ハイライト

• AI対応プロンプト: 視覚的なデザインをAIコーディングツールのための記述的なプロンプトに変換します。
• Material 3 Expressive: シェイプモーフィング・ローディングインジケーターやダイナミックカラー・スキームを含む、M3 Expressiveコンポーネントをフルサポートしています。
• インタラクティブなプロトタイピング: ライブプレビューモードを備えた、タップしてナビゲート、スワイプしてナビゲートのトランジションをサポートしています。
• マグネティック・コネクション: ボタンやリストアイテムなどのコンポーネントは、角を丸めた接続されたグループとして融合させることができます。
• 包括的なテーマ設定: 色（シードカラー、ライト/ダーク、コントラスト）、形状（正方形から完全な丸みまで）、タイポグラフィ、およびモーション・スキームを制御できます。
• ローカルストレージ: すべてのデザインは、ブラウザのlocalStorageに自動的に保存されます。