前端 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=/仓库名。
常用快捷键
| 快捷键 | 功能 |
|---|---|
| V / H | 选择工具 / 抓手工具 |
| 滚轮 / Ctrl+滚轮 | 平移 / 缩放 |
| + - 0 | 放大 / 缩小 / 适配 |
| Ctrl+Z / Ctrl+Shift+Z | 撤销 / 重做 |
| Ctrl+D | 复制 |
| 方向键（Shift=8dp） | 微移 |
| Ctrl+拖动 | 不吸附拖动 |
| Delete | 删除组件或屏幕 |
| P | 预览模式 |
写在最后
M3E Canvas 的价值不在于先进的技术栈或花哨的功能，而在于它找到了一个真正的痛点——把「脑子里已经看见但说不出来」的界面，变成 AI 能精确理解的语言。
在 AI 什么都想一键生成的时代，M3E Canvas 选择只做好一件事，这反而让它在 Vibe Coding 浪潮中找到了不可替代的位置。
GitHub：https://github.com/lnkiai/m3e-canvas
在线体验：https://lnkiai.github.io/m3e-canvas
