刚开源就斩获 7k Star，这个工具让 AI 写出来的 UI 终于”对味了”！

前端 UI 必须是”所见即所得”的，但工程落地又必须是”所见即代码”的。

这中间一直隔着一道没人填上的鸿沟。

不过 9 月初，一个叫 lnkiai 的开发者在 GitHub 上放出了一个叫 M3E Canvas 的开源项目。把这道鸿沟填上了！

谁也没料到，短短时间，这个仓库就收获了 7000+ Star。

它到底是个什么？一句话就能说清楚：在浏览器里把界面拖出来，然后它替你把这份草图翻译成一段给 AI 编程工具看的提示词。

没错，就是这么简单粗暴——但它真的解决了一个巨大的痛点。

核心亮点

1. 不搞花里胡哨，只做一件事

现在 AI 编程圈有个很不好的风气：什么都想一键生成，什么都想智能化。结果就是工具看起来功能很多，但真用起来到处是坑。

M3E Canvas 反其道而行之——它只解决一个问题：把视觉界面翻译成结构化提示词。

它不帮你写后端，不帮你部署，不帮你做市场。它就是一块画布，让你把界面摆出来，然后一键导出 AI 能看懂的提示词。

就这一件事，它做得异常扎实。

2. 真正的 Material 3 Expressive 组件库

你可能会说：拖拽组件的工具不是早就有了吗？

Figma、Sketch、甚至更早的 Dreamweaver。

但 M3E Canvas 有个很不一样的地方——它画的每一个组件，都是严格按照 Google 最新的 Material 3 Expressive 设计规范来的。

左边组件面板里摆着 33 种常用组件，分成六类：

• • 操作类：按钮、图标按钮、FAB、拆分按钮、标签片
• • 导航类：顶部应用栏、底部导航栏、侧边导航、搜索栏
• • 输入类：文本输入框、下拉菜单、开关、复选框、单选按钮、滑块
• • 内容类：卡片、列表项、对话框、消息条
• • 容器类：悬浮工具栏、标签页、导航栏
• • 进度类：形状变化 Loading Indicator、线性/圆形进度条

每个组件的颜色、圆角、阴影、内边距、字阶，全部锁定在 Material 3 的标准设计令牌之内。

无论你怎么拼，视觉基准线都不会崩塌——这对于没有设计基础的开发者来说，简直是救命的。

3. 磁吸连接：让组件自动”长成一组”

两个按钮靠近了会自动吸成一组，圆角会在相接的那一侧收紧——这就是 Material 3 里那种连体按钮的样子。列表项上下靠近也是同样效果。

它在提示词里会专门写成”横向相连组成的按钮组”，AI 就不会给你拆开堆两行了。

4. 手机屏 ↔ 桌面屏：一键切换，布局自动适配

同一个设计，你可以在 412×892 的手机屏和 1280×800 的桌面屏之间一键切换。

切换的时候，导航栏会自动变成侧边导航 rail，栏会拉伸，组件会在 rail 旁边重新排列。

更狠的是——两种尺寸可以共存于同一个设计中，同名屏幕会在提示词里写成”同一个屏幕的两种宽度”。

这代表着你不用画两套 UI，AI 生成代码的时候会自动写出响应式布局。

5. 蓝线直连：交互路由不再靠嘴说

M3E Canvas 引入了一个非常关键的设计——交互连线系统。

在画布上，每一个按钮或卡片组件的边缘都带有锚点。

你只需按住鼠标，从 A 屏的某个组件拉出一根蓝线，直接甩到 B 屏（详情页），就完成了交互路由的声明。

还可以设置过渡动画：从四个方向滑入、淡入、放大或无动画。

这一根简单的蓝线，就把传统口播或文档里最难说清楚的”页面跳转关系”，变成了毫无歧义的可视化实体。

画布上会显示流程箭头，预览模式下你可以真的点击跳转来验证整个用户流程。

6. 一键生成结构化提示词

摆完界面，点一下”提示词”按钮，你会拿到一份结构化说明，分成六个部分：

• • 配色方案：完整的 Material 3 颜色体系，不仅是主题色，还有各种 surface、on-* 层级
• • 组件层级：每个组件的精确位置、叠放关系、间距
• • 交互说明：哪些组件可点击、跳到哪个屏、什么过渡
• • 主题描述：形状、字体、动效的具体参数
• • 目标平台：Android Compose 或现代 Web
• • 多语言输出：日文、英文、中文、韩文四种语言可选

快速上手

方式一：官方在线版（最简单，零安装）

直接打开浏览器访问：https://lnkiai.github.io/m3e-canvas/

打开即是编辑器，画布自带一屏示例设计可以直接上手改。

注意：数据保存在当前浏览器 localStorage——换浏览器、清缓存会丢设计，重要设计记得点”提示词”复制存档。

方式二：本地源码运行

适合想稳定保存、断网可用、二次开发的读者。

前置要求：Node.js ≥ 22.12

# 1. 克隆源码
git clone --depth 1 https://github.com/lnkiai/m3e-canvas.git
cd m3e-canvas

# 2. 安装依赖（约 80+ packages）
npm install

# 3. 启动开发服务器
npm run dev
# 看到 “Local: http://localhost:3000” 即成功

浏览器打开 http://localhost:3000 即可。停止服务：终端 Ctrl+C。

方式三：静态构建部署到自己的网站

想要独立域名、私有访问、团队共用，构建产物是纯静态文件。

# 构建（产物：out/ 目录，约 2.7MB）
npm run build

# 本地预览产物（可选）
npx serve out

GitHub Pages / Vercel / Netlify / Nginx 都能托管。如果部署在子路径下，构建时设置 NEXT_PUBLIC_BASE_PATH=/仓库名。

键盘快捷键

写在最后

M3E Canvas 的厉害之处，不在于它有多先进的技术栈，也不在于它有多花哨的功能。它厉害在于——它找到了一个真正的痛点，然后用最简单直接的方式把它解决了。

在这个 AI 什么都想帮你做的时代，M3E Canvas 反其道而行之：我不帮你写代码，不帮你部署，不帮你做产品决策。

我只帮你把脑子里那个”已经看见但说不出来”的界面，变成 AI 能精确理解的语言。

这个定位，让它在 Vibe Coding 浪潮里找到了自己不可替代的位置。

GitHub：https://github.com/lnkiai/m3e-canvas

在线体验：https://lnkiai.github.io/m3e-canvas