把 Material 3 Expressive 画布搬进浏览器
M3E Canvas（lnkiai/m3e-canvas，即常说的 M.SAY）把 Material 3 Expressive 画布搬进了浏览器：一个免费的、开源的应用界面速写板，用真实 Material 3 Expressive 组件拼界面。它完全在浏览器里运行：无需账号、无需服务器、无需安装。你画好的界面会变成一条精确的 vibe coding 提示词，交给任何能接收提示词的 AI 编程工具（Claude Code、Codex、Gemini CLI、Cursor）就能生成可运行的应用。
三步流程：① Sketch——拖组件到手机/桌面屏幕，4dp 网格自动吸附对齐；② Tap through——把组件连到各屏，按 Preview 试流程（含转场）；③ Copy the prompt——整个设计变成你语言的简短 brief，粘给 AI 编程工具。
版本与获取：实测 9,662 Star（1,052 fork，TypeScript，2026-09 创建、今天更新），协议 MIT，在线版 lnkiai.github.io/m3e-canvas（Trendshift 当日 #1）。基于 Next.js 16 / React 19。
✨ 核心亮点
- 🧩 20+ 真实组件：按钮/导航栏/对话框/卡片/轮播等，每部件有独立面板
- 📱 双尺寸画布：412×892 手机 / 1280×800 桌面自动适配
- 🎨 主题一键：7 套预设/自定种子色，色彩/形状/字体/动效
- 🌐 多语言提示词：中/英/日/韩 brief，直接粘给 AI 编程工具
🧩 它能做什么
| 能力 | 说明 |
|---|---|
| 组件库 | 按钮/图标按钮/FAB/菜单/分割按钮/芯片/应用栏/导航栏与侧栏/浮动工具栏/标签/搜索栏/卡片/列表项/底栏/对话框/快照条/输入框/下拉/开关/复选/单选/滑块/日期时间选择/文本/图片/轮播/相机与地图占位/分隔线/加载指示器等 20 余类 |
| 串联流程 | 点按/滑动跳转另一屏，转场可选 slide/fade/expand，Preview 可试玩，返回反向 |
| 磁吸连接 | 组件靠近自动融合成组、边角柔化 |
| 主题 | 7 套配色预设或种子色→完整 Material 3 scheme；浅/深色、3 级对比度、动态色；圆角/直角/全圆；多字体；标准或 expressive 动效 |
| 提示词导出 | 整屏或单屏 → 中/英/日/韩 brief，可加行为笔记，选 Android 或 Web 目标，可存 PNG |
| AI 辅助（可选） | 自带 key（OpenAI/Claude/Gemini/DeepSeek）草稿设计/写行为笔记，key 不出浏览器 |
🖼️ 效果图与演示
以下为 M3E Canvas 官方 banner 与功能总览图。
🚀 上手步骤
最快路径：打开 lnkiai.github.io/m3e-canvas → 拖组件拼手机/桌面界面 → 串联点击流程 → 复制中/英/日/韩提示词 → 粘给 Claude Code/Cursor 生成应用。
① 打开画布（免装免账号）
浏览器打开在线版 lnkiai.github.io/m3e-canvas 即可用，数据自动保存在浏览器本地。想在本地跑可 clone 仓库。
npm install
npm run dev # http://localhost:3000
npm run build # 静态导出到 ./out② Sketch：拖组件搭页面
从部件面板拖按钮、导航栏、卡片、对话框等到手机（412×892）/ 桌面（1280×800）屏幕，组件在 4dp 网格上吸附对齐。每个部件有自己的面板：文字、样式、大小、对齐，以及「触发」标签（点一下干嘛）。
③ 串联流程 + 主题
把按钮/导航目标连到其他屏（转场选 slide/fade/expand），Preview 试玩流程。主题面板设配色（7 套预设或种子色）、形状、字体、动效，自动应用到全部部件。
④ 复制提示词 → AI 编程工具生成应用
点 Copy 把整个设计变成中文/英文/日文/韩文的简短 brief，选 Android 或 Web 目标，粘给 Claude Code、Codex、Gemini CLI 或 Cursor，它就能生成可运行的应用。
🎯 典型应用场景
- ⚡ vibe coding 出应用：画界面→生成提示词→AI 写代码
- 🛠️ 产品原型：拖拽快速拼可交互流程稿
- 🎨 M3 主题定制：7 预设/种子色，一套主题全应用
- 🌐 多语言交付：中英日韩 brief 直给 AI
📈 与同类做法对比
| 做法 | 结果 |
|---|---|
| Figma/设计工具 | 功能强但学习成本高，产出的不是给 AI 的提示词 |
| 纯文字让 AI 画界面 | 构图随机、不可控，组件不真实 |
| M3E Canvas | 拖真实 M3 组件拼界面、串流程、一键导出多语言 vibe-coding 提示词给 AI 编程工具，免装免账号 |
⚠️ 提醒：提示词交给 AI 编程工具生成的应用，请遵守平台规则与代码许可；可选 AI 辅助（OpenAI/Claude/Gemini/DeepSeek）需自带 API key，key 只在本地浏览器与供应商之间传输。
❓ 常见问题
Q：需要安装/注册账号吗？
不需要。浏览器打开 lnkiai.github.io/m3e-canvas 即用，无需账号、无需安装、无服务器。
Q：和 M.SAY / M3 Expressive 是什么关系？
你听到的 M.SAY 就是本项目 M3E Canvas（lnkiai/m3e-canvas），即「Material 3 Expressive 画布」——用 Material 3 Expressive 组件在浏览器里速写界面。
Q：组件有哪些？
20 余类：按钮/图标按钮/FAB/FAB菜单/分割按钮/芯片/应用栏/导航栏与侧栏/浮动工具栏/标签/搜索栏/卡片/列表项/对话框/底栏/快照条/输入框/下拉/开关/复选/单选/滑块/日期时间选择/轮播/加载指示器等。
Q：怎么生成应用？
拖组件拼界面→串流程→点 Copy 得到中/英/日/韩 brief→粘给 Claude Code、Codex、Gemini CLI 或 Cursor，它按提示词生成可运行应用。
Q：支持手机和桌面适配吗？
支持。屏幕可在 412×892 手机和 1280×800 桌面间切换：导航栏变侧栏、部件自动重排；同名屏幕会以两种宽度写入提示词。
Q：主题能定制什么？
色彩（7 套预设或种子色转完整 scheme、浅/深色、3 级对比度、动态色）、形状（圆角/直角/全圆）、字体（Roboto/Roboto Flex/Serif/系统）、动效（标准或 expressive spring）。
Q：提示词支持哪些语言？
中文、英文、日文、韩文四种；可选 Android 或 Web 作为目标平台，粘前还能编辑文本。
Q：AI 辅助需要付费吗？
AI 辅助是可选项，需自带 API key（OpenAI/Claude/Gemini/DeepSeek）用于草稿设计/写行为笔记，key 只在你浏览器与供应商之间传输，不离开浏览器。
Q：商用 / 二次开发？
MIT 开源，可自由使用、修改与商用（按协议保留声明）。GitHub Discussions 可提问题与建议。
📎 GitHub 搜索 lnkiai/m3e-canvas · 在线版 lnkiai.github.io/m3e-canvas · 关注「AI工具匠」获取更多 AI 工具实操教程