lnkiai/m3e-canvas

解決的問題

M3E Canvas 是一個基於瀏覽器的設計工具，彌補了視覺草圖與 AI 驅動的程式碼生成之間的差距。它讓使用者能快速原型化 Material 3 Expressive 界面，並將這些視覺設計轉換為結構化、自然語言的提示，供 AI 程式碼工具（如 Cursor、Claude Code 或 Gemini CLI）用來建立實際應用程式。

如何運作

該工具提供一個拖曳式畫布，使用者可使用完整的 Material 3 Expressive 元件庫組裝畫面。使用者可以透過滑動、淡入淡出、展開等過渡效果連結畫面，並定義互動行為，例如切換按鈕或滑動導航。應用程式隨後會將整個視覺佈局（包括 z 軸順序、群組化與主題設定）轉換為簡潔的自然語言提示，支援英文、日文或中文，使用者可複製貼上至 AI 程式碼工具中使用。

適用對象

專為希望快速原型化行動介面，並利用 AI 加速從設計草圖到功能應用轉換的開發者與設計師所設計。

主要特色

• AI 就緒提示：將視覺設計轉換為適合 AI 程式碼工具使用的描述性提示。
• Material 3 Expressive：完整支援 M3 Expressive 元件，包含形狀變形的載入指示器與動態色彩方案。
• 互動式原型：支援點擊導航與滑動導航過渡，並具備即時預覽模式。
• 磁性連接：按鈕或清單項目等元件可融合成具有圓滑邊角的連結群組。
• 全面主題設定：可控制色彩（種子色彩、亮/暗模式、對比度）、形狀（方形至全圓角）、字型與動畫方案。
• 本地儲存：所有設計皆自動儲存在瀏覽器的 localStorage 中。