lnkiai/m3e-canvas

这是什么？

核心功能

• 01将真实的 Material 3 Expressive 组件拖到手机或桌面页面上，并自动对齐到 4dp 网格。
• 02通过滑动、淡入或展开等转场把组件链接到其他页面，并预览完整流程。
• 03生成四种语言的设计说明，可指定 Android 或 Web 目标，供 AI 编程工具使用。
• 04在一个面板中调整主题色、形状、字体以及明暗模式。
• 05可选择使用自己的 OpenAI、Claude、Gemini 或 DeepSeek 密钥获取 AI 辅助。
• 06生成可分享的设计链接，内容自动保存在浏览器本地。

适用场景

• 在交给 AI 编程助手实现之前，先梳理应用页面的流程。
• 在不使用付费设计工具的情况下，为移动或 Web 项目原型化 Material 3 布局。
• 把界面构想以可点击流程加文字说明的形式交给开发者。
• 探索 Material 3 界面的配色方案以及明暗主题变体。

快速上手

1. 1

   安装依赖

   npm install
2. 2

   在 localhost:3000 启动开发服务器

   npm run dev
3. 3

   构建静态导出到 ./out（可选）

   npm run build

使用前须知

• !本地运行需要 Node.js 和 npm 来安装并构建 Next.js 应用。
• !AI 辅助功能需要你自己的 OpenAI、Claude、Gemini 或 DeepSeek API 密钥。

标签

常见问题

m3e-canvas 是什么？

在浏览器中绘制 Material 3 Expressive 界面，并生成供 AI 编程工具使用的提示词。 M3E Canvas 是一个基于浏览器的界面草图工具，用于绘制由 Material 3 Expressive 组件构成的应用页面。你可以把按钮、卡片、顶栏、标签页、选择器等组件拖到手机或桌面屏幕上，把它们与其他页面通过转场动画连接，并直接点击预览整个流程。整个工具在浏览器中运行，无需注册账号或服务器，内容会自动保存在本地。

m3e-canvas 可以免费使用吗？用的什么许可证？

m3e-canvas 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

m3e-canvas 还在维护吗？

活跃维护中。m3e-canvas 最近一次提交是在 2026年10月16日。

m3e-canvas 适合用来做什么？

在交给 AI 编程助手实现之前，先梳理应用页面的流程。 在不使用付费设计工具的情况下，为移动或 Web 项目原型化 Material 3 布局。 把界面构想以可点击流程加文字说明的形式交给开发者。 探索 Material 3 界面的配色方案以及明暗主题变体。

m3e-canvas 怎么安装和运行？

安装依赖: npm install 在 localhost:3000 启动开发服务器: npm run dev 构建静态导出到 ./out（可选）: npm run build

在哪里获取 m3e-canvas？

源代码和安装说明在 GitHub 上：https://github.com/lnkiai/m3e-canvas