前端 UI 设计需要「所见即所得」，但工程落地又必须「所见即代码」。这中间的鸿沟，一直缺少一个好工具来填补。

9 月初，开发者 lnkiai 在 GitHub 上开源了 M3E Canvas 项目，迅速收获 7000+ Star。它的核心思路很简单：在浏览器里拖拽界面，一键导出为 AI 编程工具能读懂的结构化提示词。

核心亮点

1. 只做一件事：视觉界面 → 结构化提示词

M3E Canvas 不写后端、不部署、不做市场分析。它专注解决一个问题——把设计稿翻译成 AI 能精确理解的语言。一块画布，摆好界面，导出提示词，仅此而已。

2. 严格遵循 Material 3 Expressive 设计规范

内置 33 种组件，分为六大类：

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

每个组件的颜色、圆角、阴影、内边距全部锁定在 Material 3 标准设计令牌内，视觉基准线不会崩塌。

3. 磁吸连接：组件自动组合

两个按钮靠近会自动吸成一组，圆角在相接处收紧——这就是 Material 3 的连体按钮效果。提示词中会明确标注「横向相连组成的按钮组」，AI 不会拆分排列。

4. 手机屏 / 桌面屏一键切换

支持 412×892 手机屏和 1280×800 桌面屏之间切换。导航栏自动变为侧边栏，组件重新排列。两种尺寸可共存于同一设计，AI 生成代码时自动输出响应式布局。

5. 蓝线直连：交互路由可视化

画布上每个组件边缘带有锚点，从 A 屏组件拉出蓝线到 B 屏即可完成交互路由声明。支持四种过渡动画：滑入、淡入、放大或无动画。预览模式下可点击跳转验证整个流程。

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

点击「提示词」按钮，生成六部分结构化说明：

• 配色方案：完整的 Material 3 颜色体系（主题色、surface、on-* 层级）
• 组件层级：精确位置、叠放关系、间距
• 交互说明：可点击组件、跳转目标、过渡动画
• 主题描述：形状、字体、动效参数
• 目标平台：Android Compose 或现代 Web
• 多语言输出：日文、英文、中文、韩文

快速上手

方式一：官方在线版（零安装）

访问 https://lnkiai.github.io/m3e-canvas/，打开即用。数据保存在浏览器 localStorage，重要设计记得导出提示词存档。

方式二：本地源码运行

前置要求：Node.js ≥ 22.12

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

# 安装依赖
npm install

# 启动开发服务器
npm run dev

启动后访问 http://localhost:3000 即可使用。

方式三：静态构建部署

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

构建产物为纯静态文件，可托管至 GitHub Pages、Vercel、Netlify 或 Nginx。部署在子路径下需设置 NEXT_PUBLIC_BASE_PATH=/仓库名。

常用快捷键

写在最后

M3E Canvas 的价值不在于先进的技术栈或花哨的功能，而在于它找到了一个真正的痛点——把「脑子里已经看见但说不出来」的界面，变成 AI 能精确理解的语言。

在 AI 什么都想一键生成的时代，M3E Canvas 选择只做好一件事，这反而让它在 Vibe Coding 浪潮中找到了不可替代的位置。

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

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