lnkiai/m3e-canvas · 上手攻略
- 仓库：lnkiai/m3e-canvas
- 链接：https://github.com/lnkiai/m3e-canvas
- 分类：前端工具 / Material Design / AI 辅助开发
- 作者：Jay
- 更新：2026-09-04
这是什么
m3e-canvas 是一个浏览器端 Material 3 Expressive 屏幕原型工具。你在网页上拖拽 M3 组件（按钮、卡片、导航栏、对话框等）搭界面，然后把整个设计转成一段自然语言 prompt，复制粘贴给 AI 编程工具（Claude Code、Cursor、Gemini CLI 等），让 AI 直接生成可运行的代码。
它的核心价值在于：设计稿 → AI prompt 的自动化桥接。传统 vibe-coding 需要人工描述界面，m3e-canvas 通过可视化拖拽保证了描述的精确性，prompt 质量更高。
解决什么问题
AI 编程工具（Claude Code、Cursor 等）可以接受自然语言指令生成完整 App，但"精确描述界面"本身是件苦差事：
- 手动写 prompt 描述按钮位置、圆角弧度、颜色主题 → 容易歧义，AI 生成结果与设想有出入。
- 反复调整 prompt → 消耗 token，效率低。
- 设计 → 设计稿截图 → 粘贴给 AI → AI 解读截图可能有误差。
m3e-canvas 让设计师或开发者先在浏览器里用真实 M3 组件搭出原型，再导出标准化的 prompt，消除歧义，提高 AI 生成命中率。
快速安装
无需安装，可直接在 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 目录
⚠️ 依赖版本：Next.js 导出模式，Node.js 建议 ≥ 18。如需部署到子路径（GitHub Pages 项目站），构建时设置 NEXT_PUBLIC_BASE_PATH=/your-repo。
核心用法
1. 拖拽搭建屏幕
打开 canvas 后，从左侧组件面板拖入：
| 组件类别 | 包含内容 |
|---|---|
| 基础组件 | 按钮、图标按钮、FAB、FAB 菜单、Chips、App Bar、导航栏、搜索栏 |
| 数据展示 | 卡片、列表、对话框、Snackbar、文本框 |
| 输入组件 | 开关、复选框、单选按钮、滑块 |
| 装饰 | 文本、图片、徽章、分割线 |
拖入后可以： - 磁吸连接：把两个按钮或列表项靠近，它们会自动合并成一个组，角落软化过渡。 - 层级控制：用箭头键或层面板调整 z-order，或选中多个组件成组。 - 一键整理（Tidy）：自动将栏对齐边缘、FAB 贴角、相邻列表项合并，其余组件按 16dp 边距堆叠。
2. 多屏幕导航
可以添加多个屏幕，给任意可点击组件设置目标屏幕：
# 在预览模式下点击组件会跳转到对应屏幕
# 支持过渡动画：四边滑入、滑出、淡入淡化、展开
# 还可以给整屏设置"左滑/右滑/上滑/下滑"导航
3. 主题配置
在右侧主题面板一次性控制 M3 Expressive 四轴：
| 轴 | 可调选项 |
|---|---|
| Color | 7 个预设色板，或输入一个种子色自动生成完整 M3 配色方案；支持亮/暗模式 + 3 级对比度 + 动态色（跟随壁纸） |
| Shape | 全局设置方形/圆角/全圆角 |
| Type | 字体（Roboto / Roboto Flex / Roboto Serif / 系统字体）+ 强调样式 |
| Motion | 标准或 Expressive 弹簧动画方案（预览时实时生效） |
4. 导出 AI Prompt
点击 Prompt Output，选择目标平台（Android / Web）和语言（日语 / 英语 / 中文），即可生成一段完整 prompt，内容包含：
- 每个组件的名称、样式、位置关系
- 屏幕间导航流程
- 用户输入的行为描述（由可选 AI 助手辅助生成注释）
- 你自己的备注说明
# 生成的 prompt 示例结构
# 1. 整体描述（App 类型 + 主题色）
# 2. 屏幕1: [组件清单 + 位置 + 样式]
# 3. 屏幕1 → 屏幕2 导航说明
# 4. 行为描述（按钮点击、输入验证等）
# 5. 技术栈提示（Android Compose / React / Next.js 等）
复制 → 粘贴到 Claude Code / Cursor / Gemini CLI → 让 AI 生成代码。
5. 可选 AI 辅助写注释
设置中提供自己的 API Key（OpenAI / Claude / Gemini / DeepSeek），可以让 AI 帮写组件的行为注释或屏幕描述，Key 留在本地浏览器、不经过任何中间服务器。
6. 快捷键
| 快捷键 | 功能 |
|---|---|
V / H |
选择工具 / 手型工具（按住 Space 平移） |
| 滚轮 / Ctrl+滚轮 | 缩放 / 平移 |
+ - 0 |
放大 / 缩小 / 适应屏幕 |
Ctrl+Z / Ctrl+Shift+Z |
撤销 / 重做 |
Ctrl+D |
复制选中组件 |
| 方向键（Shift=10px） | 微调位置 |
Delete |
删除组件或屏幕 |
P |
预览模式 |
典型适用场景
- 移动 App AI 生成：设计师搭好 M3 原型 → 导出 prompt → Claude Code 生成 Android App 或 Web App，零手工代码。
- 快速验证 UI 想法：不需要 Figma，在浏览器里拖拽验证布局和主题是否合意，结果直接给 AI 产出代码。
- 设计交接文档：把 canvas 导出的 prompt 和截图一起发给开发者，AI 能更好理解设计意图。
- Material 3 学习工具：通过拖拽感受 M3 四轴（颜色/形状/字体/动画）之间的关系，比看文档更直观。
坑与注意
- 非所见即所得：导出的不是设计稿截图，而是自然语言 prompt。最终代码效果取决于 AI 对 prompt 的理解能力，部分细节（如精确的动画曲线）可能需要手动调整。
- Prompt 平台针对性：生成的 prompt 默认针对 Android（Jetpack Compose）或 Web（Next.js/React），其他平台需要手动修改 prompt 头部。
- 多语言 prompt：支持中日英三国语言，但中文 prompt 由日语/英语翻译而来，某些组件描述可能不够地道，建议用英语 prompt 效果更稳定（⚠️ 未经实测验证）。
- 本地存储限制：所有设计数据存在浏览器
localStorage，换设备或清缓存会丢失，重要设计需截图或导出 PNG 保存。 - 手机端能力受限：手机浏览器只能编辑单屏幕 + 按钮操作，不能做多屏幕管理和复杂拖拽；完整编辑需要桌面浏览器。
- 组件覆盖度：当前组件覆盖标准 M3 组件，但一些高级组件（如自定义 BottomSheet、M3 扩展组件）暂不支持，可通过"文字 + 边框"组合模拟。
与同类对比
| 特性 | m3e-canvas | Figma (AI 插件) | Locofy.ai | v0.dev |
|---|---|---|---|---|
| 核心定位 | 设计→prompt 导出 | 设计工具 + AI 辅助 | 设计→代码 | AI 对话生成 UI |
| 生成物 | 自然语言 prompt | 设计稿 | 代码 | 代码 |
| M3 支持 | ✅ 原生 M3 Expressive | 需插件 | 支持 | 有限 |
| 多屏幕导航 | ✅ 完整 | ✅ | 部分 | ❌ |
| 开源 | ✅ MIT | ❌ 闭源 | ❌ 闭源 | ❌ 闭源 |
| 浏览器直接用 | ✅ 无需安装 | ❌ 需安装 App | ❌ 需注册 | ❌ 需注册 |
m3e-canvas 的独特价值在于完全开源 + 浏览器即用 + prompt 精确导出，而不是替代 Figma 或直接生成代码。它是一座桥，把可视化设计和 AI 代码生成串联起来，填补了"设计工具 → AI 编程工具"的 gap。
一句话推荐结论
如果你在做 AI 编程（Claude Code / Cursor / v0），厌倦了手动调 prompt 来调 UI，m3e-canvas 是目前最优雅的解决方案——拖拽搭出 M3 界面，一键导出高质量 prompt，AI 生成结果更贴近设计意图，MIT 开源且浏览器直接可用。
⚠️ 本攻略基于 GitHub README 及 live demo 页面撰写。API Key 相关功能需自备各平台 Key，Key 留在本地 localStorage，请勿在公共设备使用。