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 中。