M3E Canvas：在浏览器里画 Material 3 界面草图，一键转成 AI 编程提示词

最近 GitHub 上一个新项目火了起来——lnkiai/m3e-canvas，几天内涨到 2800+ 星。它解决的是 AI 编程时代一个很实在的痛点：你脑子里的 App 长什么样，AI 编程工具（Claude Code、Codex、Cursor、Gemini CLI）其实”看不见”。M3E Canvas 让你把界面画出来，再自动变成一段精确的提示词交给 AI，让生成的界面不走样。

这是什么

一句话：在浏览器里拼装 Material 3 Expressive 界面，把屏幕连起来、点击试试，然后直接把设计变成给 AI 编程工具的提示词。

它不是又一个界面设计器，而是”设计与 AI 编程之间的桥”。你拖拽组件画出几屏界面、设定点击跳转、挑好主题，然后复制一段自然语言提示词，粘贴进 Claude Code 之类工具，就能让它按你的原型把 App 或网页做出来。

在线版本：https://lnkiai.github.io/m3e-canvas/

为什么需要它

现在 AI 编程工具都能写代码，可”你想要的界面”常常说不清。纯文字描述要么太抽象、要么漏细节，AI 生成出来总差那么点意思。

M3E Canvas 的思路是把可视化原型变成结构化提示词——界面里有什么组件、怎么叠放、点哪里跳到哪里、什么配色圆角，全部写成明确的话。AI 读到的是精确的”施工图”，而不是模糊的”感觉”。

项目主页的一句话很能说明问题：可配合任何接受提示词的 AI 编程工具使用，把提示词复制、粘贴进去，让它把应用做出来。还支持把完成的应用在 Android 上跑起来。

主要功能

拖放组件

按钮、图标按钮、悬浮操作按钮 FAB、标签片、应用栏、导航栏、标签页、搜索栏、卡片、列表、对话框、文本输入、开关、复选框、单选、滑块、图片、徽标等等一应俱全，全部按 Material 3 Expressive 规范绘制。

磁吸连接

把两个按钮或列表项拖近，它们会自动”吸”成一个相连的组，相接的圆角也柔和地融合。

真正的 M3 Expressive 动效

连加载动画都是移植自 Android 官方实现的”变形 Loading Indicator”，还有波浪形的线性／圆形进度条。

手机与桌面双尺寸

每屏都能在 412×892 的手机和 1280×800 的桌面之间切换：条会拉伸、导航栏变侧边栏（切回来又还原）。两种尺寸可共存于同一设计，同名屏幕会在提示词里写成”同一屏幕的两种宽度”。

点击与滑动跳转

给组件或导航项指定跳转目标和过渡动画（四向滑入、淡入、放大等），画布上显示流程箭头，预览里能真实点击跳转。

图层与编组

图层面板调整叠放顺序，多选组件可编组一起移动。提示词会明确写出叠放与横向排列关系，避免 AI 生成的布局散架。

主题面板

一个面板集中调整 M3 Expressive 四大维度：配色（7 套预设或用一个种子色生成整套 Material 3 配色）、圆角形状、字体（Roboto 系列）、以及动效方案（标准或弹性弹簧）。预览切换动画也随之变化。

提示词输出

设计可以整体或单屏转成简洁自然语言的提示词，支持中文、英文、日文、韩文。可选的 AI 辅助还能让模型帮写各组件的”行为说明”。

一键整理 + 导出

点一下自动把工具栏贴边、FAB 归位、相邻项连组、其余按边距重排；支持复制提示词、导出单屏 PNG。

怎么用

M3E Canvas 完全免费、开源、MIT 协议，还不需要后端——所有内容都存在浏览器本地。

在线直接体验：打开 https://lnkiai.github.io/m3e-canvas/ 就能用，无需注册。

运行方式：在画布上拖组件拼出你想要的界面 → 设好跳转和主题 → 点”提示词”复制 → 粘贴到你的 AI 编程工具，让它照着做。

本地开发运行：

npm install
npm run dev        # 打开 http://localhost:3000
npm run build      # 静态导出到 ./out

项目本身是 Next.js 静态站点导出，配合 GitHub Pages 的 deploy.yml 可在每次 push 到 main 时自动发布。

值得注意的隐私设计：那个可选的 AI 辅助功能，填的是你自己的 API 密钥——密钥只保存在浏览器里，请求直连 OpenAI／Claude／Gemini／DeepSeek 服务商，中间没有任何服务器。没有后端意味着你的设计数据也不会被上传。

小结

M3E Canvas 的价值在于把”可视化设计”和”AI 编程”真正打通了：你用最直观的拖拽画好界面，它用最精确的提示词替你”翻译”给 AI。对于想快速做出漂亮 Material 界面、又希望 AI 生成不走样的人来说非常好用。加上永久免费开源、无需服务器、多语言支持，是个值得收藏和体验的工具。

如果你手头也有想用 AI 做的界面原型，不妨打开它的在线 Demo 拖一拖、试一试，说不定下一版 App 就从这张画布开始了。

• 项目地址：https://github.com/lnkiai/m3e-canvas （MIT，TypeScript，2833+ ★）
• 在线体验：https://lnkiai.github.io/m3e-canvas/