M3E Canvas

M3E Canvas 快速入门

「画完界面稿，直接复制成 vibe coding 提示词」——M3E Canvas（lnkiai/m3e-canvas）让你在浏览器里拖拽组件拼装 Material 3 Expressive 界面：多屏连线成流程、点击预览走查、调主题（七个预设或种子色生成完整 M3 配色），最后一键复制一段结构化提示词，喂给 Claude Code / Codex / Gemini CLI / Cursor 让它把应用做出来。MIT，Next.js + TypeScript，2026-09-23 核验：GitHub 8,004★ / 839 fork，创建仅 21 天（2026-09-02），在线 demo 持续部署。

这是什么？适合谁？

M3E Canvas 补的是「设计稿 → AI 编程工具」链路中最脆弱的一环：你脑子里有界面想法，但手写提示词缺乏结构、AI 凭空生成的 UI 又不符合 Material 3 规范。它提供一个纯浏览器画布：拖组件（按钮、卡片、FAB、导航栏…）、摆屏幕、连导航流、实时预览 M3 Expressive 的色彩/形状/动态效果，然后把整份设计（结构 + 主题 + 流程）导出成 AI 编程工具能直接消费的提示词。手机端有单屏 + 按钮式编辑器（完整多屏编辑器为桌面端设计）。

适合人群：

• 独立开发者/产品经理：不会 Figma 但想让 AI 按自己的布局想法出 App
• Android/Material 开发者：快速验证 M3 Expressive 的主题与组件组合
• vibe coding 玩家：给 Claude Code/Cursor 一个结构化的 UI 输入而不是一句「做个好看的页面」

不适合谁：需要高保真视觉稿交付设计师的团队（那是 Figma 的领地）；Web/iOS 设计系统用户（M3E 绑定 Material 3）。

准备工作

• 运行环境：现代桌面浏览器（Chrome/Edge/Firefox）；手机浏览器可用单屏模式
• 账号要求：在线版（GitHub Pages）无需账号；自托管亦免费
• 工具链（吃到提示词的一端）：任一 AI 编程工具——Claude Code、Codex、Gemini CLI、Cursor 均可
• 时间预算：打开链接 5 分钟内拼出第一个界面；配合 AI 工具跑通「稿→应用」全链路约 30-60 分钟
• 前置知识：了解 Material 3 基本概念（组件名、主题色）有助于读懂导出的提示词

快速上手

第一步：打开在线版

直接访问 lnkiai.github.io/m3e-canvas，无需注册安装。（自托管：clone 仓库后按 README 的 Next.js 流程 npm install && npm run dev，CI 自动部署 GitHub Pages。）

第二步：拼一个界面

1. 点 + 添加组件（按钮/文本/卡片/图片位等），拖拽定位
2. 在右侧面板编辑组件的文字、图标、样式
3. 新建第二个屏幕，用连线定义「点这个按钮 → 跳到那个屏幕」

第三步：调主题

选七个预设主题之一，或输入一个种子色自动生成完整 Material 3 配色；可微调、切换亮暗模式与三档对比度（含动态取色模拟）。

第四步：预览走查

点击「预览」，按连好的流程逐屏点击——验证导航逻辑是否符合预期，这是写提示词前的最后检查。

第五步：复制提示词 → 喂给 AI

点击复制，得到一段包含屏幕结构、组件清单、主题参数、导航流程的结构化提示词。粘贴到 Claude Code / Codex / Gemini CLI / Cursor，让它生成应用。

预期产出：一个 Material 3 Expressive 风格的可运行应用骨架。官方演示视频（docs/story.mp4）完整展示了「拼食谱应用 → 换主题 → 复制提示词 → AI 编程工具构建 → Android 运行」全流程。

常见踩坑

1. 手机上找不到多屏编辑器：手机端是固定的单屏 + 底部按钮编辑器（点 + 加按钮、点按钮移动、底部弹层编辑）；完整多屏画布请用桌面浏览器。
2. 提示词不是万能稿：导出的是结构与主题描述，视觉细节（动效曲线、插画）仍需在生成后手调；把它当「高保真规范文档」会失望。
3. 组件与真实 M3 组件库的差异：画布组件是简化抽象，个别属性在导出提示词中会被规范化描述，以导出内容为准。
4. 种子色生成的配色不可访问：三档对比度调节就是为此准备的，低对比预设别直接用于生产。
5. 在 AI 工具里丢上下文：一次贴多个屏幕的提示词时，长对话会稀释早期屏幕的细节；建议按屏幕分次给或让工具先建骨架。
6. 离线依赖：自托管版本依赖 Next.js 构建，纯静态分享场景直接用在线版更省事。

常见问题 FAQ

Q1：导出的提示词支持哪些 AI 编程工具？

A：任何接受文本提示词的工具——README 明确点名 Claude Code、Codex、Gemini CLI、Cursor；格式为通用结构化描述，非某家专有语法。

Q2：能导出 Figma/Sketch 格式吗？

A：以仓库当日功能为准，当前主打「复制提示词」这一条链路，不是通用设计工具替代品。

Q3：Material 2 项目能用吗？

A：组件与主题体系是 Material 3 Expressive（含形状/动态效果新特性），M2 项目参考价值有限。

Q4：数据存在哪？

A：纯浏览器本地画布（以在线版行为为准），无账号体系；重要设计自行保存提示词或截图。

Q5：商用许可？

A：MIT。

权限、安全、成本与限制

• 许可：MIT，可自由商用与二开。
• 安全：纯前端工具，无服务端账号；自托管时注意 GitHub Pages/CI 配置不引入敏感信息。
• 成本：全免费（在线版 + 自托管均无费用）；后续成本在 AI 编程工具侧。
• 限制：绑定 Material 3 Expressive 体系；导出物是提示词而非代码/设计稿文件；本文基于官方 README 与仓库页撰写，未实测全部组件类型。

小技巧

1. 先在纸上想清楚屏幕清单，再上画布——多屏连线一旦超过五六屏，命名混乱会让提示词难读。
2. 主题用「种子色 + 手动微调」而不是反复换预设：品牌色一致性对 AI 生成结果的视觉统一帮助最大。
3. 预览走查时专门测「返回」连线，AI 生成应用最常漏的就是返回栈。
4. 提示词复制后在 AI 工具里先要求「先复述你理解的屏幕结构再动手」，能拦住大部分理解偏差。
5. 给 AI 的目标平台说清楚（Android/Compose 还是 Web/Material Web），同一个提示词两端实现差异很大。

进阶学习方向

• M3 Expressive 体系：形状系统、动态色、expressive 动效是 2025-2026 Material 的主线，官方 m3.material.io 文档配合画布实验最直观。
• 提示词工程 for UI 生成：把 M3E 导出的结构化描述当模板，学习如何给 AI 编程工具描述布局层级与导航流。
• 二开方向：Next.js + TypeScript 代码库规模可控（166 commits、创建 20 天），加自定义组件模板或导出格式是友好的首个 PR 方向。
• 组合链路：M3E Canvas（设计）→ Claude Code/Codex（生成）→ Android Studio 预览（验证），官方 story.mp4 就是完整示范。

参考链接

• 官方仓库
• 在线 demo
• 官方演示视频
• Material 3 官方文档