M3E Canvas 是一款专为 AI 编程时代打造的可视化 UI 设计与 Prompt 生成平台，采用 MIT 开源协议，当前版本 0.1.0，GitHub 获约 8300 颗星。它在浏览器中实现 Material 3 Expressive 界面的拖拽式搭建，可一键把设计转换成结构化的 AI 编程提示词，解决纯文字描述 UI 时 AI 生成效果偏差大的痛点。
它区别于传统原型工具，作用是设计与 AI 编程之间的桥梁。用户拖拽搭建可视化原型，系统自动把页面结构、组件属性、跳转关系、主题配置转成自然语言提示词，直接喂给 Claude Code、Cursor、Codex 等 AI 编码工具，让 AI 精准还原界面，实现所见即所得的开发体验。
一、项目简介
M3E Canvas 用浏览器在线搭建 Material 3 Expressive 界面，多页面自由连线、点击预览跳转，然后一键复制给 AI 编码工具。官方在线版无需安装直接可用，纯前端无后端，数据存本地，可免费商用。
二、项目功能
1. 拖拽式可视化界面搭建
内置 40 多个 Material 3 Expressive 原生组件，包括按钮、悬浮操作按钮、应用栏、底部导航、标签页、卡片、对话框、滑块、开关等。相邻组件靠近会自动磁吸成组，圆角自动融合，支持图层与编组管理，一键自动整理画布。
2. 多页面原型与交互设计
支持创建多个页面，在同一画布统一管理。可给任意组件或导航项指定跳转目标与转场动画，画布上显示流程箭头，预览模式可点击测试真实跳转流程。
3. 手机与桌面双形态适配
每个屏幕可在 412 乘 892 手机尺寸与 1280 乘 800 桌面尺寸间一键切换，底部导航自动变侧边栏，提示词会自动标注为同一屏幕的不同宽度适配。
4. 完整 Material 3 主题系统
一个面板集中调整配色、形状、字体、动效四大维度。七套预设配色或输入种子色自动生成全套配色，支持深色模式与动态颜色；圆角方形到全圆自由切换；Roboto 系列字体；标准或弹簧动效方案。
5. AI 友好的 Prompt 生成
自动把完整设计转成结构化提示词，支持中英日韩四种语言，可选 Android 或 Web 目标平台，可单屏或整项目导出，还支持生成针对 Claude Code、Codex 的专属指令。
6. AI Helper 智能辅助
支持自带 OpenAI、Claude、Gemini 或 DeepSeek 的 API Key，让 AI 辅助生成组件行为描述与页面说明。API Key 仅存浏览器本地，请求直连服务商，无第三方中转。
7. 实用工具能力
撤销与重做、屏幕导出 PNG、生成分享链接、设计数据默认保存在浏览器 localStorage，无需注册，数据完全由用户掌控。
三、项目亮点
M3E Canvas 精准解决 AI 编程痛点，把文字描述需求升级为可视化设计转精确施工图，让 AI 生成从靠猜变为按图还原。它真正实现了 Material 3 Expressive 最新设计语言，包括官方同款变形加载动画与弹簧动效。
零门槛零后端纯前端，无账号体系，打开即用，数据全在本地。它打通了可视化设计、交互原型、结构化提示词、AI 自动编码、真机运行的完整闭环开发流程。
对比同类工具
对比 M3E Canvas 和 Figma 等原型设计工具的区别，差异在面向 AI 编程的提示词输出。M3E Canvas 直接把设计转成可复制的结构化提示词，传统工具更多停留在设计稿本身。
| 对比项 | M3E Canvas | Figma 等原型工具 |
|---|---|---|
| 核心定位 | 设计转 AI 提示词 | 设计协作 |
| 输出 | 结构化 AI 提示词 | 设计稿与标注 |
| 成本 | MIT 免费开源 | 订阅或收费 |
四、项目结构清晰
基于 Next.js 16 App Router 架构，标准前端项目结构如下，源码目录简洁易读。
m3e-canvas 目录包含 app 主目录、components 组件目录、lib 工具逻辑目录、public 静态资源、i18n 国际化配置与 types 类型定义。
五、技术栈
- 核心框架 Next.js 16 静态导出模式
- UI 框架 React 19，开发语言 TypeScript
- 设计系统原生实现 Material 3 Expressive
- 画布基于原生 DOM 拖拽自实现
- 动效为原生 CSS 动画与 Web Animations API
主题配色使用 Material Color Utilities 官方算法，AI 接入原生 fetch 直连各家 OpenAPI 接口，国际化支持中英日韩，构建为 Next.js 静态导出，无后端依赖。项目由作者 lnkiai 持续维护，最后更新 2026 年，版本不断迭代。
六、本地快速部署启动
环境要求
需要 Node.js 22 或更高版本，以及 npm 或 pnpm 包管理器。低版本 Node 会出现依赖安装或构建失败。
方式一 零安装直接使用
无需部署本地环境，直接打开官方在线版 https://lnkiai.github.io/m3e-canvas/ 即可使用全部功能，无需注册登录。
方式二 本地开发模式
执行 git clone https://github.com/lnkiai/m3e-canvas.git 克隆项目，cd m3e-canvas 后 npm install 安装依赖，npm run dev 启动开发服务器，浏览器访问 http://localhost:3000。
方式三 生产构建静态部署
执行 npm run build 完成静态构建，产物输出到 out 目录。安装 serve 后执行 serve out -p 4173 即可预览，静态产物可部署到任意静态托管服务。
国内下载加速与备份
国内克隆或访问 GitHub 较慢时，可用镜像加速前缀或镜像代理下载源码与依赖，npm 依赖可用 npmmirror 镜像源安装。更完整的部署说明可扫码获取本站备份。
七、项目代码地址
项目代码地址 https://github.com/lnkiai/m3e-canvas ，官方在线版 https://lnkiai.github.io/m3e-canvas/ 。
常见问题
问. M3E Canvas 是什么
M3E Canvas 是一款在浏览器中可视化搭建 Material 3 界面并一键生成 AI 编程提示词的开源工具，把设计直接转成结构化提示词。
问. 怎么快速上手使用
打开官方在线版即可，拖拽组件搭建界面、连接页面跳转、配置主题，然后一键复制提示词交给 Claude Code 或 Cursor 等 AI 工具生成应用。
问. 和传统原型工具有什么区别
对比 Figma 等工具，M3E Canvas 面向 AI 编程输出，直接把设计转成提示词，更贴近 Vibe Coding 工作流。
问. 是否开源免费
项目以 MIT 协议开源，免费自用与商用，代码托管在 GitHub。
