lnkiai.github.io/m3e-canvas/
MC
M3E Canvas
免费的浏览器画布：拖拽搭建 Material 3 Expressive 界面、把多屏连成可点击原型，再一键复制确定性提示词给 Claude Code、Cursor 等AI编码工具。
立即开始了解更多
什么是 M3E Canvas?
M3E 画布（M3E Canvas）是围绕 Google 最新 Material 3 Expressive 设计系统打造的开源(MIT)浏览器端UI画布。与其用文字描述界面、祈祷AI写出对味的UI，不如直接把界面画出来：把富有表现力的组件拖到画布上，排布多个屏幕，把它们链接成可交互流程，还能像真实App一样点击浏览；随后它的“提示词编译”会把可视化画面与组件行为说明，转成简洁、确定、结构化的需求简报，你粘贴给 Claude Code、Cursor、Codex 等AI编码工具，生成的界面就能高度还原设计，而不是千篇一律的过时风格。它完全运行在浏览器、无后端（作品存于localStorage），可部署到 GitHub Pages；技术栈为 React 19 + Next.js 16 + Material 3 Expressive。该项目在GitHub短时间爆火，数天涨数千星并登上当日热门仓库，尤其适合用来“vibe coding”安卓风与Web应用。
4.5
评分
免费
定价模式
1+
平台
0
收藏
优点
- 直接把要做的界面画给AI看，告别模糊文字描述。
- 免安装、无后端，打开网页就能用。
- 产出可点击原型，而非静态图。
- MIT开源免费。
- Material 3 Expressive出图快，适合安卓风应用。
缺点
- 专为Material 3/安卓风格优化，不适合任意品牌体系。
- 产出的是提示词，不是最终生产代码。
- 项目年轻迭代快，可能频繁变动。
- 浏览器本地存储，团队协作能力有限。
同类工具对比
| 功能 | M3E Canvas | AI UI Builder - Chrome Extension | Penpot | AI Debug |
|---|---|---|---|---|
| 评分 | 0.0 | 4.8 | 4.3 | 4.3 |
| 定价模式 | 免费 | 免费 | 免费 | 免费 |
| 起价 | — | Free | Free | Free |
| API | — | — | — | — |
| 免费版 | — | — | — | — |
| 移动端 | — | — | — | — |
适用人群
V
Vibe Coding
画好UI、复制提示词，让AI Agent高还原实现。
应
应用原型
写代码前先画出并串联多个Material 3屏幕。
非
非设计师
创始人/产品经理无需设计功底也能表达界面。
安
安卓/Material应用
快速为开发或AI规范Material 3 Expressive界面。
设
设计到代码交付
把视觉稿变成AI可执行的确定性需求简报。
开发者
lnkiai
支持平台
网页版 暂不支持
Windows 暂不支持
Mac 暂不支持
iPhone/iPad 暂不支持
安卓 暂不支持
华为 暂不支持
Linux 暂不支持
支持语言
English, 中文
更新于
2026-09-16
公司信息
成立于 2025
常见问题
开源的浏览器画布，用于设计Material 3 Expressive界面、串联成原型，并导出给AI编码工具的提示词。