做一个 App，其实就三步：想清楚它长什么样，画出来，再把画变成能跑的代码。

这两年，AI 已经把最后一步变得门槛很低，你说一句，Claude Code、Codex 就能生成大量代码。卡住的往往是：你脑子里的界面，怎么准确完整地告诉 AI？用嘴说，说三句它就跑偏一句；画图，画完还得翻译成它听得懂的描述。

界面是画出来的，那不如直接让 AI 看你的画。M3E Canvas 就是一个冲着这个想法来的开源项目。

先认识名字里的 M3E。Material Design是谷歌推出的设计语言，很多 Android 应用都长那样。Material 3 Expressive 是 Material Design 3 的扩展版，更强调形状、动效和自我表达。

它是一个跑在浏览器里的界面设计工具，可以直接在浏览器里拼装 Material 3 Expressive 界面，然后直接变成给 AI 编程工具的提示词。

它能解决哪些问题？挑三个最关键的细说。

界面说不清楚，就画出来

文字描述界面天生低效，程序员、产品经理、设计师都懂这种词不达意。

M3E Canvas 直接动手画。组件面板里，按钮有填充、描边、文字、浮起等多种变体，图标按钮、悬浮按钮 FAB、应用栏、导航栏等等常用件，几乎一个不缺，全部按 Material 3 Expressive 规范绘制，加载动画还是从安卓官方组件库移植而来的。想要什么，拖上去就是什么。

— 编辑器界面：拖拽组件拼装手机屏幕

静态图装不下交互，就让画布动起来

截图看不出点按钮会去哪、列表划一下是什么效果，在这里，点任意按钮或图标就能指定它跳转的目标屏幕，过渡动画可以四向滑入、淡入、放大或没有。画布上会出现带箭头的流程线，跳转路径一目了然；屏幕之间还能设置滑动跳转。按一下预览，就像用真机一样点一点、划一划，返回时动画反向播放。

— 预览模式：点击组件跳转到目标屏幕

翻译损耗降下来，AI 才照做

这是它区别于一般设计工具的关键一步。就算界面画得再漂亮，讲给 AI 听时叠放关系、横竖排列一说就乱。M3E Canvas 把这个翻译过程自动化：一键把整个设计变成提示词，支持中英日韩四种语言，目标平台选 Android 或 Web 会按对应技术栈来写，你写的组件行为备注会原样带进去，层叠顺序和横竖排列这些最容易乱的信息也会写清楚。复制粘贴，AI 就开工了。

— 提示词面板：一键生成自然语言描述

怎么部署？

最省事的用法是根本不用部署，在线版直接开。桌面浏览器里是完整的多屏编辑器，手机上打开会自动变成精简版，适合随手改两下。

— 手机端：精简版按钮编辑器

想本地跑也可以，需要较新的 Node.js（官方注明支持 22.12 以上、24 和 26 系）：

...bash

git clone https://github.com/lnkiai/m3e-canvas.git

cd m3e-canvas

npm install

npm run dev # 开发模式，浏览器打开 http://localhost:3000

构建发布版一条命令，产物是纯静态文件：

...bash

npm run build # 输出到 ./out 目录

out/ 扔到 GitHub Pages 等静态托管都能跑，子路径部署只需在构建时设置 NEXT_PUBLIC_BASE_PATH。

想一个具体的 App，比如食谱应用。画两三个屏幕，把按钮连到对应屏幕，预览里点一遍确认跳转，一键整理布局，换一套配色，最后生成提示词，语言选中文、目标选 Android，粘贴给 Claude Code 或 Codex，让它把应用做出来，是不是挺省事？

回到开头那三步。过去，“画出来”和“变成代码”之间隔着设计师和工程师漫长的沟通，M3E Canvas 这类工具正在把这两步焊在一起。

它只是承认了一个现实：AI 写代码已经很强，前提是得准确知道你想要什么。所以它的答案就是你想要什么，就画给它看。

它适合想用 AI 做 App 但说不清界面的人，也适合需要在设计师、开发者和 AI 之间传递界面方案的团队。

如果你手头正好有个想做而没动手的 App，今晚去在线版画一画，大概会感受到：把想法变成界面，原来可以这么直接。

仓库地址：https://github.com/lnkiai/m3e-canvas