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 库： 包含一套完整的、可直接使用的 UI 组件，并支持 4dp 网格对齐。
• 交互式预览： 允许用户直接在浏览器中测试应用流程、滑动和转场效果。
• 主题引擎： 支持对调色板、排版、圆角样式和动画设置进行全面自定义。
• 基于浏览器： 完全在浏览器中运行，无需账户或服务器安装。