M3E Canvas教程：浏览器里画Material 3界面，一键生成AI编码提示词

📌 项目日期：2026年9月 | 数据来源：GitHub官方仓库 | 星数：1,207+

📋 项目简介

M3E Canvas 是一个纯浏览器端的开源设计画布：你用拖拽的方式在画布上摆 Material 3 Expressive 组件，把多个界面连起来点按跳转，确认满意后一键复制提示词，粘贴给 Claude Code、Codex、Gemini CLI 或 Cursor，AI 就能把这套设计变成真正能跑的应用。官方演示了完整闭环：画一个食谱App、换主题、复制提示词、AI 生成、直接跑在 Android 上。

它基于 Next.js 16 与 React 19 构建，MIT 协议，没有后端——所有数据存 localStorage，打开即用。在线版已部署在 lnkiai.github.io/m3e-canvas。与偏协作白板的 Doop设计画布 定位不同，M3E Canvas 专注"设计稿到AI提示词"这最后一公里。

🔧 核心功能

📦 快速上手

# 方式一：直接用在线版
https://lnkiai.github.io/m3e-canvas/

# 方式二：本地运行（Next.js 16 / React 19）
git clone https://github.com/lnkiai/m3e-canvas.git
cd m3e-canvas
npm install
npm run dev

💡 工作流示例

1. 在画布上拖出应用栏、导航栏、FAB 与内容卡片，摆出首页轮廓
2. 再画第二屏（详情页），用连线把两屏接起来，点按验证跳转逻辑
3. 切换主题色与字体缩放，直到视觉满意
4. 点击复制提示词，粘贴进 Claude Code / Cursor，让它生成完整应用
5. 生成结果跑起来后，回到画布微调再迭代一轮

🔄 适合谁用

• 想用 vibe coding 做App但不知道怎么把设计意图讲清楚的开发者
• 产品/设计师：把界面想法快速变成AI可执行的规格说明
• Material Design 学习者：可视化理解 M3 Expressive 的组件与动效规范