GitHub 4.8k StarM3E Canvas从零部署完整教程 · 新手照着做就能跑起来 · AI 效率工具指南 · 原创教程摘要M3E Canvas 是 GitHub 上 6 天涨 4.8k Star 的开源界面设计工具MIT在浏览器里拖拽拼装 Material 3 Expressive 界面手机/桌面双形态、多屏跳转连线一键生成中文/英文/日文/韩文提示词直接喂给 Claude Code、Cursor、Codex 等 AI 编码工具照图写 App。本文实测三种使用方式官方在线版零安装、本地 npm 部署Node.js 22、静态构建 out/ 部署到 GitHub Pages/自有服务器并给出界面语言切换、Node 版本门槛、localStorage 数据丢失等踩坑解决与完整命令速查。用 AI 写 App 的朋友都有个共同烦恼代码它写得快但界面总是差口气——你说「要一个现代感的首页」它给你个十年前风格的列表你说「圆角卡片、悬浮按钮」出来的东西跟想象差十万八千里。M3E Canvas 解决的就是这个问题把界面直接画出来AI 看图写代码界面从此不走样。本文要点M3E Canvas浏览器里拖拽拼装 Material 3 Expressive 界面6 天 4.8k Star2026-09-08 实测数据一条路径零安装直接用官方在线版两条部署路径实测跑通npm dev / 静态构建 out/手机屏/桌面屏双形态、多屏跳转连线、一键生成中文/英文/日文/韩文提示词Android / Web 双目标4 个实测/官方踩坑点Node 版本门槛、界面语言切换、localStorage 丢数据、手机端精简模式无后端无账号数据只存浏览器可选自带 Key 让 AI 帮忙写说明BYOK直连无中转。一、GitHub 项目数据2026-09-08 实时查询项目数据仓库lnkiai/m3e-canvas创建于 2026-09-02仅 6 天Star4,7804.8k本周新项目热度第一梯队Fork435主要语言TypeScript技术栈Next.js 16静态导出 React 19 Material 3 Expressive 设计系统许可证MIT免费开源可商用官方在线版https://lnkiai.github.io/m3e-canvas/打开即用二、它解决什么问题对号入座你的痛点M3E Canvas 怎么解决让 Claude Code / Cursor 写界面描述半天 AI 做出的 UI 不对味把界面拖出来 → 生成结构化提示词 → AI 照着还原附中/英/日/韩文描述想要真·Material 3 风格界面但手写组件调样式太累40 官方 M3 Expressive 部件按钮/顶栏/列表/FAB…拖拽即用磁性吸附自动对齐成组App 有多个页面跳转流程跟 AI 讲不清楚多屏画布 部件点「跳转到哪个屏」 转场动画画布直接画出流程箭头同时要手机版和桌面版两套设计对齐累同一设计一键切 412×892 手机屏 / 1280×800 桌面屏导航栏自动变 rail 布局配色方案拿不准、想换整套主题色一个种子色自动生成整套 Material 3 配色含深色/动态色形状/字体/动效也能一键换不想把设计稿上传到任何云服务纯本地运行、无账号无后端数据只存浏览器 localStorage适用人群用 AI 编程工具做 App/网页的开发者前端最对口想快速出 Material 3 UI 稿的设计师。前提M3E Canvas 生成的是「提示词」最终写代码需要 Claude Code / Codex / Cursor / Gemini CLI 等 AI 编码工具README 官方确认兼容。三、部署三种方式任选全实测/官方核验路径 A最简单官方在线版零安装直接用浏览器打开https://lnkiai.github.io/m3e-canvas/即可GitHub Pages 托管官方持续部署。打开即是编辑器画布自带一屏示例设计可以直接上手改。注意数据保存在当前浏览器 localStorage——换浏览器、清缓存会丢设计重要设计记得点「提示词」复制存档。路径 B本地源码运行npm dev本文实测适合想稳定保存、断网可用、二次开发的读者。唯一前置要求Node.js ≥ 22.12或 24/26安装见第五节。# 1. 克隆源码本文实测直连成功失败可用 gitcode gh_mirrors 镜像gitclone--depth1https://github.com/lnkiai/m3e-canvas.gitcdm3e-canvas# 2. 安装依赖本文实测84 packages 约 2 分钟npminstall# 3. 启动开发服务器本文实测Next.js 16.3.4 Ready in 17.3snpmrun dev# 看到 Local: http://localhost:3000 即成功浏览器打开http://localhost:3000验证出现「首页」示例屏、左侧有 部件/图层/颜色/形状/字体/动效/AI/言语 8 个标签即部署成功。停止服务终端 CtrlC。路径 C静态构建部署到自己的网站npm run build本文实测想要独立域名/私有访问/团队共用构建产物是纯静态文件out/ 目录 2.7MBGitHub Pages / Vercel / Netlify / Nginx 都能托管服务器不需要 Node 运行时。# 1. 构建本文实测约 70sTypeScript 检查 静态页面生成通过npmrun build# 产物out/ 目录含 .nojekyllGitHub Pages 友好# 2. 本地预览产物可选npx serve out# 3. 部署到 GitHub Pages仓库自带 .github/workflows/deploy.yml# 推送到 main 分支即自动构建发布官方在线版就是这套流程# 4. 子路径部署如 https://你的域名/m3e/构建时指定# Windows PowerShell$env:NEXT_PUBLIC_BASE_PATH/m3e 然后 npm run build# 再把 out/ 整个目录上传到服务器即可四、环境安装新手从零只需要 Node.js本项目的唯一硬性环境要求是 Node.js官方声明^22.12.0 || ^24.0.0 || 26.0.0没装过的一步步来① 下载打开 https://nodejs.org 点左侧「LTS」版本下载22.x 或 24.x 均可别下载奇数版如 25.x② 安装双击 .msi 一路 Next默认已勾选 Add to PATH不要取消③ 验证重开命令行输入node --version和npm --version能看到 v22.12 即成功④ 国内加速可选npm config set registry https://registry.npmmirror.com本文实测该镜像安装 84 个依赖约 2 分钟。五、怎么用场景化详解核心章节编辑器界面本文实测截图左侧是 部件/图层/颜色/形状/字体/动效/AI/言语 8 个面板标签中央是画布默认有一个「首页」示例屏412×892 手机框顶栏、两个按钮、三个列表项、悬浮 FAB、底部导航右侧是 编辑/提示词 面板。所有操作自动保存到浏览器。▲ M3E Canvas 编辑器全景左侧部件/颜色等 8 面板 中央手机示例屏 右侧编辑面板本文实测截图场景 1让 AI 写 App 界面但它总做不对画好再给它这是 M3E Canvas 的核心用法。① 在部件面板部品标签把需要的部件从面板往画布屏幕里拖——按钮、顶栏、列表项、FAB 等 40 部件两个部件靠近会自动磁性吸附成一组官方功能② 右侧「编辑」面板改文字、颜色等细节③ 点右侧「提示词」标签或顶部提示词按钮打开输出面板选择语言中文等和目标平台Android 或 Web④ 复制生成的提示词粘贴给 Claude Code / Cursor / Codex让它照图写代码。生成的语言和平台会直接影响 AI 拿到的描述与技术栈。▲ 右侧「提示词」输出面板整个设计转成结构化描述本文实测截图场景 2App 要手机 桌面两版一套设计两种形态屏幕顶部标签可在「手机 / 桌面」间切换实测界面按钮412×892 的手机屏切到 1280×800 桌面屏时顶部栏自动拉伸、底部导航自动变成侧边 rail 导航部件会重新排版两种尺寸可共用一个设计同名屏幕在提示词里会写成「同一屏的两种宽度」官方功能。做响应式 App 时一套稿子喂给 AI 两种形态。场景 3多页面跳转流程讲不清画连线工具栏点「添加屏幕」新建多个屏选中任意可点部件按钮、顶栏图标、导航项在编辑面板里设置「点击后跳转到哪个屏幕或返回」和转场动画四个方向滑入/淡入/放大。画布上部件间会画出流程箭头按 P 进入预览可直接点按体验跳转返回时动画反向播放——把交互逻辑也一并告诉 AI官方功能。场景 4配色拿不准一个颜色换整套主题左侧「颜色」标签打开主题面板见下图实测截图选 7 个预设之一或输入一个种子色让它自动生成整套 Material 3 配色可微调支持亮/暗模式、三级对比度和跟随壁纸的动态色「形状」标签可把全部部件角统一切圆角/直角/全圆「字体」在 Roboto/Roboto Flex/Roboto Serif/系统字体间切换「动效」选择标准或 expressive 弹簧动效预览跳转也会用。换完主题再重新生成提示词AI 拿到的配色就是新的。▲ 左侧「颜色」主题面板种子色生成整套配色 亮/暗/对比度调节本文实测截图场景 5做完想交付/存档/分享提示词面板可直接复制可先手动编辑补充设计可导出单屏 PNG 图片存档编辑面板保存图片入口「分享链接beta」可复制一个链接别人打开就能看到你的设计官方 beta 功能。所有内容也支持撤销/重做CtrlZ / CtrlShiftZ、键盘快捷键V 选择 / H 抓手 / CtrlD 复制 / Delete 删除与「一键整理」自动对齐。诚实说明以上场景基于官方功能清单README与本文实测界面部件面板 6 分类 40 部件、8 个编辑面板标签、示例屏 8 个部件 DOM 渲染、提示词/主题面板、语言切换均实测确认。新部件拖拽落位、点击跳转预览、PNG 导出、AI 辅助与分享链接等交互受本文写作环境限制未能逐帧实跑均按官方说明描述——建议以你浏览器里的实际界面为准核心链路拖部件→生成提示词→复制给 AI已有官方演示视频README story.gif验证。六、踩坑记录坑 1Node 版本过旧npm install / dev 报引擎错误EBADENGINE现象安装依赖或启动时报引擎不满足或依赖装完跑不起来。原因package.json 要求 Node ^22.12.0 / ^24.0.0 / ≥26.0.0Next.js 16 React 19 较新18/20 旧版不支持。解决到 nodejs.org 装 LTS22/24 均可勿装 25 等奇数版重开命令行验证node --version≥ v22.12 后再装。坑 2打开后界面是日语/英语怎么切中文现象界面文字不是中文。原因应用按浏览器语言自动选择界面语言中/英/日/韩选择还会被记住。解决点「语言/言語/Language」按钮——桌面版在左侧面板底部言语标签手机版在顶部——选「中文」即全局切换本文实测示例屏文字同步变中文。坑 3换浏览器/清缓存后画的设计全没了现象换浏览器或清理浏览器数据之前的设计消失。原因无账号无云同步数据只存在原浏览器 localStorage。解决重要设计及时点「提示词」复制存档或导出 PNG长期使用建议固定浏览器 本地部署路径 B/C换设备用分享链接beta迁移。坑 4手机上打开只有极简编辑功能不全现象窄屏840px打开只有单屏 添加按钮的精简模式。原因官方设计——完整多屏编辑器面向桌面浏览器手机端是轻量查看/编辑模式。解决用电脑浏览器编辑手机端做查看/微调即可。七、功能验证与真实运行结果以下为本文写作时2026-09-08Windows 11 Node v24.14.0的真实验证结果验证项结果git clone 源码✅ 直连成功GitHub 原地址npm install84 packages✅ 成功npmmirror 镜像约 2 分钟npm run dev 启动✅ Next.js 16.3.4 (Turbopack) Ready in 17.3shttp://localhost:3000 → HTTP 200npm run build 静态构建✅ TypeScript 检查通过out/ 2.7MB含 .nojekyllGitHub Pages 友好编辑器渲染桌面✅ 8 个面板标签、部件面板 6 分类 40 部件、中央「首页」示例屏412×892示例屏部件 DOM✅ 8 节点实测topAppBar / button×2 / listItem×3 / FAB / bottomNav坐标尺寸正确中文界面切换✅ 语言菜单切「中文」成功示例屏文字同步中文化截图为中文界面提示词/主题面板✅ 面板可打开见 assets/02、03 截图拖拽新部件落位 / 预览跳转 / PNG 导出 / AI 辅助⏳ 预期待实测本文自动化环境限制官方演示已验证核心链路八、常见问答Q1M3E Canvas 是设计工具还是代码生成器它是「界面设计 → AI 提示词」的转换工具负责把界面拖出来、说清楚含跳转/主题产出给 AI 编码工具的高质量提示词写代码由 Claude Code / Codex / Cursor / Gemini CLI 完成提示词可直接粘贴给它们目标平台可选 Android 或 Web。Q2需要付费/注册/API Key 吗核心功能全免费、开源MIT、无账号无付费墙。只有可选的「AI 辅助写说明」需要你自带 OpenAI/Claude/Gemini/DeepSeek KeyBYOKKey 只存在你自己浏览器、请求直连官方、无中转服务器不填 Key 完全不影响拖拽设计与提示词生成。Q3提示词能生成中文吗Android 和 Web 有什么区别可以。输出面板支持 中文/英文/日文/韩文目标平台选 Android默认时提示词按 Android 技术栈组织选 Web 时按 Web 技术栈组织官方功能。Q4项目才发布 6 天稳定吗值得现在用吗项目很新但热度极高6 天 4.8k Star、435 Fork核心链路拖拽→提示词→AI 生成有官方演示视频背书MIT 许可无使用风险。体验零成本打开在线版就能用建议重要项目搭配本地部署 及时导出存档关注后续版本迭代。Q5能导出 Figma / 代码文件吗目前导出形态是提示词可编辑、单屏 PNG、分享链接beta不做 Figma/代码文件直接导出——因为它的定位是把稿子交给 AI 编码工具去写代码而不是给你半成品源码。九、总结M3E Canvas 踩中了 vibe-coding 时代最实际的痛点——AI 写代码快但「界面长什么样」一直是文字描述的死角。它把 Material 3 界面设计变成拖拽拼装再变成 AI 能精确理解的提示词让「画界面 → AI 写 App」成为一条顺畅流水线。零安装可在线上手路径 A要稳定部署有两条实测跑通的路径npm dev / 静态构建 out/。适合所有用 AI 写前端界面的开发者也适合想给 AI 编程补上「设计语言」的创作者。免费、开源、无账号、本地存储项目 6 天 4.8k Star 的热度也说明这个需求是真实的——值得现在就打开在线版拖一个界面试试。完整命令速查# 0. 环境Node ≥ 22.12nodejs.org 装 LTS国内可先配镜像npmconfigsetregistry https://registry.npmmirror.com# 1. 克隆原地址失败换 gitcode 镜像 gh_mirrors/ln/m3e-canvasgitclone--depth1https://github.com/lnkiai/m3e-canvas.gitcdm3e-canvas# 2. 本地运行npminstallnpmrun dev# 浏览器打开 http://localhost:3000# 3. 静态构建 本地预览npmrun build# 产物 out/2.7MBGitHub Pages 可直接托管npx serve out# 本地预览构建产物# 4. 零安装使用直接打开官方在线版# https://lnkiai.github.io/m3e-canvas/项目地址[lnkiai/m3e-canvas] (https://github.com/lnkiai/m3e-canvas)官方在线版https://lnkiai.github.io/m3e-canvas/标签M3E Canvas、vibe-coding、AI编程、Claude Code、Cursor、Material 3、界面设计、提示词工程、Next.js、React、开源工具、效率工具